Contents

1.0 - Introduction
2.0 - Fileformats
3.0 - Making images with Inkscape
4.0 - Saving a Page as drawing
5.0 - Saving objects from the canvas as SVG image
6.0 - Embedding SVG images in a web page
7.0 - Export as PNG
8.0 - Summary
9.0 - Notes/Links


Download test files: Inkscape_Images_01.zip [109 kB]


1.0 - Introduction

SVG is an Open Source vector graphics format specification from the W3C [2]. It comes in two flavors, a full version and a 'Tiny' version for mobile devices. Vector images can be scaled without loss of quality and it is easy to reuse parts from images and assemble new ones from them. SVG is an XML-standard with file extension .svg. or .svgz (compressed).

Inkscape is a free Open Source vector graphics editor with SVG as native format [1]. It has a well thought-out intuitive interface, which makes it easy to use. It has all the features you expect from a drawing program, including gradients, filling and transparency. It is suitable for creating all kinds of graphics. Inkscape has also an export option for (transparent) PNG.
The browsers Firefox and Opera directly support SVG as image format. Internet Explorer has no support for SVG. All modern browsers support transparent PNG.

This is a short guide for making SVG images with Inkscape, with some useful tips how to use the program. Includes a download with samples.


2.0 - Fileformats

The default output file format for Inkscape is 'Inkscape SVG' (.svg). With this format all the possible features and properties from Inkscape are saved in the file. You can also save as 'SVG Plain' (.svg) which is a smaller bare-bones version. Both of them can be re-opened with File > Open and they are strict SVG according to the W3C specification.





Fig. 2.1 - SVG allows for easy reuse of parts in images and they can be scaled without loss of quality.
 
 
 
Besides SVG (.svg), drawings can also be saved as Compressed SVG (.svgz), Postscript(.ps), Encapsulated Postscript (.eps), Enhanced Metafile (.emf), PovRay(.pov), OpenDocument Drawing (.odg), Desktop Cutting Plotter (.dxf), Microsoft XAML (.xaml) and more.

Images can also be exported as PNG bitmap. The PNGs support transparency (32bpp, RGB + alpha).

A good strategy is to use the default 'Inkscape SVG' format for saving and archiving the artwork. This file contains all the details and features. When another file format is needed, or (parts of) the image must be saved as PNG bitmap, the original file is opened and a copy is made to the new file.

It is also possible to save parts of the drawing as SVG or PNG. This is useful when, by example, a set of icons is made which belong to each other. The icons are created in a single drawing (enabling you to give them a consistent style), selected individually, and then saved to separate files.


3.0 - Making images with Inkscape

Drawing with vector graphics means creating an image put together from different parts like rectangles, circles, lines and text. These parts are called objects. Each object has a number of properties like size (width, height), line width (stroke width), color (fill color, stroke color) and transparency (opacity). Objects can be moved, resized, rotated, copied and grouped.

In this chapter an overview is given of the basic operations for creating vector images from objects, as this is done in Inkscape.

Any settings given below are for an opened document, see icon 'Edit properties of this document' on the toolbar or with menu File > Document Properties. These settings are saved with the image. General Inkscape settings can be set with icon 'Edit global Inkscape settings' on the toolbar or in File > Inkscape Preferences.


3.1 - Page size

Inkscape opens with a default page (canvas). You can give it another size with icon 'Edit properties of this document' on the toolbar (tab Page) or with File > Document Properties. With File > New a second window is opened in Inkscape with a new page and a size you can select from a list. When a part (object) of the drawing must be saved to a separate file you can also set the page size to the size of the object (see later). You can also decide to use the page as a repository for a number of small images, each of them can be saved later to separate files.


3.2 - Default units (pixels)

Possible units are: cm, ft, in, m, mm, pc, pt and px.
  1. Toolbar - icon 'Edit properties of this document', or File > Document Properties.
  2. Tab 'Page' - set default units and custom size to pixels.
  3. Close Document properties (settings are saved).
The units are also visible in the top toolbar in the main window.


3.3 - Showing the grid

Show the grid with menu View > Grid.
Set grid size with:
  1. Toolbar - icon 'Edit properties of this document' or File > Document Properties.
  2. Tab 'Grids'.
    1. Check 'Enabled' and 'Visible'
    2. Set 'Grid units' to pixels
    3. Set Spacing X and Y (px).
    4. Major grid line every 5 or 10 lines
  3. Tab 'Snap'.
    1. Check 'Enable snapping'
    2. Check 'Nodes' (nodes are snapped)
  4. Close Document properties (settings are saved).
