Interactive SVG-SMIL animation tutorial

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

Draft

1 Introduction

This short tutorial will provide an introduction to adding some interactivity to dynamic SVG, ie. SVG-SMIL animation

Prerequisites:

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

See also:

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

Alternative reading:

• SVG Essentials/Animating and Scripting SVG (Chapter from the Eisenberg book)

Attention: You must use a recent HTML5 compliant browser (issued 2011 or later), e.g. FireFox, Chrome, Opera or Safari. These examples will not work with Internet Explorer 9.

2 Simple click and mouse-over examples

• http://tecfa.unige.ch/guides/svg/ex/mouse-over/

3 Motion animation

Example:

• http://tecfa.unige.ch/guides/svg/ex/smil-dom/drive-start.svg
• http://tecfa.unige.ch/guides/svg/ex/smil-dom/drive-start.html

Alternative examples:

• http://srufaculty.sru.edu/david.dailey/svg/newstuff/SMIL7g.svg