Intro to inkscape

Intro to Inkscape
Created for DUSPViz by Luke Mich | Spring 2017

Intro to Inkscape | DUSPViz | Spring 2017 | Page 2
What is Inkscape?
Inkscape is a vector-based graphic program that is very similar to Adobe Illustrator. Where it differs from Illustrator, however, is the price
tag. Inkscape is freeware, meaning that you can avoid Adobe’s pricey subscription fees for a program that can do (almost) the exact same
thing. Because it is freeware, Inkscape does not use a proprietary filetype (like Illustrator’s “.ai” files). Instead, Inkscape works directly in
SVG (Scalable Vector Graphic) format. This is the standard vector filetype for the web.

Download and Install
If you’re using your own laptop, open a web browser and navigate to https://inkscape.org/en/download/ to download the appropriate
Inkscape installer for your OS. Then click through the install wizard to install. If you’re on a CRON computers, Inkscape is already installed.

Getting Started
Let’s open Inkscape and take a look at the interface. It’s relatively simlar to Illustrator. There are Tools (selection, drawing, modification, etc)
along the left panel, Tool Controls that modify the selected tool along the top of the screen, Snap Controls that affect object interactions and
project-wide Commands along the right, a general application Menu along the top, a Canvas area and a Page. The one major difference is
the Color Palette along the bottom that is always on, making it easy to select color fills/strokes while working.
Tools
Menu
Tool Controls Commands
Snap Controls
Page
~ Canvas ~Keyboard Shortcuts
Zoom In = +
Zoom Out = -
Pan = Ctrl + Arrow Keys
Color Palette

Setting up the Page
Go to File > Document Properties... to change the page size. Select US Letter, change the Orientation to Landscape and Change the
Units to inches (if they don’t change automatically). Also, change the Display Units to inches.
in

Creating a Web-Safe Data Visualization
Inkscape has many great basic tutorials built-in (go to Help > Tutorials to open fully editable SVG files with various instructions).
Therefore, we won’t be using this tutorial for the basics. Instead, we’ll show you how to edit some simple map/chart output from QGIS and
Excel respectively to create a web-safe vector graphic without the use of expensive Adobe software.
Greater Boston Housing Units
MAPC Community Types
Inner Core
Regional Urban Centers
Maturing Suburbs
Developing Suburbs
16 11
Units by Structure Size
Number of Ci�es/Towns
Popula�on (2010)
Total Units Permi�ed (2000-2015)
44 30
325,123900,359545,0201,391,210
43,814 15,670 38,997 15,811
Inne=r Core Regional Urban Centers
Maturing Suburbs Developing Suburbs
1 Unit
2-4 Unit
5 Unit
1 Unit
2-4 Unit
5 Unit
5 Unit
5 Unit
2-4 Unit
2-4 Unit
1 Unit
1 Unit

Importing a File
Navigate to File > Import... and select the towns.svg file from the tutorial materials folder. This is an SVG map exported from QGIS
(Composer > Export as SVG... from the Print Composer in QGIS). The map illustrates the community types of the cities and towns in
the Greater Boston region as definied by MAPC (purple = Inner Core; blue = Regional Urban Centers; green = Maturing Suburbs; red =
Developing Suburbs). Click and drag to move the file into place.

Resizing an Object
When an object is selected, it automatically has scaling grips on each corner and each side. Click and drag a corner to scale along both
axes - hold Ctrl to constrain current proportions.

Ungrouping
Right now, our map has several objects (the town polygons and some invisible frames) that are grouped together. To ungroup, make sure
the map is selected and type Ctrl+U (or right-click and select Ungroup). You’ll need to do this twice, as there are some nested groups.

Selecting Objects
To select objects, simply click on them with the selection tool (black arrow) activated. To add objects to the selection, hold Shift while
clicking. To select many objects, click and drag with the mouse to encapsulate the desired objects. If you want to select several objects but
can’t encapsulate them entirely without including undesired objects, hold Alt while clicking and dragging a line. All objects that intersect the
line will be selected. Click a blank area of the page/canvas to deselect all objects, then Alt-click-drag to select just the frames, and Delete.

Layers
Open the Layers panel (Layer > Layers...). Right now, all our objects are on Layer 1. Click the “+” button to add a “Map” layer. Repeat
to create a layer for each community type. Then drag-and-drop each community type layer on top of the “Map” layer to turn them into
sublayers. Since Inkscape uses SVG files, where true layers are not supported, these layers are more like modified groups, so they may not
behave exactly the same as Illustrator layers.

Layers (cont.)
Let’s move our objects to the appropriate layers so it will be easier to select and modify them later. Right click on a purple town and click
Select Same > Fill Color. Then, right-click again and choose Move to Layer... and select the Inner Core layer. Repeat this for all layers.
Note: this may take a while with complex objects. Delete the Layer 1 layer by selecting it in the Layers panel and clicking the “-” button.

Stroke Color
Select all the towns by clicking and dragging to encapsulate them. Then right-click and select Fill and Stroke... to open the Fill and Stroke
panel. Select the “Stroke paint” tab and change the CMYK colors to 0, 0, 0, 0 (the “A” attribute is the alpha or transparency - leave that at
100).

Stroke Weight
With all the towns still selected, switch to the “Stroke style” tab of the Fill and Stroke panel and change the Width to 1 px (you’ll have to
change the units from the drop-down menu).

Fill Color
We want each community type to be a different color, but we want to change the ones that were generated by QGIS. Highlight the Inner
Core layer in the Layers panel to activate it. Then type Ctrl + A to select all elements on that layer. Select a color from the Color Palette
along the bottom of the interface. Repeat for each community type layer. Note: if you hold shift when selecting a color from Palette, you’ll
change the stroke color instead of the fill color.

Grouping Objects
Select all of our towns (click and drag to encapsulate). Click Ctrl + G to group them together. This makes it easier to drag them around the
page. Note: it may take a while to group complicated objects.

Creating a Legend
Let’s make a legend for our map. Add a new layer and call it “Legend.” Then open the Rectangle tool from the Tool bar. Click and drag to
draw a rectangle - hold CTRL while dragging to snap to a variety of integer-ratio rectangles (including a 1x1 square). To change the size of
our square more accurately, enter a width (W) and height (H) in the Tool Commands bar at the top (I’ve gone with 0.2in for each).

Creating a Legend (cont.)
To duplicate this square, type Ctrl + D with the shape selected. This will place a copy directly over the original. Click and drag to move it
down (hold Ctrl while dragging to constrain the move to right angles). To change the colors of our legend items to match our map, select
one rectangle, and click the eyedropper icon in the Fill and Stroke panel. This allows us to match the color of any item we click on with the
eyedropper. Repeat this step for each community type.

Let’s add text. Select the Create Text tool from the Toolbar. In the Tool Commands, change the font and size. Click and drag to create a text
box and start typing - create one text box for each community type. Note: if you don’t shrink the size of your text (or make your text box big
enough) you won’t be able to type anything as the text box won’t be big enough to fit the cursor.

Let’s line everything up. Select a legend square and its adjacent text. Open the Align panel and select the Center on Horizontal Axis button
to align the two. Then group these two elements. Repeat for each pairing. You may also need to align the left edges of your text. You can
select objects within groups by holding Ctrl while selecting them (hold Shift as well to select multiple in-group objects). Once all pairs are
aligned, distribute them using the Distribute tools in the Align panel. Then group all legend objects together.

Importing a Chart
Now let’s add a few charts. Go to File > Import... to add the “community types.pdf” to the drawing. Again, you’ll need to ungroup
everything, and it may take a couple of ungrouping steps to remove all nested groups. While the text brought in is indeed editable,
Inkscape often combines text objects in strange ways. There are some advanced ways to deal with this, but for our purposes, we’ll simply
delete this text and replace it with our own, so you’ll likely want to duplicate the imported PDF (or open the PDF in Acrobat for reference).

Editing Charts
I’ve added new layers, moved the charts to them, and grouped appropriate elements (i.e. grouping the stacked components of each bar
chart or the elements of each donut chart). Let’s resize our bar charts. Select each grouped bar and adjust the height and width in the Tool
Commands bar to 10in and .25in respectively. Also, Ctrl + Shift click each element from the chart and set the vertical (V) component of the
“Remove Overlaps” section of the Align panel to 20 and click the adjacent button to separate the bar elements.

Editing Charts (cont.)
When you click on an object once, the scaling grips pop up at the corners and sides of the objects. Click again, and the rotation and shear
grips emerge. Let’s rotate our bar chart horizontally. Hold Ctrl while dragging to constrain to 15-degree intervals. Repeat for all bar charts.

Editing Charts (cont.)
Once everything is slid into place, use the various align tools to line everything up. Then we can start adjusting the colors. Again, simply
select all desire elements (Ctrl + click to select objects within groups; Shift to add multiple objects), and use the eyedropper from the Fill
and Stroke panel. Since our bar chart elements correspond to the community types, we’ll use those colors. For our donut charts, use the
community type colors for the 5-unit segments, and use progressively lighter shades for the 2-4-unit and 1-unit segments.

Formatting Text
Let’s add and format some text. Add a layer for Titles and create new text boxes for our headers. You can adjust the font and style in the
Tool Commands bar. To change the color of text, simply adjust the color in the Fill and Stroke panel. I’ve added some headers, data labels,
and a title. Be sure to group elements you want to move together.

Aligning to the Page
The final layout step is to group all obejcts, open the Align panel, and change the “Relative to:” dropdown menu to “Page.” Then click the
Align Vertical Center and Align Horizontal Center buttons to center our work. The layout is complete!

Saving and Exporting
Go to File > Save and name your file. Be sure to select Inkscape SVG as your file format. This file can now be shared or uploaded to a
webpage or opened again in Inkscape to continue editing. You may also want to save this as a different file type. Select File > Save a
Copy... and choose the desired filetype (such as PDF or PNG) from the dropdown.

Other Resources
Your first stop for more tutorials should be within Inkscape itself. Simply open the Help > Tutorials flyout and select one. These are fully
editable SVGs that will open directly in Inkscape with step-by-step instructions and commands. What’s more, since Inkscape is opensource
and free, there are a ton of great, free help guides online.

Intro to inkscape

More Related Content

What's hot

Viewers also liked

Similar to Intro to inkscape

More from DUSPviz

Recently uploaded

Intro to inkscape