CHAPTER

EIGHT

WAYS OF DRAWING IN INKSCAPE

Inkscape offers several ways for creating vector images, which can, of course, be com-
bined:
• using the geometric shape tools
• using the path tools, much like a pencil on paper
• starting from a photo, a scanned image, or any raster graphic by using a tracing
engine
• using one of the many available features that let you create elements of a drawing
automatically
Often there are more than one ways to achieve the same result. Soon you will develop
your own habits and preferences for drawing with Inkscape. Only very rarely, there is
one way, and only one way, to accomplish something.
In this section, we’ll start out by exploring the easiest way to create a drawing in
Inkscape: the shape tools. We will also get to know some of the most commonly used
tools or features. If you have any prior experience with raster graphics (such as editing
photos), you will also begin to discover how creating and editing vector graphics is so
very different.

56
 CHAPTER

FORTYFIVE

MOVING AND ROTATING LETTERS

Aside from deforming a text with the Selector tool, Inkscape offers numerous options to
have fun with texts, adapting them to the design, while keeping them editable.
To use the following options you need to select the text, words, or letters you want to
move with the text tool, and then increase or decrease the value of the option in the
tool controls bar (the default value for all of them is 0). The change will immediately
be visible on the canvas.

45.1 Options for moving and rotating letters

45.1.1 Changing spacing between letters

The option allows you to change the distances between all letters in the selected text,
or the selected letters. This is useful if your font size is very small, because it improves
readability.

45.1.2 Changing spacing between words

Here you can change the distances between all words in your text, or the selected part
of the text.

45.1.3 Changing horizontal kerning

The option changes the distance between the two letters in the position of the cursor.
All letters that come after will move by the value you indicate in the input field.

160
 , Release 1.0

45.1.4 Changing vertical kerning

One of the options is for changing the position of a word or single letters in relation to
the base line. This means that the selected word or letter will be moved up or down,
and will no longer rest on the same line as its fellows.

45.1.5 Changing letter rotation

One last option allows you to also rotate single letters (or all selected letters).
If your design requires a more radical change of the shape of the text, it is possible to
make a text follow a path or to put it into an arbitrarily shaped frame.

Fig. 1: Options of the text tool that change the letters’ positions.

Fig. 2: Standard text.

Fig. 3: Text with a little kerning added.

45.1. Options for moving and rotating letters 161

 , Release 1.0

Fig. 4: Text with exaggerated kerning and rotation.

45.1. Options for moving and rotating letters 162

 CHAPTER

FORTYSIX

PUTTING TEXT ON A PATH

The adjustment of letters’ and words’ positions are merely the finishing touch. More
often, it is useful to start out by layouting the text as a whole in a drawing. Inkscape
offers two options for this, which are accessible via Text ! Put on Path and Text ! Flow
into Frame.

To make a text that follows a path’s curvature, you need to do this:

1. Create a path that will serve as the base line for the words and letters of the
text. The path can be created by using the shape tools and combining shapes with
the Boolean operations, or by drawing it directly with one of the tools that draw
paths.
2. Write the text directly on the canvas, after clicking on it with the mouse. It’s not
useful to use flowed text in a frame for this.
3. With the Selector tool, select the path and the text. Then make Inkscape do the
work by selecting Text ! Put on Path from the menu.
The result will show up on the canvas immediately. The text can still be edited at any
time: you can change its contents or style whenever you like. The path will remain
editable, too: you can shape its curves, add or delete nodes, move it, etc. and the text
will automatically adjust to its changed shape.
Very often, this path only serves to position the text. If you delete it, the text doesn’t
have anything to follow anymore, and reverts to its previous shape. If you don’t want
to see the path in your drawing, remove its fill and its stroke!

163
 , Release 1.0

Fig. 1: Create a text and a path by whichever method you prefer. . .

Fig. 2: . . . and put the text on the path using Text ! Put on Path.

164
 CHAPTER

FORTYSEVEN

