Interactive SVG-SMIL animation tutorial

From EduTech Wiki
Jump to: navigation, search

This article or section is a stub. A stub is an entry that did not yet receive substantial attention from editors, and as such does not yet contain enough information to be considered a real article. In other words, it is a short or insufficient piece of information and requires additions.


1 Introduction

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

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


See also:

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

Alternative reading:

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

SVG-SMIL allows to use user events such as a mouse click. Something like allows to refer to a click event on an SVG element that has id=Button

The following SVG code fragment is part of an HTML5 file:

 <svg style="margin-left:50px;border:1px solid blue" height="300" width="300" 
      <g id="Button"
	<ellipse stroke-width="2" stroke="none" fill="yellow" ry="1cm" rx="2cm" >
	  <animate fill="freeze" dur="1s" begin="" from="1cm" to="5cm" attributeName="ry"/>
	  <animate fill="freeze" dur="1s" begin="" from="2cm" to="10cm" attributeName="rx"/>
	<text style="font-family:Arial;font-size:18;" alignment-baseline="middle" x="-1cm">Click me !</text>

Live example / source code:

Mouse over/out example

<?xml version="1.0" ?>
<svg height="200" width="500" 
  <ellipse stroke-width="2" stroke="black" fill="yellow" 
	   cx="3cm" cy="2cm" ry="1cm" rx="2cm">
    <animate fill="freeze" dur="0.1s" to="blue" from="yellow" 
		  attributeName="fill" begin="mouseover"/>
    <animate fill="freeze" dur="0.1s" to="yellow" from="blue"
		  attributeName="fill" begin="mouseout"/>

Live example / source code:

3 Combined click/mouse over

Live example showing a mouse over affecting an other element plus an external link

4 Motion animation

Example showing how to start a motion animation:

Alternative examples:

5 Stopping / pausing animation

Pendulum example

<?xml version="1.0" ?>

<svg xmlns="" version="1.0" 
     viewBox="0 0 300 200">
  The pendulum code was taken from The pauseAnimations method is documented in the SVG 1.1 spec:
<line x1="100" y1="0" x2="100" y2="90" stroke="black"/>
<circle cx="100" cy="90" r="10"/>
<animateTransform attributeName="transform" type="rotate" values="0,100,0;70,100,0;0,100,0;-70,100,0;0,100,0"
		  calcMode="spline" begin="0s" dur="4s" repeatCount="indefinite"/>

<g onclick="document.documentElement.pauseAnimations();" transform="translate(150 0)">
  <rect width="60" height="30" rx="10" stroke="black" fill-opacity="0.2"/>
  <text id="t" style="font:16px Arial Black;fill:white;stroke:black" transform="translate(5 20)">STOP</text>

<g onclick="document.documentElement.unpauseAnimations();" transform="translate(5 0)">
  <rect width="60" height="30" rx="10" stroke="black" fill-opacity="0.2"/>
  <text id="t2" style="font:16px Arial Black;fill:white;stroke:black" transform="translate(2 20)">START</text>