Inkscape: animated SVG to video?

i created an animated presentation with the Sozi plugin for Inkscape. It looks great, however, not all browsers support SVG animations (Chrome for instance does not like the Inkscape/Sozi SVGs at all). I would like to convert the presentation to a video. One option would be to do a screen capture, but I am hoping for something better.

Looking around, I also came across this answer - but creating frame by frame SVGs is not really feasible, as I would like to keep the zooming/sliding animations.

Any ideas of what tool to use?

Answers


1. Convert SVG to Canvas

SVG can be converted onto a canvas element using this tool

2. Record Canvas Animation

A video file can be created from a canvas animation that using MediaStreamRecorder(depending on browser support) or with Whammy.js. I have used whammy before, It worked like a charm.



You may try synfig studio, I've been using it for several personal animation projects. I'ts really nice, with good tutos / documentation / community.

http://www.synfig.org/cms/

quote : "Synfig Studio is a free and open-source 2D animation software, designed as powerful industrial-strength solution for creating film-quality animation using a vector and bitmap artwork. It eliminates the need to create animation frame-by frame, allowing you to produce 2D animation of a higher quality with fewer people and resources. Synfig Studio is available for Windows, Linux and MacOS X."

hope this helps

Philippe


What you ask is impossible, because SVG animation is interpolated, whereas the major video formats are all frame-based. If you want to render to video, you have to separate out discrete frames.

If you expect your users will view the video at the same speed (as opposed to slowing it down), it is good enough to pick a frame-rate high enough to display the animation smoothly (say 30 fps). The disadvantage is of course increased file size.

Convert animated SVG to movie provides several options for splitting and converting.


Incidentally, Chrome does support SVG animation. Have you tried it in a recent version? Also, try exporting your file from Inkscape as a "plain SVG" (instead of the default "Inkscape SVG"), which strips Inkscape-specific elements that could potentially confuse browsers.


Need Your Help

<SELECT multiple> - how to allow only one item selected?

html html-select

I have a &lt;SELECT multiple&gt; field with multiple options and I want to allow it to have only one option selected at the same time but user can hold CTRL key and select more items at once.

System.IndexOutOfRangeException: Index was out of bounds

c#

I have a program in C# that works fine when I run it in Visual Studio.