FLOWING TEXT INTO A FRAME

Whether you’re creating a graphical poem (calligram), or whether your text needs a
specific shape to fit into your layout, Inkscape offers you a tool to assist with this type
of design.

To use it:
1. Write the text on the canvas (or copy-paste it).
2. Create the path or shape that the text is supposed to fill.
3. With the Selector tool, select the shape and the text, then use Text ! Flow into
Frame.
The path stays editable, the text will try to fill it as good as possible. The text, too, can
still be edited any time.
Very often, this is just the first step in arranging a text in a decorative fashion. Some
finishing touches may be needed to improve the positioning of certain words or letters,
by using the options offered by the Text tool.
To further tweak the text, there is one last, irreversible option: the transformation of
a text into a path. When you convert a text into a path, you will lose any possibility of
editing the text’s contents. The text will no longer be available as a text object, but it
now allows you to use all the available options for editing paths. For example, it will
become impossible to change the font, the font weight (light, bold, heavy,. . . ) or the
style (italic, regular, condensed,. . . ). Because of this, it is recommended to work on the
rough and general shape of a text first, and to later move on to the finer details:
• Finish everything that needs to be done with the Text tool, to benefit from the
tool’s property of keeping the text itself editable.
• Only convert the text to a path at the very end, to be able to tweak the small
details of the text.
If you would like to share the SVG file on the web, or to export it into a PDF file, that
you want to share with other people, convert all text objects to paths. Not all computers
have the same fonts installed, and the file may look very different to someone, if their
computer uses a fallback font to display the text.

165
 , Release 1.0

Fig. 1: The shape of the octopus will act as a container.

166
 , Release 1.0

Fig. 2: Text flowed into a frame that resembles an octopus.

167
 CHAPTER

SIXTYTHREE

EXTENSIONS

In this submenu, you will find functionality that does not target Inkscape’s main objec-
tive, but that has still been accepted into the Inkscape program by its developers.
They are grouped into some very distinct categories:
• Arrange: Affects the stacking order and grouping of objects.
• Color: Affects only the color of the selected objects.
• Document: Changes and informs about specific document properties.
• Export: Offers exporting functionalities and export preparation.
• Gcodetools: For generating GCode and communicating with cutting machines.
• Generate from Path and Modify Path: These extension scripts need a path to start
with, so they can create something from it.
• Images and Raster: Both of these categories affect raster images that are linked or
embedded in the SVG file.
• JessyInk: For creating animated presentation slides.
• Render: Generates new objects on the canvas.
• Stylesheet: Associates your SVG with the web design.
• Text: Offers additional functionalities for working with text.
• Typography: For quickly creating SVG fonts (independently from SVG Font Edi-
tor).
• Visualize Path: Offers multiple options to visualize different properties of a path.
• Web: Allows you to add some simple Javascript or do some layouting for the web.
We will now take a closer look at some of the extensions.

207
 , Release 1.0

63.1.9 Installing Extensions

It is easy to install extensions created by the community, or, for those who know how
to write in the Python programming language, to write their own. To learn more about
the inner workings of Inkscape extensions, visit the Inkscape website.
Many extensions can be found in the website’s gallery.
Note that these extensions are not curated, and that many extension developers choose
to publish their extension on other websites.
Generally, to install a new extension, you need to download and unpack its files. Copy
the files into the directory listed at Edit ! Preferences ! System: User extensions. After
a restart of Inkscape, the new extension will be available. Some extensions may come
with different installation instructions.
A couple of extensions may depend on other programs, that will need to be installed
on your computer for them to work correctly. Usually, the author of the extension will
provide instructions for this.

63.1. Some Very Useful Extensions in Detail 216

 CHAPTER

SIXTYFOUR

LIVE PATH EFFECTS