Notice that the major grid lines are only visible when sufficiently zoomed in (tool 'Zoom in/out' on the top toolbar or left toolbar), depending on the distance between the lines (px).







 280%  560%  1120%  3170%




Fig. 3.1. When an SVG-image is scaled up, the quality remains constant. The grid adapts to zooming by adding extra lines when needed. Optionally, objects can be snapped to the gid for exact sizing and easy positioning.


3.4 - Gridsize and antialiasing

When exporting to PNG, settings for gridsize and stroke width will influence the antialiasing.
Setting the gridsize to 0.5 pixels will help you making icons and small images which will not have unneeded antialiasing when exported as PNG.
  1. Toolbar - icon 'Edit properties of this document' or File > Document Properties.
  2. Tab 'Grids'.
  3. Check 'Enabled' and 'Visible'
  4. Set 'Grid units' to pixels
  5. Set Spacing X and Y to to 0.5 pixels.
  6. Major grid line every 10 lines (which is 5 pixels)
  7. Close Document properties (settings are saved).
Inkscape (Help > Tutorials > Tips and Tricks):
When creating icons align filled objects to even gridlines, and stroked objects to odd gridlines with the stroke width in px being an even number, and export at the default 90 dpi (so that 1 px becomes 1 bitmap pixel). With these settings you get a crisp bitmap image without unneeded antialiasing. See also 3.7.

In practice, counting even and odd lines is easier said than done. For small icons every pixel counts and before you know it, the image produces antialiasing in unwanted places. This must be corrected in a paint program after the export.

An icon (16x16, 32x32 ...) is a very small object when your canvas is about A4. Before you start making an icon, use the zoom tool from the left toolbar and zoom in until you see the major grid lines, with 10 subdivisions of 0.5 pixels each.



Fig. 3.2 - A grid with 0.5 px per division, with every 10 lines a major grid line. The width of the black line is set in toolwindow 'Fill and Stroke', tab 'Stroke style' (see below).



Fig. 3.3 - With icon 'Edit Objects ...' on the toolbar, a toolwindow 'Fill and Stroke' is docked to the right side of the screen where Fill, Stroke paint and Stroke style can be set. The stroke style includes styles for line joins (Miter, Round, Bevel) and line caps (Butt, Round, Square).


3.5 - Drawing an image

  1. Use the 'Create rectangles' tool in the left toolbar for drawing an outline.
  2. In the top toolbar the size of an object is shown with the W: and H: values (when the object is selected). You can also set the exact size there.
  3. Draw the contents of the image using the other tools ...
  4. In the 'Fill and Stroke' toolwindow (Fig. 3.3) the properties of the objects are set.
  5. Add text with the 'Create and edit text objects' tool in the left toolbar and set the properties of the text with icon 'View and select font family ...' in the top toolbar.
Objects can be copied with Cut/Paste from the pop-up menu below the right mouse button. This is convenient when parts in a drawing are repeated, or when a slightly modified object is needed, for example text objects (Use the 'Create and edit text objects' tool to modify the text.) Fig 3.4.





Fig. 3.4 - Select, copy and paste, mirror, rotate.
Fig. 3.5 - All objects selected (for grouping).
Fig. 3.6 - Selected with 'Edit path by nodes' tool.


Objects can be resized by pulling the arrows on the sides (select the 'Select and transform objects' tool from the left toolbar), or the nodes (select the 'Edith Paths by nodes' tool). Click on the object for changing radial arrows to tangential arrows and the object can be rotated. On the top toolbar are also tools for flipping and rotation.


3.6 - Adjusting fill and stroke for an object

Fill an object with a color.

  1. Example: -
  2. Select an object in the drawing
  3. Toolbar - Icon 'Edit Objects Colors Gradients ...'
  4. Tab Fill, 'Flat color', select a color
Set the stroke width for an object.

  1. Example: -
  2. Select an object in the drawing
  3. Toolbar - Icon 'Edit Objects Colors Gradients ...'
  4. Tab Stroke Style, Width (px). Fig. 3.3.
Set the opacity for an object.
  1. Example: -
  2. Select an object in the drawing
  3. Toolbar - Icon 'Edit Objects Colors Gradients ...'
  4. Use slider 'Opacity'
Notice that the opacity is set for a complete object, including stoke and fill. When several objects are grouped (see below) the opacity is set for the complete grouped object.

Blurring an object.
  1. Example: -
  2. Select an object in the drawing
  3. Toolbar - Icon 'Edit Objects Colors Gradients ...'
  4. Use slider 'Blur'

