SVG Inventory Icons cookbook

Français English

Warning: English is not my native language. This documentation may be full of mistakes. Sorry for that. If you see some of them, do not hesitate to warn me at johannc@poufpoufproduction.fr.

The next chapter's purpose is to present the way for making some svg icons.

Make an icon with Inkscape

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

logoRun 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:

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

Advanced concepts

Icon design

Below, some design techniques that are mandatory to know.

Icon quality

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.

Batch processing

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.