Introducing Vector Graphics and Inkscape

Inkscape's vector graphics open a whole new world for creating art.
Working with Text and Fonts

The big button with the capital A lets you create text objects. So far, this is nothing special. What is great though is the possibility to make text follow any line (Figure 7). Select both the text and the line while pressing the Shift key, then select Text→Put on Path in the top menu.

Figure 7. Make the text contour conform to an existing line.

As far as fonts are concerned, Inkscape can use any font available on your computer. Therefore, if you aren't careful, your SVG file will not be portable. The real solution would be to use only fonts that are available on all platforms for all the files you need to distribute. When this isn't possible, such as when the text is a company slogan that can be only in the corporate-approved font, you can convert it to a vectorial path (Path→Object to Path). Note that this increases the file size and above all is a one-way process. The obvious workaround is always to keep a master copy with the actual text and distribute only the one with the path.

Multilanguage Graphics

Sentences take different amounts of space in a graphic depending on the language in which they are written. We already mentioned that a big advantage of SVG is that it can be generated or processed automatically. Combining these two facts, it is easy to see that you can generate and maintain, with minimum effort, many versions of the same banner, diagram or any other graphic that includes text, each in a different language. The only thing to keep in mind is always to leave enough space around that text to make sure that it fits no matter what the language is. After that, follow the procedure described on the “Creating International Graphics” Web page (see Resources).

It's Just XML after All

The SVG standard is another application of eXtensible Markup Language (XML). If you view a file created with Inkscape at the command line or in any text editor, instead of incomprehensible binary sequences, you'll find something like this:

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape ( -->

and lots of other very verbose, but plain ASCII text—terribly ugly but still editable by hand in an emergency or processable by a script. What if you have lots of logos and clip-art files, all with the names and official color of your company, and then either the name or the color changes? If all the files are in SVG, you simply can replace the right strings with awk, sed, Perl or any other scripting language. To do the same thing on one single file inside Inkscape, click on the <> bracket buttons or press Shift-Ctrl-X to launch the Inkscape XML editor. Figure 8 shows how the XML tree of the “Linux is a Shining Star” business card looks in this editor. Path # 3456 is the oval/star shape combo from Figure 7. With this editor, it is possible to change almost anything in the current file, including SVG features for which there are still no graphical tools. Another reason to use the editor is that every change you make in it immediately applies to the actual graphic in the main Inkscape window. Speaking of structured documents, selecting File→Document Metadata in Inkscape opens a pane where you can set the Dublin core entities or the license of the current file.

Figure 8. The XML Representation of a Graphic

Never Forget the Command Line

Although Inkscape obviously is intended primarily as a GUI application, it can be used for doing SVG processing on the command line as well. Here are some examples straight from the man page:

  • inkscape filename.svg -p '| lpr' — Print an SVG file.

  • inkscape filename.svg --export-png=filename.png — Export an SVG file into PNG.

  • inkscape filename.svg --export-eps=filename.eps --export-text-to-path — Convert an SVG document to EPS, converting all texts to paths.

  • inkscape --query-id=zoom_in -X /usr/share/inkscape/icons/icons.svg — Find the x position of the zoom-in icon in the default icon file on a Linux system.

  • inkscape filename.svg --query-width --query-id text1555 — Query the width of the object with id=``text1555''.


Articles about Digital Rights and more at CV, talks and bio at