3.7 - Text objects

New Text objects are created with tool 'Create and edit text objects' (left toolbar). Edit an existing Text object by selecting it again with this tool.

When SVG is used as image in a webbrowser, the text is rendered as black stripes (Firefox) or is not visible (Opera). Change the text type from 'flowroot' to 'text' to solve this.

Do the following:
  1. Select the Text object
  2. Menu Text > Convert to Text
  3. Menu File > Save
Tip: When a number of text objects must be changed, use the Shift key for selecting multiple objects and convert them together with 'Convert to Text'.

From the outside you cannot see if a text is converted to regular text, and the text is still editable with the 'Create and edit text objects' tool. Use 'Object Properties' in the pop-up menu below the right mouse button or menu Object > Object Properties to see the difference. When the text is converted to you see 'text...' as ID for the object, the original text object has 'flowroot...' as ID. This corresponds with <text> and <flowRoot> elements in the SVG source respectively.


3.8 - Grouping of objects

Sometimes, parts of the drawing are used in more than one place and it is convenient when the objects in it can be treated as a single object. This is done by grouping. Select objects for grouping by drawing a box around them with left mouse button down (Fig 3.5) or by clicking with the Shift key down. Join the selected objects into a single object with the 'Group selected objects' icon on the top toolbar. You can separate the objects again with the 'Ungroup selected groups' tool.
Grouping can prevent changing parts in a drawing and you can easily copy them for making different versions.


3.9 - Saving as SVG or export as PNG

When a drawing is saved with File > Save (As) the complete page (canvas) with all the objects is saved. It is also possible to save objects from the canvas to a separate file.
For saving an object from the drawing as PNG, select the object and use menu File > Export bitmap.

How to save the canvas or selected objects from the canvas as SVG or PNG is explained below in more detail.


4.0 - Saving a Page as drawing

Inkscape is opened with a default canvas size, the 'Page'. It's size which can be changed for each document with icon 'Edit properties of this document' or with menu File > Document Properties. The page has normally a visible border.
When File > Save (As) is used, all the objects on the page are saved and the SVG image in the file has the size of the page.

It is also possible to draw on the surface outside the page borders and these objects are also saved with the drawing. When, however, the file is opened in a browser (Firefox, Opera), as single image or embedded in a webpage, the image has the size of the page and only the objects on the page are visible.

Tip: The area outside the page borders can be used as a scratchpad or to make variations by moving objects in- and out the page area and then saving the drawings separately.

With File > New a new window is opened in Inkscape and one of the standard page-sizes can be selected from the list.
When a special size of the page is needed, resize the page afterwards with icon 'Edit properties of this document', tab 'Page', custom size.
When a page must have exactly the size of a selected object, select the object and use icon 'Edit properties of this document', tab 'Page', button 'Fit page to selection'.

Conclusion: saving a drawing with File > Save (As), creates an SVG image with the size of the page.


5.0 - Saving objects from the canvas as SVG image

With File > Save (As) the complete page is saved as drawing. It is also possible to use the canvas as a repository for a number of images (as objects, object collections, or groups). It is possible to save a single object to SVG file, by example for use in a web page.
Here is a recipe how to save selected objects from a drawing to file (.svg) for embedding it later as SVG image in an (X)HTML web page.

Single objects (or grouped objects) can be saved from a drawing in Inkscape as follows:
  1. Open the drawing in Inkscape with File > Open.
  2. Open also a new window with File > New > Default (or A4).
  3. Select the object in the original drawing + Copy (right mouse button)
  4. Focus on the new window + Paste
  5. Select the object
  6. Open the 'Document Properties' settings with icon 'Edit Properties ...' on the top toolbar
    1. Tab 'Page'
    2. Use button 'Fit page to selection' (the setting is applied)
    3. Close 'Document Properties'
  7. Save the object with File > Save As
Note: Copy and Paste for objects does not work between multiple instances of Inkscape. A new window must be opened in Inkscape itself.

This procedure assures you that the left top corner of the object is on coordinate 0.0 of the page (canvas) and that the canvas itself has the size of the object (when saved as 'Plain SVG', this is the <svg> element in the file, with attributes width and height). The SVG image, as .svg file, has now exactly the right size.


6.0 - Embedding SVG images in a web page

A saved SVG image (preferably 'Plain SVG') can be shown directly in Firefox or Opera by opening it with File > Open (File). Right click + 'View Source' for a look at the code: SVG is XML.

