Using the Plugin

Was watching this video describing how to "slice" web page designs two days ago and it inspired me. After a tiny bit of digging I found that one can easily script inkscape using python.

Here's the process I've used for slicing web layout with Inkscape. Create your webpage layout (set page units to "px", width/height appropriately and snap to 1 pixel intervals. This should allow pixel perfect alignment). Then create a new layer, naming it slices. Draw rectangles over the areas you want to slice (set x,y,width,height to whole pixel values). Name these rectangles using the Object Properties found in the right click contextual menu (the saved images name will be based on that value, so name them something like "header" instead of the default/non-useful "rect4312"). This is all explained in the video above.

What the plugin then does is iterate over all of the rectangle definitions found in the slice layer and set the opacity of the slice rectangle to 0. (That allows you to make slightly transparent slices, which are easier to deal with than invisible ones) It then creates pngs for every slice. After completing the slicing, it then sets all the slice rectangles to red at 25% opacity. To continue working on your design without having to deal with the slices being selected, just "lock" the slice layer and your clicks should fall through. You can also click the "eye" on the slice layer to not view it.

Oh yeah, I guess one should install the plugin. On gentoo I need to put the .py and .inx file into /usr/share/inkscape/extensions, then after a restart of inkscape the plugin will appear in Effects->Export->Export Layer Slices.

Creating an inkscape plugin in python

Scripting inkscape was pretty straightforward. I did it by looking at the other plugins and not reading (or knowing about) the script wiki entry I listed above. The basic idea is to create a class that subclasses inkex.Effect, and implement an "effect" method. The .inx file is a simple xml file to designate where in the gui your plugin appears as well as provide for input required by your plugin.

update - Code is now up on github