User:OrenBochman/Vector

Drawing diagrams with Inkscape

Welcome to the Inkscape vector graphics illustration tutorial. It is aimed at absolute beginners who are interested in getting started with vector graphics. As in many areas also here mastery comes with experience, experience comes with lots of practise. This unit covers the use of the program for basic drawing.

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.^[1]

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

Here are some example vector images to show you the kind of image that can be drawn with a vector graphic program.

What are Vector Graphics?

A bitmap letter A in black. The computer stores the colour and position of each pixel and reconstructs the letter from that.
A vector letter A in red. The computer stores the A shape and then works out the colours the pixels need to be to display the shape on a computer screen.

So what are vector graphics? Well let's start by looking at the alternative to vector graphics, bitmap graphics. With bitmap graphics the image is divided up into a grid of pixels. The computer holds information about those pixels, such as their colour and where they are in the image and from this information the computer can "draw" the image. Note there is no obvious way of seeing what the image will be until it is drawn. Vector graphics work in a completely different way. They define the image mathematically. The files contain instructions that state "draw a circle" or "draw a curve". It is (at least for very simple cases) possible to read these instructions and imagine what the image should look like.

Bitmaps images do not scale. If you look at them with too high a magnification they look pixellated. Vector images do not suffer from this problem because the computer stores the shape of the curve then works out the pixels afterwards

Vector graphics are ideally suited to the kinds of drawings that require simple shapes that can be mathematically described. Diagrams, logos, clipart, house plans and maps are all suitable drawings. Photographs are not.

When to use vector graphics

For a more thorough analysis of when to use vector graphics, see w: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.

File Formats

Various file formats are used for vector graphics; the most common is Macromedia/Adobe Flash. However, Wikimedia prefers scalable vector graphics or SVG. SVG is an XML markup language for describing two-dimensional vector graphics. It is an open standard created by the World Wide Web Consortium.

Downloading Inkscape

We will use Inkscape for a couple of reasons. Firstly, it is free software. Secondly, it uses SVG natively. Many Linux distributions come with inkscape already installed; if not, you can use your package manager to install it. For Windows and Mac, you need to go to the inkscape website http://www.inkscape.org/ and download the installer. Just follow the instructions on the website.

Opening Inkscape for the first time

Now that you have installed Inkscape, let's open it up and take a look at the interface.

The layout is uncluttered because the Inkscape hide tools until you need them. There are tools down the left hand side and at the top. There is information along the bottom.

The tools down the left hand side are used for drawings. They are the most important tools and we will look at some of them in this tutorial. The tools along the top are mostly used for modifying objects in a drawing. We will look at some of these as well.

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 the special case of an 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.

Saving your work for Wikipedia

If you haven't done so already:

Edit-->Select All, and maybe Group using the group icon.

Using high magnification, check that all your transitions from adjoining layers line up. Check your text objects are well separated, as they may be rendered differently by the end user's browser.

Now you need to minimise the saved image size so that it isn't surrounded by a lot of white space on the Wiki page. Then enter the Save dialogue:

File-->Document Properties-->Page Tab-->Fit Page to Selection Button (click)

File-->Save As

Life is made a lot easier if you spend a few moments adding your working folder to the drop list on the left. Don't close Inkscape, you still need it.

The file must be uploaded to Commons or Wikipedia, using the Upload File dialogue on the left. Again, life is simpler if you keep all the files in one folder - the working folder. When you have completed the standard boxes and saved the file, it will come up on a page of its own.

This needs to be checked against your original still open in Inkscape. Check the text objects - almost certainly the font will have changed. If it is not acceptable, you will need to make changes in Inkscape, then re-save the file under the same name - this can be an iterative process.

Add categories so your image may be found.

Note: When saving, select "Plain svg" rather than the default "Inkscape svg". This has been suggested as a way to get a more stable image.

Note: If you wish to include a .svg in a standard HTML web page, use the <embed> tag rather than an <img> tag, as browsers consider an .svg as a piece of XML rather than an image.

Notes

↑ Actually Inkscape uses a superset of SVG; Later in the article we will explain about how to convert it to standard SVG such that Mediawiki's use of the rendering engine RSVG will display these images appropriately (it's fairly trivial)
↑ As per Inkscape 0.45

Discussion

Any questions or would you like to take the test?

[1] Actually Inkscape uses a superset of SVG; Later in the article we will explain about how to convert it to standard SVG such that Mediawiki's use of the rendering engine RSVG will display these images appropriately (it's fairly trivial)

[2] As per Inkscape 0.45

[1]

[2]