AIGA symbols library is available for all to use, free of charge.

How to create a symbol library in inkscape 0.91

(And make your front-end developer ❤ you)

With the latest awesome inkscape 0.91 release there is a new and very useful feature: symbols. A symbol, from a user perspective, it’s a reusable SVG item that can be dragged from the symbols dialog to our document.

Symbol libraries are sets of symbols located in one SVG document. For the more technical audience, inkscape search for any valid SVG file with symbols (<symbol> element) in your system configuration directory (typically share/inkscape)

Inkscape 0.91 includes five example libraries: logic symbols, AIGA/DOT transportation symbols, map symbols, flow chart shapes and word balloons made by Martin Owens and Tavmjong Bah.

Well, enough words, let’s get our hands dirty!

There are other ways to create a symbol library but the best, more reusable and maintainable way is to pay attention yourself on creating a clean SVG library file. Most of the SVG files out there are just a bunch of trash so be careful and take control of your own.

First: Basic SVG Symbol

First things first, we need a nice and clean SVG file. We will dissectionate this later, but please just take a fast sight at this code. It’s fair easy.

A blank inkscape library boilerplate

Ok, let’s understand it!

  • xmlns: In XML documents attributes and elements belong to namespaces. This is to prevent the elements from different technologies from clashing
  • Width, height: This represents the width and height of the rectangular region of the reference element.
  • Viewbox: The viewBox attribute allows to specify that a given set of graphics stretch to fit a particular container element.
  • Version: Indicates the SVG language version to which this document fragment conforms.
  • Metadata: Standard metadata schema according to SVG W3C standards. Edit with your own creator data as in the example above.

Second: Creating our future symbol

Creating the symbol on inkscape
<path id=”path19834" d=”m 682.69479,4.1832396 -26.44898,11.7551004 0,17.63259 c 0,16.3249 11.2702,31.5478 26.44898,35.2653 15.17878,-3.7175 26.44898,-18.9404 26.44898,-35.2653 l 0,-17.63259 -26.44898,-11.7551004 z m -5.87755,47.0203904 -11.7551,-11.7551 4.15836,-4.1584 7.59674,7.5967 19.35184,-19.3518 4.15836,4.1584 -23.5102,23.5102 z” style=”stroke:none” />

Third: Add it to your library

  1. In our first step SVG file, after de <metadata> tag we should add a <defs> tag where we will define every symbol in our library.
  2. Inside the <defs> we should create a <symbol> with its id and a <title> with its title.
  3. Paste your recently created path inside the symbol after your title.
(... continues from the example above...)
</metadata>
<defs>
<symbol id=”kanban”>
<title>kanban</title>
<path id=”path19834" d=”m 682.69479,4.1832396 -26.44898,11.7551004 0,17.63259 c 0,16.3249 11.2702,31.5478 26.44898,35.2653 15.17878,-3.7175 26.44898,-18.9404 26.44898,-35.2653 l 0,-17.63259 -26.44898,-11.7551004 z m -5.87755,47.0203904 -11.7551,-11.7551 4.15836,-4.1584 7.59674,7.5967 19.35184,-19.3518 4.15836,4.1584 -23.5102,23.5102 z” style=”stroke:none” />
</symbol>
</defs>
</svg>

It’s already done!

Hey, you already created the first item of your library!
Save it in your favourite OS required path (typically share/inkscape) and restart inkscape.
Press Ctrl + Y to open the symbols dialog and select your symbol library.

If you have any problem, here you can see an example of my own symbol library with one item.

Well, it was not the easiest way, but once you made the first symbol, it will take minutes to have your inkscape plenty of reusable elements.

Please, share your library with the community!

One clap, two clap, three clap, forty?

By clapping more or less, you can signal to us which stories really stand out.