Creating Icons with JavaScript and SVG

I'm a programmer, not an artist.  Nevertheless on occasion I find myself thinking about icons.  Worse yet, sometimes I find myself thinking about designing new icons from scratch.  I've got neither the patience nor the skill to build an icon one pixel at a time.  Instead, I've been using JavaScript to dynamically build icons in SVG.  This may be the hard way to build a single icon; however, if you're doing a bunch of variations on a theme, then it can be a definite win.  That's basically the situation I'm in now -- I have a basic arrow design in a variety of orientations and with a couple of possible decorations.  I'm also generating icons in a range of sizes since I don't what the optimal size will be.

I'm not far enough along to really talk about the icon design itself.  I can, however, address one important but mundane issue with this technique, namely: How do you render SVG into a transparent PNG?  Now, if you've got a garden variety SVG file, you can simply load it into Inkscape and export it to PNG, no problem.  If, on the other hand, you've got an SVG file that contains embedded JavaScript, this won't work, since Inkscape won't run the JavaScript.

Instead I've been using a two step process where I use Firefox to run the JavaScript, and Inkscape to generate the PNG.

1. Load your SVG file (which, remember, must run some JavaScript) into Firefox.
2. Right-click and choose Select All from the context menu.
3. Right-click and choose View Selection Source from the context menu.
4. Type Ctrl-S/Cmd-S to save the SVG to a new file.
5. Load the new file into Inkscape.
6. In Inkscape, select File >> Export Bitmap

There are probably better ways of doing this, especially if you find yourself doing it repeatedly.  For example, Vlad suggests that an entirely JavaScript-based solution is possible using the <canvas> element and the drawWindow() method.  That, as they say, is left as an exercise to the reader.
6 responses
Yeah, I think easily scriptable image tools are a big win. Especially for animations, that's why I included some script support (though rudimentary) in APNGedit.

You might also look at the work over at, haven't looked to see if that's the same thing you're doing or not.

Couldn't you do a Firefox addon which would automatically convert a load of SVG images to PNG images of a certain size?
you could use the batik rasterizer
for this job.
it supports the onload eventhandler, so you can use javascript, and you can batch process complete directories.
@Ian M:

You could indeed do this with a Firefox addon.  That's just more effort than I can justify for this one little project.
@B. Müller

Batik looks pretty interesting, I'll have to check it out.
@Justin Dolske:

The svg2png extension at looks like it might already do what I need.  I'll have to check it out.