Wikipedia:How to draw a diagram with Inkscape

See Inkscape for more information on the software program itself; this article covers the use of the program for basic drawing.

A series of simple drawings made using Inkscape. With practice and skill, drawings of very high quality can be produced using this Open Source software. As these are vector graphics, the images can be scaled to any size, large or small, without loss of quality.

Inkscape is a free program used to edit vector graphics. Inkscape provides a graphical user interface for the editing of such diagrams, using the standard Scalable Vector Graphics (SVG) format.

Scope of document

This document covers basic usage of the Inkscape program. More information about advanced editing and the program itself is available from the inkscape website.

When to use vector graphics

For a more thorough analysis of when to use vector graphics, see Wikipedia:Image use policy.

Vector graphics are the primary choice of image format for diagrams on Wikipedia, as they have a small file size and can be resized without any loss of quality. Images such as photographs and other high-information sources should not be considered. This should become clear as one becomes more familiar with the relative difficulty of creating certain images under Inkscape.

Obtaining Inkscape and supported platforms

As Inkscape is open-source software, it is maintained for a variety of platforms including Linux, Mac OS X, BSD and Windows. For Linux systems, it is most likely that it will be in a list of available packages from your package manager (e.g. apt-get, yum or similar). For Mac and Windows, you will have to manually download the software and install it; instructions are available from the Inkscape website. Note that for the Mac platform, .app bundles are available, and all Inkscape versions require apple's X11.app to be installed.

Drawing a simple smiley face

This section covers basic object manipulation. Intermediate users may wish to skip this section

Firstly we will draw a very simple smiley face, to do so we will use the circle tool, the stroke and fill toolbox as well as the alignment toolbox.

Create an outline

