Extracting Layers from Inkscape (Pulling Teeth)

Inkscape is probably the greatest thing since baloney on bread, and it’s free. That’s a real deal!

Basically, it is a powerful and feature-filled vector graphics editor, and I have an easier time using it than I do with Photoshop. That’s because I am an art noob. But armed with Dmitry Kirsanov’s The Book of Inkscape and things like these awesome tutorials from Chris Hildenbrand, you can get some really nice results.

One thing that I use Inkscape for is animating sprites. Paint.net is very nice for this as well (just tabbing between frames is awesome), but I had to cobble together a batch file and the obscure pdn2png to get a good workflow for saving frames into a usable form. I basically wanted to be able to edit the frames of a sprite and hit a button to export everything out to PNG files. There are other programs that are specific for animation that make the process of animating much easier, but they generally cost money or are not very nice to edit art with

Inkscape has some exporting to PNG capabilities from the command line, but you need to know the SVG ID of the object you want to export. In my case each frame is a group within the drawing. Inkscape lets you name each group (groups are SVG objects as well), but this is an extension to the SVG specification. The actual ID that you need is obscured at the Inkscape level. So it is possible to export the group from the UI using the Inkscape label, but you must know the SVG ID to do this from the command line.

Needless to say I was bummed!

Even worse, I want to have each frame of animation have discrete parts. So if I have a character, I want each frame to have a sub-layer of the arms, the legs, the eyes, etc. That way I can grab that sub-frame PNG and animate it separately, allowing me to articulate different frame parts as an aggregate sprite.

So, I dropped using scripting and went full on code! I messed about with the SVG file format and basically just brute force wrote a parser in Java that will traverse the XML for the SVG format and extract layer groups by using the Inkscape label. The Java matches the Inkscape label to the SVG ID, and then calls the Inkscape program with command line arguments to make the PNG. This allows me to have an SVG drawing, make several layers and sub-layers of animation for a sprite, and run a batch file that calls my extractor to organize the frames in nice ways.

You can get ExtractInkscapeLayers for Windows here. I will get around to posting the source at some point if anyone cares!

Leave a Reply