Using Inkscape for web animation

<pageby nominor="false" comments="false"/>

Draft

Introduction

This short tutorial will provide some tips on editing SVG pictures in Inkscape in order to add some SVG-SMIL animation and interactivity. Inkscape is

For the moment, this page only includes some examples (tested on Jan 2014 with Firefox and Chrome)

Prerequisites:

• Using SVG with HTML5 tutorial
• Static SVG tutorial
• SVG-SMIL animation tutorial
• Interactive SVG-SMIL animation tutorial

See also:

• SVG (Short overview)
• SVG links (links to various SVG resources)

Identifying and naming SVG elements

In order to write animation code, it is probably best to give special ID's to the objects that you would like to manipulate.

Procedure:

(1) Open the XML Editor

Menu: Edit -> XML Editor or (Shift-CTRL-X)

(2) Use the selection tool to identify objects in the drawing

Hit F1 (or the top button in the toolbar to the left)

Select the element, either in the drawing pane or by clicking on elements in the XML Editor

Selecting an SVG element (either in the drawing tool or the XML editor)

(3) Click on id in the XML editor

In the bottom panel, change its name, then click Set

Changing a property value

Path surgery

Simplifying drawings

According to the tutorial advanced, he main use of the Simplify command (Ctrl+L) is reducing the number of nodes on a path while almost preserving its shape. “The amount of simplification (called the threshold) depends on the size of the selection. Therefore, if you select a path along with some larger object, it will be simplified more aggressively than if you select that path alone. Moreover, the Simplify command is accelerated. This means that if you press Ctrl+L several times in quick succession (so that the calls are within 0.5 sec from each other), the threshold is increased on each call. (If you do another Simplify after a pause, the threshold is back to its default value.) By making use of the acceleration, it is easy to apply the exact amount of simplification you need for each case.” (retrieved Jan 2014).

Cutting a path in two parts

Sometimes, e.g. in the dragon head silhouette drawing, the whole SVG picture is just a single path. If you plan to animate some detail, you will have to cut it off.

Procedure:

(1) Get the path edit tool

Hit F2 or select second tool in the left tool palette

(2) Select the path you plan to edit

You now will see control points that you can use to change the shape (but that's not our purpose here)

Zoom in, e.g.++ by hitting the + button on the keyboard or by using the View menu. Try View->Zoom->Drawing or View->Zoom-Selection

Inkscape path editor

(3) Cut

Hold down SHIFT key and select two (not linked) points that will define the cut

Click Break path at selected nodes in the upper toolbar

Menu Path->Break Apart will break the path into two paths

Select path control points and cut

Some extra tips:

The breaking may fail, i.e. change the path itself. Undo if this happens.

If an object is not path (e.g. a rectangle), you can convert it to a path object: (Menu: Path -> Object to Path). But there is no way back !

Use the XML Editor to select an element if necessary (i.e. if you can't select the one you need)

Constructive solid geometry

Constructive solid geometry is a popular 2D/3D modelin technique that allows to create interesting shapes from other shapes. See the Subtractive geometry in Adobe Flash CS6 where we show how to create a Moon symbol by subtracting a circle from a circle. A similar functionaly exist in Stich Era, [[Stitch_Era_-_vector_graphics#Constructive_solid_geometry_.28CSG.29|Stich Era], an embroidery software. OpenScad is a 3D CAD tool where people design models by coding.

Read:

• Path Operations
• Tutorial advanced (Boolean operations section)

Tips:

• In order to achieve what you want you often will have to destroy objects. In other words, you may first have to create copies. Either move these away temporarily or just pile 2 objects on top of each other: CTRL-C, deselect, then CTRL-SHIFT-V

Example to create an eye from a dragon head outline

• Draw a yellow rectangle over the eye
• Move it backwards: Menu: Object -> Lower (or PageDown key) and position. You now should see a yellow eye
• Copy / Paste in place the dragon head. In the XML Editor, you now should see a new path
• Select both dragon head and a rectangle
• Menu: Path -> Difference or CTRL-
• You know should have an eye.

Links

Official

• http://inkscape.org

Tutorials

• Tutorial advanced shows tips and tricks to edit and to simplify drawings