The easiest way to animate something in SVG is using SMIL. This is yet another standard from W3C that SVG uses. SMIL (pronouced 'smile') stands for Synchronized Multimedia Integration Language. It is a highly adaptable animation langauge which is extended and adapted for SVG. SMIL is very convient but it constrains you to how it wants to work.

A SMIL animation element in SVG associates event(s) with a change or series of changes to an attribute of the SVG object they are linked to. The next example shows the animation element mouse events rectangles which change color when event occurs to it.

The other sections of the tutorial deal with how to use SVG to make beautiful shapes. In this section, let's put those shapes to work doing some real work by using Javascript to glue them together. Most SVG viewers support JavaScript (ECMAScript) as their main scripting language but SVG is not limited to only that language.

JavaScript can either be embeded or in an external file. The next code example shows both styles.

To preform an action when an event occurs you just add the event handler to the associated object. This is much like HTML except the event names must be all lowercase letters.

Event	When Called
onclick	When the object is clicked (mouse button down and up)
onmousedown	When the mouse button is pushed down on the object
onmouseup	When the mouse button is released on the object
onmouseover	When the mouse cursor moves over the object
onmousemove	When the mouse moves in the object
onmouseout	When the mouse cursors leaves the object

<script type="text/ecmascript">
<![CDATA[ ... function updateStats() 
{ svgDocument.getElementById("clicks").firstChild.data     
= "onclick = " + click; 
svgDocument.getElementById("mousedowns").firstChild.data         
= "onmousedown = " + mouseDown;     ... }  
function msClick (evt) 
{     click++;     updateStats(); } ... ]]>
</script>  <circle cx="50%" cy="25%" r="40" 
fill="lightyellow"     onclick="msClick()"     
onmousedown="msDown()"     onmouseup="msUp()"     
onmouseover="msOver()"     onmousemove="msMove()"     
onmouseout="msOut()"     />

<svg onload="init(evt)" ...>
 <script type="text/ecmascript"><![CDATA[
 function init(evt) {
     if ( window.svgDocument == null )
         svgDocument = evt.target.ownerDocument;
 }
 ]]></script>

The Batik SVG viewer sets the variable "window.document" to be the SVG document root and is incompatible with the above code.

If SMIL animation doesn't quite handle how you want to animate something in SVG then the alternative is using JavaScript (EcmaScript). SMIL animation is very handy but there are plenty of behaviours that can be much more easily modeled by using JavaScript.

SVG Path

Masking is a combination of opacity values and clipping. Like clipping you can use shapes, text or paths to define sections of the mask. The default state of a mask is fully transparent which is the opposite of clipping plane. The graphics in a mask sets how opaque portions of the mask are.

The luminosity of the color at a pixel determines how opaque the pixel will be. White is the most luminous color and black is the least luminous. Thus, the highest luminosity value, white, is opaque and the lowest, black, is transparent. This is backwards to physics (black absorbs all light) but matches how you define colors and mixing fractions of the new color with the colors below.