Even more effects are available in the Path Effects dialog, which you can access as Path
Effects from the bottom of the Path menu entry.
When you don’t have a path selected, the dialog will prompt you to choose one before
you can proceed. Click on the plus sign to see a list of available path effects. Select
one of them, then click on Add. Now you will be presented with a list of options for the
selected effect. In most cases, the path will already look different from before now.
You can adjust a path with a Live Path Effect by the options in its dialog, and also by
manipulating the path’s handles on the canvas.
Here’s a description of some of the Path Effects (LPEs). Don’t hesitate to discover the
functionality of the others on your own:
Power Stroke
Adds handles that allow you to change the width of the path, so it can be different
at different points of the path.
Sketch
Transforms your path into multiple lines that look like a sketch drawn with a
pencil.
Perspective / Envelope
Seriously helpful for drawing in perspective, thanks to the addition of 4 handles
for the corners.
Knot
Creates gaps in the bottom parts of a path, when they cross with another part of
the path.
Hatches
Transforms your shape into hatches that can be heavily customized.
Interpolate subpaths
The principle is the same as for the Interpolate extension, but the LPE approaches
the topic differently.
Pattern along Path
The principle is similar to the extension with the same name, but the pattern parts
will all be parts of the same path.

217
 , Release 1.0

Now we have taken a small tour around all the effects that add functionality to Inkscape
and allow you to automate specific tasks. This book is only an introduction to Inkscape.
Do not hesitate to further explore the software once you feel at ease with its basic
functionality.

218
 CHAPTER

SIXTYSIX

FINDING HELP FOR INKSCAPE

Inkscape has a helpful and active community. If you find yourself stuck, want to ask for
help or simply wish to connect with others, consider joining the chat or the forum.
If you want to read up on more advanced features of Inkscape, Inkscape: Guide to a
Vector Drawing Program by Tavmjong Bah (currently covering Inkscape 0.92) is the
standard textbook on it. There is also a series of tutorials on Inkscape’s homepage.
The keyboard and mouse reference provides an overview of tool and dialog shortcuts
and can help you speed up your workflow.
Taking apart other people’s work can be a good way to learn something. Maybe you
find inspiration while browsing Inkscape’s gallery.
Lastly, if you’re reading the PDF version of this guide, check out Read the Docs for
updates to it.

221
 , Release 1.0

Clone
A copy of another object that follows every change made to the original object.
An object can have multiple clones that can all be positioned in different places
in the drawing. Clones can be rotated and scaled independently of the original
object. If the original’s fill or stroke is not set (unset), the clone’s fill (or stroke)
can be edited. In all other cases, the clone’s fill and stroke will look just like the
original’s.
Disk Image (.dmg)
A Disk Image is a special type of file that is commonly used for distributing soft-
ware on macOS. Inkscape and other software applications on the Mac platform
are often downloaded as DMG files. When you open a DMG file, your computer
treats it as though it were a removable drive (hence “disk image”) that you had
plugged into your computer.
Executable File (.exe)
Contains an executable program for Windows and is the standard file extension
used by Windows programs. These are the files that make a program on your
computer run.
Flatpak
A packaging format for Linux programs. Flatpak requires the Flatpak program
for installation and running. It provides a sandbox to isolate the programs run
as Flatpak from other programs on a user’s system, to make running the program
packaged as Flatpak safer for the user.
Flow Text
Text that automatically breaks lines after a given width.
Glyph
A graphical element that represents a specific character (letter, number, punctua-
tion, . . . ) in a specific font.
Hex Color
A way to define a color by 3 numbers in the hexadecimal numeral system, com-
monly preceded by a hash (#) sign. Each number can take on values between 0
(no intensity) and 255 (maximum intensity), or 00 and ff, in hexadecimal. The
first number stands for red, the second for green, and the last for blue. Com-
bined, the colors represent one of the resulting 16,777,216 colors in the sRGB
color space (commonly used for computer screens).
HTML5
The main language that websites are written in, in the (current) 5th edition. Like
SVG, HTML is based on the XML markup structure, consisting of nested elements
that are delimited by angle brackets. HTML is also standardized by the W3C.
Join type
The way that vector path corners look. They can be rounded (round), cut off
(bevel) or pointed (miter).
Ligature
A combination of letters that has its own symbol in a font, mostly for cosmetic

224
 , Release 1.0

A personal repository for Ubuntu packages hosted on Launchpad (abbreviated

as ‘ppa’). Ubuntu’s package management tool ‘apt’ is able to load and install
.deb packages published in a ppa. The Inkscape developers maintain a ppa for
Inkscape.
Scalable Vector Graphics (SVG)
A file format for vector graphics that uses an open standard for saving the image
data in a human-readable plain text format. The structure of the file follows the
tree-like XML structure, similar to HTML (which is used for web pages). There are
various computer programs that can display SVG files (almost all web browsers,
for example), and many programs can save as SVG.
Snap
A packaging format for GNU/Linux programs, developed and promoted by Canon-
ical, the makers of Ubuntu. It uses the package manager Snappy, and is available
for multiple Linux distributions. Due to its strict default safety settings, the format
comes with a couple restrictions for interacting with other resources and devices
on a user’s computer.
Source Code
A set of text files that are written by software developers in one or more program-
ming languages. These files contain the instructions for the computer program. In
order for a computer to be able to execute the instructions, often the source code
must be translated into binary code by a compiler program (‘building’ a program).
Stroke
A contour that is drawn along a vector path or shape. Strokes can have different
widths, colors, patterns (dashes) and even gradients or patterns. Strokes are
optional, not every path / shape has one.
SVG Font
A font whose file format is based on the SVG file format. Inkscape can create SVG
fonts, but cannot use them for writing texts. Another program, like FontForge, is
required to convert the SVG font to a different font file format (e.g. otf, ttf).
XQuartz
An “X11” helper application used to run Inkscape on macOS, in Inkscape 0.92 and
earlier versions. Starting with version 1.0, Inkscape is a native Mac application
that no longer uses XQuartz. XQuartz is an open source [Link] project X Window
System .
Windows Installer Package Files (.msi)
An MSI file is a package that contains installation information for a particular
installer, such as files to be installed and the locations for installation. They can
be used for Windows updates as well as third-party software installers. The in-
stallation results are no different from using an executable file, but msi packages
sometimes do have additional options such as doing silent installations (no hu-
man action needed) or pre-configured installs.
Zip File (.zip)
Zip files are a way to compress large amounts of data into a smaller, more man-
ageable size. This allows for easy transportation and faster downloads of files.

226
 CHAPTER

SEVENTY

SAMPLE CHAPTER TITLE (H1)

This documentation uses ‘reStructured Text’ (reST) as its markup language. The below
document outlines most of the elements used in this guide.
If you have never used reST before, please familiarize yourself with its syntax (links
to cheatsheets below), or diligently copy-paste what you see here or in other parts of
the documentation. Note that spaces (and how many there are) are always relevant.
Without them, the automatical document creator does not understand what you mean,
and may give unexpected results. Backticks (this one: `, not apostrophes: ‘) are used
frequently in delimiting different elements.

70.1 Second level heading (h2)

It’s best to have this document opened as the finished web page, and as the source
text in parallel. That way you can see the syntax, and how it will look when the
documentation has been auto-created.
This is text in a paragraph. Separate paragraphs by an empty line. This is printed bold,
and this is in italics. This is for code and other small commandline commands that are
used inline.

70.1.1 Third level heading (h3)

Links to cheatsheets in a list:

• Structure Overview
• Paragraph Level Markup Overview
• Lists & Tables Overview

230
 , Release 1.0

Fourth level heading (h4)

A numbered list with useful links:

1. Inkscape Website
This is a paragraph in a list
2. An internal link to another book chapter uses its file name (without the ‘.rst’):
Link to 3D Boxes
3. If you want to link to another section in this manual (this can be in any file, or in
this one), you must put a so called label there (with underscore).
1. Then you write the link to that label (no underscore) here.
1. If you want to refer to a section that starts with a heading, you do not need to use
a label. You can just directly refer to it like this: Third level heading (h3).
2. A download link, e.g. for an example file that users can play with, will look like
this: Link to Glyph A file

Images can be used within a sentence or line, or as a larger image with a description.

An image within a sentence can be something like this icon . You decide on a name
for the image that you put into the text. Then, you specify its properties in a separate
block. It’s best to put these blocks at the bottom of the document (scroll down to the
end to see it). This type of image can be described as an ‘inline image’.

All images that show a part of the Inkscape interface should be formatted like this and
have the class ‘screenshot’, a caption and an alt attribute. Screenshots should be in the
png file format and the relevant area should be as large as possible:

Images that are used for mere decoration look like this. You can use png images. If you
want to use an SVG image, you must also provide a pdf with the same content and give
it the same name. Then, you would need to replace the file extension by an asterisk in
the page source.

70.1. Second level heading (h2) 231

 , Release 1.0

Fig. 1: This is a caption for the image. Text should wrap around the caption. You can
add a ‘target’ line above, if you want to link to something.

Fig. 2: You can also use a two-column container, and the figures . . .

70.1. Second level heading (h2) 232

 , Release 1.0

Fig. 3: . . . will fit on one or two columns, depending on the display width.

70.1. Second level heading (h2) 233

 , Release 1.0

Available classes:
• for alignment: left, center, right
• for size: small, medium, large

If you want to tell the user how to get somewhere using the menu, use the menu
selection markup, e.g. Edit ! Preferences ! Input/Output ! Autosave

For a label in the interface, use the gui label markup, e.g. Enable gradient editing.

If you want to tell the user which key to press, use the keyboard shortcut markup, e.g.
Ctrl + C.

For referencing a specific file on the user’s computer, use the markup for files, e.g.
~/.config/inkscape/[Link]

If you need to quote someone, or another document, do this by indenting by 4 spaces:

Inkscape is professional quality vector graphics software which runs on Win-
dows, Mac OS X and GNU/Linux. It is used by design professionals and
hobbyists worldwide, for creating a wide variety of graphics such as illus-
trations, icons, logos, diagrams, maps and web graphics. Inkscape uses the
W3C open standard SVG (Scalable Vector Graphics) as its native format,
and is free and open-source software.
—Inkscape Website

We can have different styles of admonition boxes:

70.1. Second level heading (h2) 234

 , Release 1.0

Attention: Watch out for this!

Caution: Be careful!

Warning: Drawing can be addictive.

Danger: Don’t break Inkscape!

Error: Now you have it.

Hint: The status line in Inkscape is very useful.

Important:
• Start your computer.
• Login.
• Start Inkscape.
• Select the rectangle tool.

Tip: Give the user a tip to have an easier time

with
things
in
Inkscape

Note: This is a note. You can add more contents below. Really.

And, by the way. . .

70.1. Second level heading (h2) 235

 , Release 1.0

You can make up your own admonitions titles, too. However, you cannot choose their
color.

Referring to terms in the glossary is a good way to help users have quick access to the
help they need, e.g. you can use Path: (if you want to keep the exact spelling) or path
(if you want to change the spelling, e.g. for plural, or to not use capitalization).

In case you ever want to put in a longer code block:

1 sudo apt-get install inkscape

2 flatpak install inkscape
3 snap install inkscape

Dashes and other typography:

Please follow English typography guidelines for dashes. See [Link]
wiki/Dash
En dash: –
Em dash: —
Ellipsis: . . .

The following won’t be visible in this location, but it will appear in any place where you
write its ‘anchor’. Use the asterisk instead of the file ending, if there is both an svg and
a pdf of the image file available. This should be the case for all icons of the Inkscape
interface, as there is a complete set of them in the icons directory:

70.1. Second level heading (h2) 236