Recording and saving an SVG animation as an animated GIF

Question

Is there a library or tool for recording and saving an SVG animation as an animated GIF?

The SVG geometries are animated with JavaScript and D3.js, and their colors and opacities are animated with CSS 3.

Answer 1

I found that simply using a screen capture program with gif recording feature satisfies all my needs, and it is reliable and clean. There are several such screen capture programs. I found LICEcap solid.

Here is (almost verbatim) my procedure from question mentioned above:

The solution uses a tool called LICEcap, a screen capture utility for Win and Mac. Steps are following:

1. Download LICEcap here and install it. Now, if you start this program, it will have a rather unusual shape, just a thin frame, and everything inside the frame will be transparent:

2. Go to the window with your d3.js animation and prepare everything so that you could start animation at some point. Lets say we want to record this example from d3js.org:

3. Now start LICEcap and position it over the area you want to have in your animated gif:

4. Make sure that you enter at least 20 fps in the bottom left edit box, otherwise the recording will be low quality. Press record. A dialog will first appear, and you choose here whether you want your gif to be in an infinite loop, or just repeated once, or any number of times. Also an interesting option is to add some visual clues for mouse clicks. Choose also filename, and press Save.

5. Now you do whatever you have to do to trigger animations. I pressed several times buttons Grouped and Stacked. After I decided its enough, I pressed Stop. Resulting file is:

That's it!