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.
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.