Example 1 - Animating Motoion

SVG Image

<?xml version="1.0" standalone="no"?>

Right-click on the image to open the SVG viewer pop-up menu. Click 'view SVG' to display the image in a new, full window to zoom & pan the image.  (SVG Viewer Tips)

<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

<svg width="150" height="150" >

<!-- Horizontal Animation -->
<rect y="25" width="10" height="10" fill="red">
<animate attributeName="x" from="0" to="90" dur="10s" repeatCount="indefinite"/>
</rect>

<!-- Vertical Animation -->
<rect x="25" width="10" height="10" fill="blue">
<animate attributeName="y" from="0" to="80" dur="10s" repeatCount="indefinite"/>
</rect>

<!-- Diagonal Animation -->
<rect width="10" height="10" fill="green">
<animate attributeName="x" from="0" to="60" dur="10s" repeatCount="indefinite"/>
<animate attributeName="y" from="0" to="60" dur="10s" repeatCount="indefinite"/>
</rect>

</svg>

We can animate the square horizontally by animating the x attribute The square then moves from the initial position 0 to position 90 along the x-axis in 10 seconds (dur="10s") and start over again and again (repeatCount="indefinite").

Similarily,we animate the square vertically by animating the y attribute. When we animate simultaneously both the x and y attributes, the square moves diagonally across the screen.

Example 2 - Animating an Element's stroke-width

SVG Image

<rect x="30" y="30" width="50" height="50"
fill="none" stroke="purple">
<animate attributeType="CSS" attributeName="stroke-width"
from="1" to="50" dur="5s" repeatCount="indefinite" />
</rect>

This example creates a square with a stroke-width that gradually thickens to 50 pixels, then goes back to 1 and starts again. Note that the attributeType attribute, which differentiates whether the target is XML (this is the default) or CSS. To animate a property, the attributeType is given the value 'CSS' and the CSS name is defined by the attributeName attribute.

Example 3 - Animating a Gradient

SVG Image

<defs>
<radialGradient id="blueradial">
<stop offset="0" style="stop-color:white;"/>
<stop offset="100%" style="stop-color:blue;">
<animate attributeName="offset" from="1%" to="100%" dur="4s" repeatCount="indefinite"/>
</stop>
</radialGradient>
</defs>

<circle cx="100" cy="100" r="80" style = "fill: url(#blueradial);"/>

We can animate more than the simple elements like size. In this example, the blue gradient's stop offset property grows during the 4 seconds, causing the white gradient to grow outwards and produce an explosion effect.