How to Add SVG Animations to Pages

[PYoganathan]

Hello,

I am trying to add custom SVG animations made from Adobe Premiere with the Bodymovin plugin. The method I am currently using is adding the HTML code into the rich text editor when adding it inside a module, but I am coming across that the file is too big. It's roughly 1.5 MB for the HTML file.

Is there a recommended solution to adding SVG animations from HTML/JSON files within modules/pages? And what is the recommended file size for HTML/JSON animations?

(The reason for the file size is the images, so if we separate the images in a separate folder, how would we link the HTML file?)

[DaleMooney]

Adding SVG animations to your pages can be tricky, especially when dealing with larger files like your 1.5 MB HTML file. 😅
A recommended solution is to optimize your SVG animations. You can use tools like SVGOMG or SVGO to reduce the file size without sacrificing quality. For linking separate image folders, you can use relative paths in your HTML file. This way, it'll point to the images correctly, even if they're in a different directory.
And hey, if you're still on the hunt for ways to simplify the process, I've got a suggestion for you. Check out an AI vector generator. It can help streamline your graphics and animations, making them more web-friendly.

[webdew]

Hi @PYoganathan ,

I don't think size does matter
The simple way is to create a module and use a text field(not rich text) in the module and add SVG code in it and add your custom style code with the code in a style tag.

Hope this helps!
If we were able to answer your query, kindly help the community by marking it as a solution.
Thanks and Regards.

[Anton · Accepted solution]

Hi @PYoganathan, 

my personal go-to-solution for implementing animated SVGs in HubSpot is this:

• create a custom module(optional but recommended)
• insert a text-field(not rich-text) or URL option and an image option(for fallback;can be a text or URL field too) for the path to the SVG animation(can be file-manager or external; I prefer file-manager for performance)
• write the layout(see below)
• apply desired CSS styling to it(I would recommend to do it in the main CSS file or in a seperate file which you link in the module)
• save the module
• use the module

My layout code(feel free to modify it):

<div class="mySVGanimation">
<object type="image/svg+xml" data="image.svg">
    <!-- Your fall back here -->
    <img src="image.svg" alt="My fallback image for SVG if the animation is blocked by the browser" class="fallbackImage"/>
</object>
</div>

same code but with hubl:

<div class="mySVGanimation">
<object type="image/svg+xml" data="{{module.text_field}}"> {# if you decide to go with an URL field paste the value of it here instead of the text field #}
    <!-- Your fall back here -->
    <img src="{{ module.image_field.src }}" alt="{{ module.image_field.alt }}" class="fallbackImage"/>
</object>
</div>

Note: I didn't change the names of the seperate fields.

The usage would be:
Drop the custom module into the place you'd like to use it, paste the URL to the SVG into the text or URL field, select a fallback image(can be jpg,png, svg - what ever you like but think about "old"/"not-mainstream" browsers which may not support SVGs) - done. 

Also: 1.5MBytes for an SVG is really big and will most likely have a negative impact on the performace. Have you tried to recreate your SVG in something like SVGator? 

Hope this helps, 

best, 

Anton

[PYoganathan]

Hello Anton,

I am using the Bodymovin plugin from Adobe After Effects and the reason why it was such a big file was the images; the images were embedded inside the JSON file. I had to separate the images for the HTML/JSON file to be reduced.

[TMelo3]

Hola @PYoganathan que bueno que pudiste integrar esto en hubspot.

Me ayudarías como exportaste desde After effect? y luego como integraste el JSON?, tengo una animación pero es solo vector, sin imágenes. Gracias 😄

[dennisedson]

@PYoganathan , I would consider making a custom module specific to this.  1.5mb is pretty heavy so be careful regarding site speed

@Anton , any thoughts here?

[PYoganathan]

So I did some digging and the reason why the file was really large was due to the images. The images were encoded into the JSON file which was the cause of the file size. There's an export option to link the files separately rather than include them in the JSON file which will export the images in a separate file.

What I did was upload the individual images onto HubSpot and inside the script code where the image src is being referenced, I used the file path to redirect to those images.

This is the code snippet when exporting from Bodymovin. 

<script>
var animationData = {"v":"5.8.1","fr":25,"ip":0,"op":200,"w":1920,"h":1080,"nm":"example_animation 2","ddd":0,"assets":[{"id":"image_0","w":639,"h":367,"u":"https://f.hubspotusercontent20.net/hubfs/000000/svg_animation/images/","p":"ImageName.jpg","e":0},
...
</script>

And to follow up with your answers, the custom module did work on that end, just pasting the code and dragging the module works. Another option I tried was pasting the code into a rich-text editor if a custom module has other assets around it.