how to export an animated SVG from a webpage to Adobe After Effects – Part 1

Why?

Animating SVG in a web browser with code (usually javascript or CSS) can be done very quickly. There is a wealth of code that involve little more than linking the script & specifying a couple of variables, so experimentation is quick & easy.

https://dl.dropboxusercontent.com/u/93658891/rendersvg/index.html

Video saved the SVG

This first export was just to see if the animation would fit with the rest of the video and was achieved by fullscreening the browser window (Google Chrome) with little else running in the background, then QuickTime Player was used to capture a video of the animation.  Next I imported the footage into Adobe Premiere, selected a suitable track from the Free Music Archive, mixed it together and as a proof of concept it worked as expected.

Enter the devtools

The library I’m using to do the animated is vivus.js. A little digging into the  source revealed a function for including older version of Internet Explorer which forces the refresh of the SVG on each frame.  Idea! Now if only I could log each of those frames. A short console.log() in the right place and I appeared to be getting the correct information out.

Screenshot 2015-02-02 14.50.48

A quick copy and paste from the console to a text file, save as SVG and I appeared to be getting what I expected.

Screenshot 2015-02-02 14.52.58

Next step was getting all the frames out of browser, copy and paste was working ok if a little slow, the resultant text file was about 450MB.  To extract each SVG/Frame I used the UNIX tool AWK.  AWK is a powerful text processing tool that can spit a text file into multiples based on a set of rules, the following snippet splits each line that starts with <svg into a new file adding a name & incremental number (padded up to 6 zeroes so the frames can be sorted)

awk '/&lt;svg/{x=sprintf("F%06d",++i) ".svg";}{print &gt; x }' input.txt

tip: optimise your SVG and try to make it a single line – it’ll make it easier for automated processing.

Now I had a folder of 12,000 or so SVG’s.  A small sampling of these revealed a lot of duplicate or wrong frames – I then discovered that the IE method I’d hooked into was not giving me what I’d expected.  Back to the drawing board…

In the next part I’ll discuss what my solution was and suggestions for improvements on that.