Category: Development

In part one of this article I outlined a method for exporting an animated SVG from a web-page it had a few problems in this final part I’ll detail how I solved those problems.

Who you gonna call…

Realising that a better method would be to observe the SVG itself as it changed in the browser, the animation library uses requestAnimationFrame to achieve silky smooth results so a small native query selector in that function outputted to console seemed to work, although the results almost killed my machine. It was becoming clear that any desktop browser was going to struggle with this level of processing and that something else was required. Enter PhantomJS, a headless WebKit powered environment that’s been around for a few years, in their own words:

PhantomJS is a headless WebKit scriptable with a JavaScript API. It has fast and native support for various web standards: DOM handling, CSS selector, JSON, Canvas, and SVG.

Running the web page in this required creating a .js file with some instruction for PhantomJS:

var page = require('webpage').create();
page.open('https://dl.dropboxusercontent.com/u/93658891/rendersvg/index.html', function(status) {
page.onConsoleMessage = function(msg, lineNum, sourceId) {
console.log(msg);
phantom.exit();
};
});

then running PhantomJS from the command line:

phantomjs runme.js

This echoes the output of console.log into the terminal window which I then copy and paste, split as before, with a bit more work this could actually be outputting the SVG frames directly as the PhantomJS API has file system functions thereby removing the need for AWK.

Once again I ran through a bunch of frames and it seemed to be in order at least but this time I had several ranges of frames where nothing was animated, exporting on the requestAnimationFrame function had given me too many frames so I ran them through Gemini – which can find duplicate files, but the numbering was now all out of order so After Effects would fail when a frame was missing. No to worry as the latest versions of OSX have easy batch easy renaming built right into finder, so highlight all, set parameters hit go done – we were back to nice sequentially numbered (8,261 to be exact), non-duplicate SVG files. Only one problem After Effects does not support SVG import.

The best option was to convert to another vector format that AE will import as a range of animation stills. EPS whilst more widely supported lost the frame size information during conversion (each frame would be a different size so lining them up one after another would be impossible) so that was quickly ruled out. Conversion to Adobe Illustrator format was the best option.

Adobe Illustrator has a scripting API that is accessible through a number of languages and this seemed like the obvious place to start. There’s several examples that ship with Illustrator and many examples on-line after a bit of hunting I also noticed that Illustrator also has actions like Adobe Photoshop, this allows to record a series of steps from within Illustrator which can then be replayed on single of multiple files. A short action with a save as Adobe Illustrator & Close file command and I was good to go. The initial test of this technique caused Illustrator to run out of memory at some point around the 4000 file mark, this happened several other times so I just restarted the process by moving the processed frames out of the source folder – in all it probably took about 5 hours.

The frames were imported into AE in seconds which allows me much greater creative possibilities with access to high quality scalability, proper alpha channel, better re-timing controls.

Harder Better Faster Stronger

As you will no doubt have noticed there’s several places where this technique could be improved to increase speed, reduced number of steps and be more automated and not rely on expensive proprietary software.

My list of things to look into:

• Other animation Libraries
• More in depth investigation of how each works
• Automated optimisation of the SVG before animation
• Prevent unnecessary duplication of frames during export
• PhantomJS to export the frames directly to the filesystem
• Investigate to EPS conversion to retain frame size as EPS is more widely supported
• Conversion to AI via other automated methods – Adobe Scripting, Inkscape console

I may revisit the idea to improve the work-flow, if anyone has thoughts or improvements please share. I’d love to hear your ideas.

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.

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

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 '/<svg/{x=sprintf("F%06d",++i) ".svg";}{print > 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.