12

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?

Community
  • 1
  • 1
anonymous1fsdfds
  • 281
  • 1
  • 3
  • 13
  • Does this answer your question? [How to export SVG animated with javascript to movie format?](https://stackoverflow.com/questions/63652905/how-to-export-svg-animated-with-javascript-to-movie-format) – Marcel Zúbrik Mar 14 '21 at 07:08

4 Answers4

8

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.

Christian Hujer
  • 17,035
  • 5
  • 40
  • 47
7

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.

TarranJones
  • 4,084
  • 2
  • 38
  • 55
  • Can you provide a sample code pen of how you were able to record svg content ? here is what i am trying using recordRTC http://codepen.io/rudi8292/pen/yJEAbd – Rudresh Ajgaonkar Jul 28 '16 at 14:47
0

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

user4445827
  • 19
  • 1
-2

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.

Community
  • 1
  • 1
Mechanical snail
  • 29,755
  • 14
  • 88
  • 113