Using Inkscape for web animation

The educational technology and digital learning wiki
Jump to navigation Jump to search

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

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
F2 (or the top button in the toolbar to the left)
(3) Click on id in the XML editor
In the bottom panel, change its name, the click Set
Selecting an SVG element (either in the drawing tool or the XML editor)

Links

Official

Tutorials

Tutorials