SVG Inventory Icons cookbook

Get a reference picture. The image size has to be big enough to be useful and also, its license must allow this kind of treatment. Mostly use "Public domain" or "GPL" licenses, even if the "fair use" may allow other licenses.

Run the scalable vector graphic editors Inkscape. This open source application can be downloaded from its official web site. Once the Inkscape main window is opened, create a new document from the file menu and use the icon_48x48 model. Icons are scalable, so the document size is not really mattering. However, using this model allows everyone to work with the same values (such as the size of the stroke, for example).

Then, the processing of the icon is as follows:

• Open the layers panel (Shift+Ctrl+L)
• Rename the existing layer and create 2 other layer in order to get downward: Stroke, Fill and Reference.
• Select the Reference layer and import the picture from the File/Import menu.
• Scale the image to the good size and lock the Reference layer for avoiding mistakes later.

• In the Fill layer, outline the object thanks to the Beziers's curve tool. This initial shape is the outline of the object: it will be copied often and used in order to avoid overflow (see advanced concepts section).
• With the color picker, get the main color of the object in the reference picture.
• Then open the panel Fill and Stroke and remove the new shape stroke. One of the golden rules in SVG design is to always separate the fill from its stroke.
• Copy the shape, select the Stroke layer, and paste the shape in the same place.
• Delete the filling of the new copied shape and add a stroke with a 0.5 pixel size. Change the id of this stroke to "stroke" by using the xml browser included in the software. This identification will be useful later for batch processing for example.

Complete the icon by adding areas with the same color. Play with the transparency a lot.

Below, some design techniques that are mandatory to know.

• Always separate the fill from its stroke.
• Use the shapes intersection operation for avoiding some outline overflows.
• Turn on/off the Fill layer as often as possible in order to compare with the reference image.

Once the icon is made, it is interesting to look more closely at its own code quality. A number of points makes possible to improve and optimize the svg description of the icon.

• Before the backup, select the option File/Vacuum Defs to purge unnecessary definitions.
• Make sure to save the icon in plain SVG format in order to drop the Inkscape internal tags.
• Purge the superfluous information from the svg file. This can be done by hand with a text editor. This information may include unnecessary namespaces (inkscape, sopdipodi), or unnecessary tags given their context (text and font related tags in a path for example), etc.
• Limit the precision of decimal digits. In our case, with a 48x48 size, 2 decimal places seem to be a perfectly reasonable choice.
• Ensure that no operation transform remains.
• Change the header for a version 1.0 which is required for Firefox since it version 4.

Due to its descriptive format, SVG is easy to manipulate with the command line (under GNU-Linux, among others). Here are some examples of what can be done. The list is not exhaustive.

• Conversion: Inkscape can be used from the command line to export the svg icons to bitmap format (png here). -h and-w are used to specify the resolution of the output.

  inkscape leaf01.svg -e leaf01.png -d 72 -h 128 -w 128

• Modification: as a text and readable langage, SVG can be handled by classic text editors such as sed. Thanks to the regular expressions, a lot of things can be done. The example below shows a nice way to reduce the precision of numerical values to 2 decimal places.

  sed -e "s/\([.][0-9][0-9]\)[0-9]*/\1/g" leaf01.svg > leaf01_r.svg

• Batch processing: the shell commands may be used for dealing with the svg icons.