Intro to inkscape

Intro to InkscapeCreated 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 InstallIf 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 StartedLet’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 ShortcutsZoom In = +Zoom Out = -

Pan = Ctrl + Arrow Keys

Color Palette


Setting up the PageGo 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 VisualizationInkscape 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 UnitsMAPC 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 FileNavigate 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 ObjectWhen 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.


UngroupingRight 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 ObjectsTo 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.


LayersOpen 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 ColorSelect 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 WeightWith 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 ColorWe 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 ObjectsSelect 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 LegendLet’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.


Creating a Legend (cont.)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.


Creating a Legend (cont.)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 ChartNow 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 ChartsI’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 TextLet’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 PageThe 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 ExportingGo 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 ResourcesYour 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.

Design

Intro to inkscape