Help:Vector graphics tutorial

From Wikimedia Commons, the free media repository
Jump to: navigation, search

Introduction[edit]

Welcome to this vector graphics tutorial! This tutorial is aimed at absolute beginners who are interested in getting started with vector graphics. One important point is that you can improve your SVG skills by testing and testing again : mastery comes with experience, experience comes with lots of practise.

What are Vector Graphics?[edit]

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

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.


Because vector graphics work in this way, they 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.

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

Ampoule à décanter.svg Ancient Egypt map pl.svg Saturn diagram.svg

File Formats[edit]

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. The editor we will be using in this tutorial is Inkscape.

Downloading Inkscape[edit]

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[edit]

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

InkscapeEmpty.png

The layout is reasonably uncluttered. This is because the Inkscape people cleverly 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 creating drawings. They are the most important tools and we will look at all of them in this tutorial. The tools along the top are mostly used for modifying objects in a drawing. We will look at some, but not all of them in this basic tutorial.

Shape tools[edit]

The Rectangle drawing tool[edit]

Let us start our exploration of the side toolbar by looking at the rectangle tool.

InkscapeScreenwithredsquare.png

Select the blue rectangle tool (you can tell it is selected because a button appears around it), then click and drag on the canvas to draw a rectangle. Do not worry if it is a different colour. We will worry about colours later.

Notice the control points at the corners? The square shaped ones will allow you to change the shape and size of the rectangle. The circular one will allow you to round the corners.

Notice also the info bar at the top? This changes with each tool selected. In the case of the rectangle tool it tells you the dimensions of the rectangle, and the rounding of the corners. You can change the numbers manually. This is handy if you need to draw a rectangle with exact dimensions, such as a flag.

Another thing to notice is the information at the bottom of the screen (next to the layers button). With most programs you can ignore this type of information; with Inkscape you should get into the habit of reading it as it does provide useful information or helpful tips on how to use the tool.

The Ctrl key[edit]

Keyboard-ctrl.svg

If you need to create a perfect square, hold down the Ctrl key on the keyboard while you click and drag. This key limits the rectangle formed to either a perfect square or a rectangle with integer ratio sides. The Ctrl key is useful for modifying many other operations. For example, if you hold it while moving an object, it will restrict the directions to horizontal or vertical only. Not sure what it will do in a particular circumstance? Hold it down and look at the information panel at the bottom of the screen and Inkscape will tell you.

The Ellipse, Polygon/Star and Spiral tools[edit]

These tools work in exactly the same way as the rectangle tool. Using the control key will restrict the ellipse tool to drawing perfect circles. Lets look at the polygon or star tool.

InkscapeRoundedTriangle.png


You can change the number of corners, the spoke ratio, roundness of the corners and the randomness manually by entering in the numbers on the info bar. You can also change the spoke ratio by dragging the control points on the polygon itself. Set the numbers the same as is shown above - we will need this rounded triangle shape later on in the tutorial.

Path drawing tools[edit]

The next three buttons as we go downwards are used for drawing paths. A path is a mathematical curve that is specified by a number of points that the path must curve through. Taking them out of order, lets look at the middle one, the bezier curve tool.

Bezier Curve tool[edit]

InkscapeBezierButtonAndCurve.png


Above is an example of a bezier curve. You can see two nodes in this view. These are the start and end nodes of the curve. But there are other nodes that you cannot see. These determine how the line curves between the end nodes. In order to see those nodes you need to click on the node button.

Node tool[edit]

InkscapeNodeTool.png


Clicking on the node tool reveals another node in the middle of the curve.

If you then click on the middle node you will see the bezier handles appear.

InkscapeBezierHandles.png


These handles allow you to change the shape of the curves between the nodes. Notice that a list of node tools appear at the top. You can use these to change the nodes. We will not go into detail about these tools in this beginners tutorial.

The node tool can be used on all the objects created with the other tools to reveal their nodes.

More on the drawing tools[edit]

The other two drawing tools also create paths. The top tool of the three is the scribble tool. Use it like a pencil. The computer will calculate all the nodes and beziers for you. Closed paths can be created by drawing a loop. (With the bezier tool, click on the start node to close the curve).

The last tool in the group is the calligraphy tool. It allows you to do calligraphic writing. The pen creates closed loops in a realistic pen nib like way. Because of this many graphic artists like to draw with this pen all the time.

InkscapeCalligraphyClosedPaths.png


Other tools[edit]

Selection tool[edit]

This tool allows you to select objects, resize them and move them about. If you click twice on an object with the selection tool, the handles change and you are able to rotate an object.

InkscapeSelectionRotation.png


Zoom tool[edit]

This tool looks like a magnifying glass with a + sign in it. Drag the tool over an area to zoom in. Shift and click to zoom out again.

Text tool[edit]

Looks like a letter A. Click and drag an area where you want your text to go, then start typing! If the letters are too small, click on the select button, then drag the handles to make it bigger. There are a lot of things that you can do with text that are beyond the scope of this beginners tutorial.

Connector tool[edit]

Use this to draw a connection between two objects. For example, a drawing and a label.

InkscapeConnector.png


The nice thing about using this tool is that if you decide to move the objects about on the canvas, the connector still maintains the connection.

Gradient tool[edit]

Click and drag on an object and you will create a gradient from full colour to full transparency.

Colour Sampler tool[edit]

Use this tool to sample a colour on the screen.

Step by step drawing a picture[edit]

No smoking symbol.png

