How to create vector graphics and then generate icons from them?

Question

For a Website I'm developing, I will need to create some graphics. I haven't yet locked in sizes so I didn't want to generate image files (PNG, GIF, JPG) directly in case I change my mind after I get further along with layout and UI to see what works and what doesn't.

This got me thinking: perhaps I should generate them as vector graphics (eg SVG) and then generate a set of image files to use on my site. I've never played around with vector graphics before though so what I'm after is:

• Some tools to create (preferably graphically) some vector graphics in some acceptable format;
• A programmatic way of creating vector graphics. For example, say I had a grid, I wouldn't necessarily want to draw that by hand. "Snap to Grid" and similar features would cover this case but not others; and
• Some way I can programmatically (eg as a build task) take a set of vector graphics and generate a set of images and preferably have some control (eg from the command line) over things like naming conventions, output format, size, etc. I don't want to go into a program and individually do "Save as..." on 100+ files to generate my icons.

What sort of tools and workflow would suit this situation?

Answer 1

There are different approaches since there are several different commercial vector graphics packages out there. The ones I use are Adobe Illustrator, Adobe Fireworks, Adobe Photoshop. Admittedly, Fireworks and Photoshop are bitmap graphics packages that have vector support.

I find Fireworks has an easier time dealing with vectors because they're "first class" objects, while in Photoshop they're actually a combination of a vector mask and a colour fill. The benefit of designing in a bitmap package using vectors is its much easier to preview the rasterized result by zooming in on the document so you can see the individual pixels. Illustrator has added a "pixel preview" mode to achieve this as well.

All three packages have scripting capabilities that allow you to automate repetative tasks such as multi-export, naming, etc. Photoshop, however, has Actions as well; a simplified macro system that lets you record and playback simple batch activities.

The way I tend to build my icon packs is by designing all icons inside a single document. I use "groups" (in Illustrator) or "folders" (Fireworks or Photoshop) to isolate each icon from one another, but lets me keep all the individual layers that make up the icon unflattened.

When I go to export, I run a script that iterates over the top level groups/folders, hiding all but one at a time, and exporting the results to bitmaps for all the major resolutions; 16x16, 24x24, 32x32, 48x48, 128x128 and 256x256.

Here is an excellent style guide that Microsoft has on how to design icons for Vista and XP. It focuses on using Photoshop to do most of the work.

Answer 2

Take a look at Cairo and its various bindings. In fact, there's even a recipe available for turning a SVG into Cairo commands.

Answer 3

If you are using .NET, then take a look at VG.Net. It includes a graphical editor integrated into Visual Studio. Frank Hileman's WebLog contains great info. on using VG.Net.

There is an open-source library hosted at sourceforge, librsvg, a library to render SVG graphics.

Answer 4

If you need a solid free tool for creating SVG and then dumping it to bitmap images when you have decided on the size you need, Inkscape would be a good option. The UI looks a bit less polished than Illustrator but it works fine on Windows, Mac and Linux. The limitations are that the colour management is much less powerful than Illustrator and the support for pressure-sensitive graphics tablets is less good if you aren't on a Linux box.