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

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.