26

I have an animated SVG and would like to turn it into a movie (a series of pictures would also do). The animation plays in webkit browsers (Safari, Chrome) and in Batik's squiggle). I tried capturing it with a screen capturer. but the movie ends up pretty jerky.

Is there a good tool for this?

Here's an example animation: 

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%">
    <rect id="BB" x="0" y="0" height="100%" width="100%" fill="white"/>
    <g id="firstone" stroke="black">
        <g id="g3" fill="none" stroke-width="2">
            <animateTransform attributeName="transform" type="rotate" dur="5s" from="360 100 100" to="0 100 100" repeatCount="indefinite"/>
            <g id="g2">
                <ellipse id="g1" cx="100" cy="100" rx="75" ry="75">
                </ellipse>
                <g id="sec">
                    <line x1="100" y1="100" x2="45" y2="45" style="stroke: rgb(99, 99, 99); stroke-width: 6;"/>
                </g>
            </g>
        </g>
        <g id="pit">
            <line x1="100" y1="175" x2="100" y2="200" style="stroke: red; stroke-width: 6;"/>
        </g>
    </g>
</svg>
Improve this question
3
  • 3
    There is a SVG to APNG converter (littlesvr.ca/apng/svg2png), probably some other tool can be used to convert from the APNG to a movie or separate the frames.
    – kartikmohta
    Sep 29, 2009 at 21:54
  • 1
    @kartikmohta: Add that as an answer.
    – Mechanical snail
    Jul 16, 2012 at 23:23
  • Not useful. The page has a paragraph saying: "The program is under development but can already be used to produce neat PNG animations. You can download the latest version from the homepage. You can get the version I reviewed from here. It's a Firefox extension. Note that the extension will ony work in Firefox 3 (you can get an alpha version here). " This contains three links. The first one demands a password. On the second, the browser tells me the plugin is corrupt. The third gives error 404.
    – Phil van Kleur
    Nov 21, 2020 at 8:11

5 Answers 5

Reset to default
5

Have you tried using squiggle to export a series of frames? I found squiggle a pain to get your line just where I wanted it to be to properly set up a series of frames. However, once you have that, you can use imagemagick - apparently my favorite answer this week ;-) to transform it however you like.

Assuming each you save the frames off as frame01.svg, frame02.svg, etc. Then this:

convert -delay 5 -loop 0 frame??.svg animated.gif

will make a single animate gif from your frames that loops forever, 5 ms between frames.

convert will convert svg to , but imagemagick doesn't process the animateTransform tag, so any output is static.

Update: I found squiggle so painful to work with (at least trying to stop the animation at just the right spot to grab an image, I was embarrassed to have even suggested it!

Here's a bash script using imagemagick to convert your svg into an animated gif: Before running this script I split your example svg into 2 parts: bg.svg contains the elipse and the 'pit' element and hand.svg contains just the 'sec' element

`#!/bin/bash`

rm *.png
rm anim.gif

convert bg.svg -crop 200x200+0+0 +repage bg.png
convert hand.svg -crop 200x200+0+0 +repage -transparent white hand.png

for ((i=1; i<=359; i=i+3))
do
  convert hand.png -gravity center -rotate $i tmp.png
  n=`printf "%03d" $i`
  composite -gravity center tmp.png bg.png hand${n}.png
  rm tmp.png
done

convert -delay 1  -loop 0 hand*.png anim.gif

~
I'm sure someone more clever than me could figure out how to merge the convert and combine all in one step without also rotating the bg.png, but this is what you get for free ;-)

Also, wanted to keep this simple, just in case it needs to be reimplemented as a windows bat file.

The i=i+5 is a trade-off between how smooth the animation looks vs. file size.

Note: Even with -delay 1 (1 ms between frames), firefox would not move the hand in a complete circle in 5 seconds. It was closer to 10 secs.

And here's what the script produced

Improve this answer
0
4

I found a way to create the series of images with the help of canvg. To run the following page, you have to use a modified script of canvg.js in that the draw function is accessable.

Changes in script canvg.js (v1.0):

In line 2321 change from:

var draw = function() {

to:

svg.draw = function() {

In line 2361 and 2390 change from:

draw();

to:

svg.draw();

My generation script:

<html>
<head>
<script type="text/javascript" src="rgbcolor.js"></script> 
<script type="text/javascript" src="canvg.js"></script> 
<script type="text/javascript">

loadSVG = function() {
  canvg('canvas', '<animated SVG>', { ignoreMouse: true, ignoreAnimation: true });
}

function RenderNext(delta) {
    var c = document.getElementById("canvas");
    var svg = c.svg;

    for (var i=0; i<svg.Animations.length; i++) {
        svg.Animations[i].update(delta);
    }
    svg.draw();
}

function CreateImage(imgStr) {
    var oImg=document.createElement("img");
    oImg.setAttribute('src', imgStr);
    return oImg;
}

function start() {
    var c = document.getElementById("canvas");
    var result = document.getElementById("resultDiv");
    var maxDur = 5; // seconds
    var framerate = 5; // imgages per second

    for (var i = 0; i < framerate * maxDur; i++) {
        RenderNext(1000 / framerate);

        var oImg = CreateImage(c.toDataURL('image/png'));
        result.appendChild(oImg);
    }
}

</script>
</head>
<body onload="loadSVG()">

<canvas id="canvas" width="30px" height="30px"></canvas> 

<p>
<input type="button" id="start" value="Start" onclick="start()" /> 
</p>

<div id="resultDiv">
</div>

</body>
</html>
Improve this answer
3

If you're using FireFox you might give SVG Render Plug in a try: http://adasek.cz/svgrender/

Improve this answer
1
  • This is a good suggestion. But I can't figure out how to get the capture to start and end when the actual animation starts and ends.
    – posfan12
    Jan 23, 2016 at 2:05
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.

Improve this answer
1

to render animated svg to animated gif

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.