<p>If you have no alpha-channel and would like to run the animation on your website (as a background for example), I would highly recommend you encode it in h264 .mp4 format, with about 3-6 MBit/s and 2 passes VBR to lower the filesize further. Also take a look at your framerate, as you could get away with 20 frames for a slow animation. I wouldn't go above 30fps. I hope I could help you, if not, please comment on my post.</p>

CC BY-SA 4.0
2020-06-09T12:21:03.370Z
2020-06-09T12:21:03.370Z
Florian Claaßen
<p>Bodymovin works best for things like shape and text layers, that can be described by the SVG language. SVG is a bit like html, it contains instructions on how to render the content, rather than the actual images. For example if you wanted to draw a circle 256px wide, rather than create a raster image of a circle, and provide the colour info for each pixel in the 256x256 pixel grid (over 65 thousand pixels, each with red, green and blue value) you can make an svg that does the same thing thus:</p>

<pre><code> &lt;svg height="100" width="100"&gt;
     &lt;circle cx="256" cy="256" r="40" stroke="black" stroke-width="3" fill="red" /&gt;
 &lt;/svg&gt; 
</code></pre>

<p>It's also scaleable. If you resize it up to 500px there will be no quality loss, because it's rendered on the client machine. </p>

<p>However, if you have content that can't be described in the SVG language, such as raster (pixel grid) images such as jpegs or pngs, or video, it can't just describe it, it has to embed the raster into the output, meaning that SVG will not be any more efficient than just using an <code>&lt;img&gt;</code> or <code>&lt;video&gt;</code> element. </p>

<p>PNG sequences are great as a lossless intermediate for transferring video on a local machine with lots of storage, they completely fail as a web codec. Web codecs are highly efficient at reducing file size with minimal perceptible quality loss, so they're what you need for the flux output.</p>

<p>TL;DR as Florian says: use h.264 encoded video.</p>

CC BY-SA 4.0
2020-06-10T10:39:32.937Z
2020-06-10T10:39:32.937Z
stib
<p>I have been trying to export an After Effects animation of an aurora borealis (made with Flux) as an SVG for a website, but every time I export it looks a bit low res and takes up to much space to be applied to a web page. I tried to render it first as a PNG sequence and the render it with bodymovin but the problem still persists. Can anyone help pls?</p>

<after-effects><animation>
Converting AE animations to SVG with bodymovin
user30143
# Converting AE animations to SVG with bodymovin

(Asked by: username_0 on 2020-06-09)

I have been trying to export an After Effects animation of an aurora borealis (made with Flux) as an SVG for a website, but every time I export it looks a bit low res and takes up to much space to be applied to a web page. I tried to render it first as a PNG sequence and the render it with bodymovin but the problem still persists. Can anyone help pls?

**Tags:** after-effects, animation


---

## 2 answers

### Answer by username_1 on 2020-06-09. Score: 1

If you have no alpha-channel and would like to run the animation on your website (as a background for example), I would highly recommend you encode it in h264 .mp4 format, with about 3-6 MBit/s and 2 passes VBR to lower the filesize further. Also take a look at your framerate, as you could get away with 20 frames for a slow animation. I wouldn't go above 30fps. I hope I could help you, if not, please comment on my post.


---

### Answer by username_2 on 2020-06-10. Score: 1

Bodymovin works best for things like shape and text layers, that can be described by the SVG language. SVG is a bit like html, it contains instructions on how to render the content, rather than the actual images. For example if you wanted to draw a circle 256px wide, rather than create a raster image of a circle, and provide the colour info for each pixel in the 256x256 pixel grid (over 65 thousand pixels, each with red, green and blue value) you can make an svg that does the same thing thus:
 
     
  

It's also scaleable. If you resize it up to 500px there will be no quality loss, because it's rendered on the client machine. 
However, if you have content that can't be described in the SVG language, such as raster (pixel grid) images such as jpegs or pngs, or video, it can't just describe it, it has to embed the raster into the output, meaning that SVG will not be any more efficient than just using an  or  element. 
PNG sequences are great as a lossless intermediate for transferring video on a local machine with lots of storage, they completely fail as a web codec. Web codecs are highly efficient at reducing file size with minimal perceptible quality loss, so they're what you need for the flux output.
TL;DR as Florian says: use h.264 encoded video.


---