There are of course lots of other tools. We haven't even mentioned two tools along the top toolbar, and some of these are essential for a beginner to know. The best way to actually learn about these is in the course of using them. So we are now going to proceed to draw a simple picture using Inkscape. The image we are going to draw is a No Drinking / No Alcohol sign similar to this No Smoking sign. It will consist of a bottle of wine with a wineglass and a red No Entry symbol over them.

Setting up the page[edit]

The first thing we need to do is set up the workspace.

  1. We need a square canvas so go to File-->New-->CD Cover.
  2. We are going to create two layers. One layer for the bottle and wine and one for the red barred circle thing. Doing this will not affect the picture at all; it just makes it easier to work.
    1. On the menu bar go to Layer-->Rename Layer, then call the current layer Wine.
    2. Now go Layer-->Add Layer, then call this new layer No!

We will draw the circle in the layer we called No!. The first thing we will do is lock the Wine layer so that it cannot be accidentally edited.

InkscapeLayerTool.png

Look at the bottom of the window and find the layer tool. It should read No!. Click on the downwards pointing triangle and select Wine. It will change to bold once you select it. Now do you see the black open padlock icon just to the left of the layer tool? Click on that to lock the layer. Now we cannot edit this layer for the time being. Click on the layer tool and select No! again.

We are now ready to start drawing.

Drawing the barred circle[edit]

Click on the ellipse tool and hold down the Ctrl key so that you draw a perfect circle. Make it reasonably large. We can change the size later.

Changing the colour[edit]

We need to set the colour to red and the outline to black. We do this with the fill and stroke tool. The button is located on the top toolbar and looks like this Inkscapefillandstrokebutton.png. Clicking on it will bring up the fill and stroke box, where you can edit the fill colour and transparency plus the stroke colour, weight, style and transparency.

InscapeFill'n'Stroke.png


On the above screenshot, the fill and stroke button is on the top toolbar next to a letter A. You can change the colour using several methods, but the easiest one to choose is wheel. Set the fill colour to bright red and make sure the A channel is set to 255 and the master opacity is set fully on at 1.000. These control the transparency, but we want a fully opaque image. Set the stroke colour to black and the stroke width (it's under the style tab) to 2.5 pixels.

Creating a ring shape[edit]

We are going to create a ring shape by making another circle inside the first one and then subtracting that shape from first using Inkscape's "combine paths" tools. To use the tools, the circle needs to be converted from an object to a path.

Go to the menu bar and select:

Path-->Object to Path

Nothing will appear visually to have happened to the circle, but you will know it is now a path because the info at the bottom of the window will say so.

Now we will copy and paste a second circle.

Edit-->Copy
Edit-->Paste in Place

Now we have two circle shaped paths, one on top of the other. Click on the top one, we are going to make it smaller. There are several ways of doing this but we are going to use the inset tool (in order to show you how to use it). This tool cannot be used on shapes, only on paths, which is why we had to convert the circle to a path.

Path-->Inset

You will see the top circle get a tiny bit smaller. In this tutorial so far, keyboard shortcuts have been avoided. However in this case, we will need to repeat the process several times and therefore using the shortcut will save a lot of time, so:

Press Ctrl and ( together repeatedly until the inner circle is the correct looking size.

InkscapeInsettool.png

Select both circles by dragging the select tool over them both, or by holding down the Shift key and clicking on each of them. Now go to the menu bar and select:

Path-->Difference

This combines the two paths into one path by subtracting the smaller circle (which is on top) from the larger circle.

Creating a bar over the ring[edit]

Draw a red rectangle the same width as the circle and height to match the thickness of the ring. Select both the circle and the rectangle by dragging the select tool over them both, then choose:

Object-->Align

Align the rectangle so that it is in the center of the ring.

Final image.

InkscapeAlignTool.png

We are going to add the two paths together to form a single path. Make sure both objects are selected, then go to:

Path-->Union

Finally we will rotate our object by 45 degrees clockwise.

Object-->Transform, then select the Rotate tab and enter -45 into the Degrees box.

The final barred ring will look like this:

Drawing the wine glass[edit]

The first thing we need to do is lock the No! layer, then click on the picture of an eye next to the padlock button at the bottom of the window to hide that layer. Now unlock the Wine layer.

  • Draw a rounded triangle with the star tool.

InkscapeRoundedTriangle.png

  • Resize the triangle to make a base of the wine glass.
  • Now draw a rectangle for the stem and an ellipse for the bowl.
  • Select all three objects and use:
Object-->Align to align them all vertically.

InkscapeDrawingWineGlass.png

Combine the paths of all three, then set the stroke width to 1, fill colour to grey and the A (alpha) transparency to around a third (play around with it until you are happy).

InkscapeSettingAlphaTransparency.png

Now we will cut off the top of the glass. Draw a rectangle, large enough to cover the top half of the bowl.

Glass Drawing.svg

To cut off the top of the ellipse, choose:

Path-->Difference

You now have a wine glass.

Want to add some wine? Draw an ellipse and cut most of it off using the rectangle trick above. Select fill and stroke but choose gradient fill. Edit the gradient fill and choose a wine colour for one end of the gradient and white for the other. (We are going to create a sheen on this wine). Select reflected for the repeat. Finally use the node tool to see the nodes of the gradient, then drag the white node to the right and down a little to create the required gradient.

InkscapeGradientTool.png

Saving your work for Wikipedia[edit]

Diamond-caution.svg
Every SVG file uploaded to Wikimedia Commons should show
  • how it was made: use template {{Inkscape}}, {{Adobe}}, {{HandSVG}} or whatsever
  • whether it is W3C valid or invalid: set the appropriate parameter of the template
You should check the appearance and the validity before you upload the file; use the tool SVGcheck

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.

See also[edit]