Animate objects using SMIL

(250,250) (500,250) (0,250) (250,0) (250,500) (500,0) (0,0) (0,500) (500,500) Ex. 1 Ex. 2 GO STOP Ex. 3 Ex. 4

Synchronized Multimedia Integration Language

SMIL is a markup language similar to SVG and has been a W3C recommendation since 1998. It allows various animation effects of SVG objects.

This page animates single objects, and introduces user interaction in Example 1. By clicking 'GO' the user starts the animation - clicking 'STOP' ends the animation.

<ellipse cx="150" cy="75" rx="10" ry="40" fill="blue">
<animate attributeName="rx" begin="G.click" end="S.click" dur="4s" values="10;110;10" repeatCount="indefinite"/> </ellipse>
<g id="G">
<rect x="85" y="130" height="20" width="60" fill="green"/>
<text x="105" y="148" font-size="20" fill="white">GO</text>
</g>
<g id="S">
<rect x="150" y="130" height="20" width="60" fill="red"/>
<text x="156" y="148" font-size="20" fill="white">STOP</text>
</g>
<rect x="10%" y="280" height="100" width="50" fill="#FF9800">
<animate attributeName="x" dur="4" values="10%;85%;10%" repeatCount="indefinite"/> </rect>

Example 2 uses 'animate' to move a rectangle up and down vertically. The 'values' attribute specifies what values to use for the 'attributeName', which in this case is the y axis. So it begin at 220 pixels, moves to 0 pixels, and finishes back at 220 pixels. Since the 'dur' (duration) is set to 1 second, the bar will reach halfway in its animation after 1 second.

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<rect x="310" y="20" height="7" width="125" fill="indianred"/>
<animate attributeName="y" dur="1" values="220;0;220" repeatCount="indefinite"/>
</rect>
</svg>

 

Moving on to Example 3 demonstrates moving a rectangle back and forth horizontally over the course of 4 seconds.

<rect x="10%" y="280" height="100" width="50" fill="#FF9800">
<animate attributeName="x" dur="4" values="10%;85%;10%" repeatCount="indefinite"/>
</rect>

 

Finally Example 4 shows a similar animation as Example 3, except for timing. The purple circle takes 3 seconds to complete its travel, while the gold rectangle takes 4 seconds.

<circle cx="150" cy="450" r="30" fill="#D006FF">
<animate attributeName="cx" dur="3" values="10%;85%;10%" repeatCount="indefinite"/>
</circle>

Layers

A note about layers:
SVG uses the painter's model for layers. This means that the last item added will appear on top of items added earlier. This is very noticeable on this page in Examples 2,3, and 4. The code for the text appears AFTER the code to generate the objects, so is 'higher' than the images. This results in the text being visible even when an image appears to pass in front of the text.

 

All done.