Interactive SVG-SMIL animation tutorial

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

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



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


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.

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>

Source code:

More examples:

Motion animation


Alternative examples: