Inkscape: animated SVG to video?

Question

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 Ink

Answer 1

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.

---

Answer 2

There is a node package called timecut which uses Chromium to record an SVG into an MP4 video file. https://github.com/tungs/timecut

Installation

$ cd project
$ npm install timecut

Usage

$ cd project
$ ./node_modules/timecut/cli.js Animation.svg

This creates a file named video.mp4.

timecut has quite a number of options, like frame rate, pixel format, etc.

Answer 3

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.

Answer 4

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