Category: icons

Jimmac’s post got me thinking. His script did the job for a single icon. Why not improve upon it to allow multiple icons sharing a single SVG file? Immediately decided to give it a go and after a few iterations the result works as follows:

1. You start by creating a template SVG.
2. For each icon (not size) you create a layer and set its name to context/icon-name. You can use a different syntax but it has to contain at least one slash. The rest of the layers are treated as drawing aids.
3. For each layer you create a sublayer and give it a name starting with plate. Inkscape requires you to have distinct layer labels so a simple plate won’t do for multiple icons but you are free to use names such as plate for foo.
4. The plate consists of a set of rectangles. Each rectangle will result in a separate PNG and the size is taken verbatim from the rectangles (so make sure you don’t end up with ten decimal places in width or height).
5. The plate also needs two text objects: one with label set to context and one with label set to icon-name. The text you put there is used to create the directory structure.
6. Save your template to a directory called svg. Make sure you hide the plate layers before saving.
7. Download the Split Icons script.
8. Run the script. If you pass a path (or several paths), it will only process the files from the command line. If you don’t pass anything, it will process the whole svg directory.
9. Draw art!

Here’s a template example.

PS: b.g.o upload sucks. It will only accept .gz files and then will strip the dot from the original extension.

Update: updated the script to handle the new format invented by jimmac. See the example above for details.