Notes
Things that went wrong while building an SVG animator, and what turned out to be causing them. Written down because the answers were hard to find the first time.
- 1Why does my SVG lose its colours?
Because the colours were never on the shapes. Illustrator and CorelDRAW write them as CSS classes in a <style> block inside <defs>, and any tool that strips <defs> to remove scripts and external references deletes the palette along with it.
- 2Why do parts of my SVG fill in as solid blobs?
Because fill-rule was dropped. A hole in a shape is not a separate object, it is a second contour inside the same path, and fill-rule="evenodd" is what tells the renderer to leave it empty. Without it the default rule fills the hole in.
- 3How do I turn an SVG into an MP4?
Give it something to do over time, then record frames. An SVG holds no motion of its own, so a converter has to animate something, usually the drawing of each contour, and then encode the rendered frames into H.264.
- 4How do I make a logo draw itself?
Draw each contour as a stroke whose dash pattern is as long as the path, then animate the offset from full length to zero. The line appears to be drawn, and the fill fades in once the outline is closed.
- 5Can a browser encode 4K video?
Yes, with WebCodecs. A current Chrome, Edge or Safari exposes a hardware H.264 encoder to the page, and a tab can write a 4K MP4 without a server, as long as the codec profile covers the frame size.
loguitoc animates an SVG so it draws itself, and exports MP4 or PNG. Free, in the browser.
Open the editor