First we have a blank page upon which we shall emblazon our smiley face. Firstly select the circle icon from the left hand bar, then whilst holding down the Ctrl key (it's Ctrl for Apple machines as well, not the Apple key) drag out a circle. The Ctrl key maintains an integer aspect ratio for the shape. Note that the circle tool is really an ellipse and elliptic arc tool, for which we are using a special case of the ellipse, i.e. the circle.

Now you should have a nice circle, with a solid black outline that is completely closed. If you have a Pac-Man shape or an arc, simply click the "make whole" button in the upper toolbar.

Changing object fill colours using HSV sliders

Adding eyes

Now for the next step, create a smaller circle and then right click its outline (on Mac, use apple click). Now select fill and stroke. Under the fill tab, select the solid rectangle, which should now make the circle filled in with solid black. You can change the colour with the colour sliders. For this work, I recommend using the HSV sliders, which will allow you to easily change the colour of the object and then change the "fullness" (Saturation) and lightness of the colour independently (unlike using the RGB sliders, where these things are changing in a confusing manner). Colour spaces are an interesting area, but outside the scope of this document.

Once you have your small black circle, place it inside the larger unfilled circle, to make an eye for the smiley face. If, in your opinion, your eye is too small or large simply select the "eye" circle whilst ensuring that the circle tool is active, then click on the white square (object handle) and drag it to resize, holding down Ctrl to maintain aspect ratio. Once you are happy with the size of the eye, use Ctrl + C to copy it, ensuring that the object is selected whilst doing so. Now, aiming your cursor where you want to place the other eye, press Ctrl + V. Note that the pasted object will appear wherever you had your cursor. Very handy when creating large groups of objects scattered about.

Aligning objects with the "Align and Distribute" toolbox

At this point, the eyes may be a little misaligned. No matter, for we shall use the alignment toolbox to rectify this problem. To bring up the alignment toolbox, either select it from the object drop down menu "Align and distribute" or by keyboard shortcut Ctrl + Shift + A. With the relative to drop-box set to "selection" and both "eyes" selected, simply press the align to centre on horizontal axis button; This will bring both eyes' centres in line with one another.

Use the "group" command to group the eyes into a single selectable object group (use either Ctrl + G or object->group). Now use shift to select the circle. Notice how it is added to the selection. Once this is done, change the drop down box for "align and distribute" to "last selected". Now click the align to vertical centre button, and the eyes will now be aligned with the vertical centre of the smiley. If the objects are not grouped, both eyes will end up on top of one another. Simply undo (Ctrl + Z), group and try again.

Adding elliptical arcs and splines

Drawing an elliptic arc with the circle tool

Now we require a mouth for our smiley face. We can achieve this using the circle tool again, draw a circle about half the radius of the face's circle. Now with the circle tool selected click and drag the round handle. Note there are two modes, sector and arc, which are selected if your mouse is outside or inside the circle respectively. In this case we want to draw about a 1/3 to 1/2 complete arc. Drag the two circular handles until you have something that resembles a smile.

Finally the nose must be drawn. To do this select the Bézier arc and straight line tool (Shift + F6) from the left hand menu. Now roughly in where you want the nose click out a straight line horizontally, using the Ctrl key to lock you to the horizontal axis, then click out another point above and back to the beginning of the lines to complete a triangle. At this point the triangle is most likely off to one side. We can fix this by using the align & distribute box whilst in the path edit mode (second tool on the left, F2). Notice how the triangle is now comprised of three nodes. Select the "distribute evenly horizontally" option and now your triangle will be vertically symmetrical. Place your triangle where you like it and voilà, it's a triangular nose. This is all well and good, but triangular noses are not so convincing. Now with the node editing tool (F2), select the two lower nodes for the nose and then click the "make nodes symmetric" option from the top toolbar, now the nose becomes a slightly more convincing teardrop shape. Play with the node handles to refine the shape for the nose until you are happy with it.

You now have a smiley face, and your first Inkscape drawing.

Rendering files

Mediawiki (the software from which Wikipedia is run) uses the program RSVG (librsvg) to rasterize all of its SVG files. The RSVG program does not always correctly raster the Inkscape SVG files. As such, Inkscape images must be modified before uploading to any wiki. To achieve this, simply perform "stroke to path" under the path menu in Inkscape whilst selecting all of the objects that need to be modified. You may find that in the case of text, "object to path" yields the correct result.

Objects that need to be modified include:

• Lines with arrow heads (the arrows need to be converted)
• Text using proprietary fonts; such as Times New Roman and Arial. Using an alternative available font is recommended.
• Compound objects created with the binary path tools (union, intersect etc.)

Failure to convert these objects appropriately may lead to incorrect Z-ordering, phantom black boxes or missing (not rasterized) objects. If operating on a system with RSVG installed, it may be a good idea to check the image before uploading to Mediawiki servers. If black boxes still appear after converting all objects appropriately, it may be necessary to hand-edit the XML to remove any rectangles with color FFFFFF (white), this can be easily done using the search tool of a text editor to locate rectangles or black objects.

Due to copyright restrictions, the Wikimedia Foundation cannot use proprietary fonts that are commonly found on several proprietary operating systems. Fonts such as Arial and Times New Roman require licensing fees to distribute. As such RSVG will not be able to locate these fonts, making text fail to appear in rendered images. There are two solutions to this issue, firstly one can simply substitute a font that is available on Wikipedia or alternatively one can convert the text into path information in Inkscape. For ease of editing and (significantly) smaller file sizes, substituting the font with an available font is the recommended option. Many of the common fonts have non-proprietary alternatives that are very similar in typographical style, resulting in minimal disruption to existing images during substitution, for example Nimbus Roman is a possible replacement for Times New Roman.

In the event, when uploading the image, that you get different results to what was on the screen, further assistance may be found at Wikipedia:SVG Help.

Intermediate and advanced editing

Inkscape's wiki maintains a large amount of advanced Inkscape-related information. It is recommended that intermediate users make use of the tutorials provided with Inkscape, and that advanced users avail themselves of the information provided in Inkscape community resources.

Alternatively, online documents exist [1] which cover Inkscape in-depth.

See also

• Wikipedia:SVG image support
• Commons:Help:SVG
• Commons:Help:Vector graphics tutorial
• Wikipedia:WikiProject Electronics/Programs has some tips on drawing electronic schematics with Inkscape