Instead of directly showing an SVG image in the browser, embedding it in a web page is also possible. Use the <object> tag with mime-type 'image/svg+xml' [5].


  XHTML - An SVG image embedded in a web page (Test_Icon_01.htm, Icon_01_130_130.svg).

 <?xml version="1.0"?>
 <head>
   <title></title>
   <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
 </head>
 <body bgcolor="#ffffff">
   <table width="133" cellpadding="0" cellspacing="0" border="0">
   <tr><td>
      <object type="image/svg+xml"
              data="Icon_01_130_130.svg" 
              width="133" height="133" border="0">
              <!-- For Internet Explorer -->
              Unable to show SVG image.
      </object>
   </td></tr>
   </table>
 </body>
 </html>


In the <object /> element is also an alternative text for browsers without SVG support (Internet Explorer). Instead of a text you can also add a bitmap image as replacement (<img src="Icon_01_130_130.png" ... />). See Test_Icon_02.htm in the download.


7.0 - Export as PNG

When a medium does not support SVG images (Internet Explorer), an alternative is to make a bitmap. Most SVG content is usually graphics and a suitable fileformat for representing this is PNG. Inkscape exports PNGs with 32 bpp (RGB + alpha).

Preceding an export, there is no need to convert text objects from 'flowroot' to 'text' with menu Text > Convert to text, as is needed for SVG in webpages. See 3.7.






Fig. 7.1.

Left: The objects are grouped before export to PNG (6.5 x 6.5 px).

Right: The object is enlarged to 130x130 px and then exported as PNG. The background had no fill; it is transparent in the final result. (Icon_01_130_130.png).
 
 
 

Export.
  1. Select the objects(s).
  2. Menu File > Export Bitmap
  3. Select Tab 'Selection'
  4. Set bitmap to 90 dpi (see also 3.3).
  5. Enter a filename (.png).
  6. Button Export.
After an export you can optionally correct the image, for example when you have small icons and the antialiasing is not quite as desired. Notice that the paint program for doing this must support transparent PNGs; objects without a fill are 100% transparent and also the antialiasing contains transparent colors (not to mention colors which are transparent by design). A good freeware program with transparent PNG support is Paint.NET [4].

In the exported PNGs, Inkscape has a subtle handling of antialiasing for color transitions between object and background, or object to object. When the background has a solid color fill the transitional colors are also solid, when the background is (partially) transparent, the transitional colors are (partially) transparent. You can see this in a paint program by using the Color Picker and see what the alpha value is for a pixel (solid = 255, 100% transparent = 0).

There is of course another way for getting bitmaps from (parts of) the SVG drawing; simply make a screendump and use a paint program for making a selection. These bitmaps, however, have no transparent colors but is is a quick way for making images for a web page.
Tip: for a reproducible scale, remember or set in Inkscape the zoom value Z (%) in the bottom-right of the window.


8.0 - Summary

SVG is a W3C vector graphics format for creating artwork, web illustrations, cartoons, technical drawings, diagrams and more. Creating images as vector graphic enables you to make high resolution images which can be scaled without loss of quality. Files are usually small which makes it a good image format for mobile applications (SVG Tiny, Opera).
Inkscape is one of the few vector graphics editors with SVG as native format. It has a well developed user interface which is easy to use and it has an export possibility for (transparent) PNG when bitmaps are needed.
Only the basic tools were discussed here. Inkscape has also some more advanced features like stamping, linear, nonlinear and radial gradients, blurring, and boolean operations on objects for combining then. Inkscape has also an XML editor for editing SVG code directly and it supports the use of Python scripts to extend its drawing capabilities.


9.0 - Notes/Links


[1a] Inkscape.
An Open Source vector graphics editor using the W3C standard Scalable Vector Graphics (SVG) file format.
http://www.inkscape.org/

[1b] Inkscape Manual.
http://en.flossmanuals.net/inkscape
Note: use link 'Make PDF' for downloading a PDF version.

[2a] W3C - Scalable Vector Graphics (SVG).
http://www.w3.org/Graphics/SVG/

[2b] Scalable Vector Graphics (SVG) 1.1 Specification.
W3C Recommendation 14 January 2003.
http://www.w3.org/TR/SVG11/

[3] Opera browser.
http://www.opera.com/

[4] Paint.NET.
Paint.NET is free image and photo editing software for Windows.
http://www.getpaint.net/

[5] Embedding SVG in (X)HTML.
http://tiffanybbrown.com/2006/09/18/embedding-svg-in-xhtml/