SVG animation with SMIL

  • Revision slug: SVG/SVG_animation_with_SMIL
  • Revision title: SVG animation with SMIL
  • Revision id: 67308
  • Created:
  • Creator: sebmozilla
  • Is current revision? No
  • Comment 844 words added, 60 words removed

Revision Content

{{ gecko_minversion_header("2.0") }}

Note: Proper SVG documentation is coming in the (hopefully) near future. In the meantime, the examples here should get you started, and you can refer to the specification and other documents for specific syntax details.

Gecko 2.0 {{ geckoRelease("2.0") }} introduced support for animating SVG using Synchronized Multimedia Integration Language (SMIL). SMIL allows you to animate the numeric attributes of an element (x, y, ...), their transform attributes (translation or rotation), their color attributes or follow a motion path. This is done adding an SVG element like {{ SVGElement("animate") }} inside the SVG element to animate. Below are examples for the 4 different ways.

Animating Attributes of an element

The following example animates the cx atribute of a circle. To do so, we add an {{ SVGElement("animate") }} element inside the {{ SVGElement("circle") }} element. The important attributes for {{ SVGElement("animate") }} are 'attributeName' which specifies the name of the attribute to animate, 'from' which specifies the initial value of the attribute, 'to' which specifies the final value and 'dur' which specifies the duration (you need to write '5s' for 5 seconds).

If you want to animate more attributes inside the same element, just add more animate elements.

<!DOCTYPE html>
<html>
  <head>
    <title>Attribute Animation with SMIL</title>
  </head>
  <body>
     <svg width="300px" height="100px">
       <rect x="0" y="0" width="300" height="100" stroke="black" stroke-width="1" />
       <circle cx="0" cy="50" r="15" fill="blue" stroke="black" stroke-width="1">
            <animate attributeName="cx" from="0" to="100" dur="5s" repeatCount="indefinite" />
       </circle>
     </svg>
  </body>
</html>

Animating the transform attributes

The {{ SVGElement("animateTransform") }} element let you animate 'transform' attributes. This new element is necessary because we are not animating a simple attribute like x which is just a number. Rotation attributes look like this : rotation(30 60 100). In the example below, we animate the center of the rotation and the angle.

<!DOCTYPE html>
<html>
  <head>
    <title>SVG SMIL Animate with transform</title>
  </head>
  <body>
     <svg width="300px" height="100px">
       <rect x="0" y="0" width="300" height="100" stroke="black" stroke-width="1" />
       <rect x="0" y="50" width="15" height="34" fill="blue" stroke="black" stroke-width="1" transform="rotation">
            
			<animateTransform
            attributeName="transform"
            begin="0s"
            dur="20s"
            type="rotate"
            from="0 60 60"
            to="360 100 60"
            repeatCount="indefinite" 
			/>
       </rect>
     </svg>
  </body>
</html>

Animation following a path

The {{ SVGElement("animateTransform") }} element lets you animate an element position and rotation according to a path. The path is defined the same way as in {{ SVGElement("path") }}. You can set the attribute to define if the objet rotates following the tangent of the path or not.

Example 1: Linear motion

In this example, a blue circle bounces between the left and right edges of a black box, over and over again, indefinitely. The animation here is handled by the {{ SVGElement("animateMotion") }} element. In this case, we're establishing a path consisting of a MoveTo command to establish the starting point for the animation, then the Horizontal-line command to move the circle 300 pixels to the right, followed by the Z command, which closes the path, establishing a loop back to the beginning. By setting the value of the repeatCount attribute to "indefinite", we indicate that the animation should loop forever, as long as the SVG image exists.

<!DOCTYPE html>
<html>
  <head>
    <title>SVG SMIL Animate with Path</title>
  </head>
  <body>
     <svg width="300px" height="100px">
       <rect x="0" y="0" width="300" height="100" stroke="black" stroke-width="1" />
       <rect x="0" y="50" width="15" height="34" fill="blue" stroke="black" stroke-width="1" transform="rotation">
            
			<svg xmlns="http://www.w3.org/2000/svg" width="300px" height="100px">
				<rect x="0" y="0" width="300" height="100" stroke="black" stroke-width="1" />
				<circle cx="0" cy="50" r="15" fill="blue" stroke="black" stroke-width="1">
					<animateMotion path="M 0 0 H 300 Z" dur="3s" repeatCount="indefinite" />
				</circle>
			</svg>
       </rect>
     </svg>
  </body>
</html>

{{ SVGLiveSample("svganimdemo1.html") }}

Example 2: Curved Motion

Same example than before with a curved path and following the direction of the path.

<!DOCTYPE html>
<html>
  <head>
    <title>SVG SMIL Animate with Path</title>
  </head>
  <body>
     <svg width="300px" height="100px">
        <rect x="0" y="0" width="300" height="100" stroke="black" stroke-width="1" />
        <rect x="0" y="0" width="20" height="50" fill="blue" stroke="black" stroke-width="1">
            <animateMotion path="M 50,100 Q40,75 90,70Q95,60 95,50Q180,40 170,100Z"
				    dur="3s" repeatCount="indefinite" rotate="auto">
        </rect>
    </svg>     
  </body>
</html>

See also

Revision Source

<p>{{ gecko_minversion_header("2.0") }}</p>
<div class="note"><strong>Note:</strong> Proper SVG documentation is coming in the (hopefully) near future. In the meantime, the examples here should get you started, and you can refer to the <a href="/en/SVG/SVG_animation_with_SMIL#See_also" title="en/SVG/SVG animation with SMIL#See also">specification and other documents</a> for specific syntax details.</div>
<p>Gecko 2.0 {{ geckoRelease("2.0") }} introduced support for animating <a href="/en/SVG" title="en/SVG">SVG</a> using <a class=" external" href="http://www.w3.org/TR/REC-smil" title="http://www.w3.org/TR/REC-smil">Synchronized Multimedia Integration Language</a> (SMIL). SMIL allows you to animate the numeric attributes of an element (x, y, ...), their transform attributes (translation or rotation), their color attributes or follow a motion path. This is done adding an SVG element like <span class="author-g-shbl2alwmr0wm7ko">{{ SVGElement("animate") }}</span> inside the SVG element to animate. Below are examples for the 4 different ways.</p>
<h2>Animating Attributes of an element</h2>
<p>The following example animates the cx atribute of a circle. To do so, we add an <span class="author-g-shbl2alwmr0wm7ko">{{ SVGElement("animate") }} element inside the </span><span class="author-g-shbl2alwmr0wm7ko">{{ SVGElement("circle") }} element. The important attributes for </span><span class="author-g-shbl2alwmr0wm7ko">{{ SVGElement("animate") }} are</span> 'attributeName' which specifies the name of the attribute to animate, 'from' which specifies the initial value of the attribute, 'to' which specifies the final value and 'dur' which specifies the duration (you need to write '5s' for 5 seconds).</p>
<p>If you want to animate more attributes inside the same element, just add more animate elements.</p>
<pre>&lt;!DOCTYPE html&gt;
&lt;html&gt;
  &lt;head&gt;
    &lt;title&gt;Attribute Animation with SMIL&lt;/title&gt;
  &lt;/head&gt;
  &lt;body&gt;
     &lt;svg width="300px" height="100px"&gt;
       &lt;rect x="0" y="0" width="300" height="100" stroke="black" stroke-width="1" /&gt;
       &lt;circle cx="0" cy="50" r="15" fill="blue" stroke="black" stroke-width="1"&gt;
            &lt;animate attributeName="cx" from="0" to="100" dur="5s" repeatCount="indefinite" /&gt;
       &lt;/circle&gt;
     &lt;/svg&gt;
  &lt;/body&gt;
&lt;/html&gt;</pre>
<h2>Animating the transform attributes</h2>
<p><span class="author-g-shbl2alwmr0wm7ko">The {{ SVGElement("animateTransform") }} element let you animate 'transform' attributes. This new element is necessary because we are not animating a simple attribute like x which is just a number. Rotation attributes look like this : rotation(30 60 100). In the example below, we animate the center of the rotation and the angle. <br>
</span></p>
<pre>&lt;!DOCTYPE html&gt;
&lt;html&gt;
  &lt;head&gt;
    &lt;title&gt;SVG SMIL Animate with transform&lt;/title&gt;
  &lt;/head&gt;
  &lt;body&gt;
     &lt;svg width="300px" height="100px"&gt;
       &lt;rect x="0" y="0" width="300" height="100" stroke="black" stroke-width="1" /&gt;
       &lt;rect x="0" y="50" width="15" height="34" fill="blue" stroke="black" stroke-width="1" transform="rotation"&gt;
            
			&lt;animateTransform
            attributeName="transform"
            begin="0s"
            dur="20s"
            type="rotate"
            from="0 60 60"
            to="360 100 60"
            repeatCount="indefinite" 
			/&gt;
       &lt;/rect&gt;
     &lt;/svg&gt;
  &lt;/body&gt;
&lt;/html&gt;</pre>
<h2>Animation following a path</h2>
<p><span class="author-g-shbl2alwmr0wm7ko">The {{ SVGElement("animateTransform") }} element lets you animate an element position and rotation according to a path. </span>The path is defined the same way as in <span class="author-g-shbl2alwmr0wm7ko">{{ SVGElement("path") }}. You can set the attribute to define if the objet rotates following the tangent of the path or not. </span></p>
<h3>Example 1: Linear motion</h3>
<p>In this example, a blue circle bounces between the left and right edges of a black box, over and over again, indefinitely. The animation here is handled by the {{ SVGElement("animateMotion") }} element. In this case, we're establishing a path consisting of a <strong>M</strong>oveTo command to establish the starting point for the animation, then the <strong>H</strong>orizontal-line command to move the circle 300 pixels to the right, followed by the <strong>Z</strong> command, which closes the path, establishing a loop back to the beginning. By setting the value of the <code>repeatCount</code> attribute to "indefinite", we indicate that the animation should loop forever, as long as the SVG image exists.</p>
<pre class="brush: html">&lt;!DOCTYPE html&gt;
&lt;html&gt;
  &lt;head&gt;
    &lt;title&gt;SVG SMIL Animate with Path&lt;/title&gt;
  &lt;/head&gt;
  &lt;body&gt;
     &lt;svg width="300px" height="100px"&gt;
       &lt;rect x="0" y="0" width="300" height="100" stroke="black" stroke-width="1" /&gt;
       &lt;rect x="0" y="50" width="15" height="34" fill="blue" stroke="black" stroke-width="1" transform="rotation"&gt;
            
			&lt;svg xmlns="http://www.w3.org/2000/svg" width="300px" height="100px"&gt;
				&lt;rect x="0" y="0" width="300" height="100" stroke="black" stroke-width="1" /&gt;
				&lt;circle cx="0" cy="50" r="15" fill="blue" stroke="black" stroke-width="1"&gt;
					&lt;animateMotion path="M 0 0 H 300 Z" dur="3s" repeatCount="indefinite" /&gt;
				&lt;/circle&gt;
			&lt;/svg&gt;
       &lt;/rect&gt;
     &lt;/svg&gt;
  &lt;/body&gt;
&lt;/html&gt;</pre>
<p>{{ SVGLiveSample("svganimdemo1.html") }}</p>
<h3>Example 2: Curved Motion</h3>
<p>Same example than before with a curved path and following the direction of the path.</p>
<pre class="deki-transform">&lt;!DOCTYPE html&gt;
&lt;html&gt;
  &lt;head&gt;
    &lt;title&gt;SVG SMIL Animate with Path&lt;/title&gt;
  &lt;/head&gt;
  &lt;body&gt;
     &lt;svg width="300px" height="100px"&gt;
        &lt;rect x="0" y="0" width="300" height="100" stroke="black" stroke-width="1" /&gt;
        &lt;rect x="0" y="0" width="20" height="50" fill="blue" stroke="black" stroke-width="1"&gt;
            &lt;animateMotion path="M 50,100 Q40,75 90,70Q95,60 95,50Q180,40 170,100Z"
				    dur="3s" repeatCount="indefinite" rotate="auto"&gt;
        &lt;/rect&gt;
    &lt;/svg&gt;     
  &lt;/body&gt;
&lt;/html&gt;</pre>
<h2>See also</h2>
<ul> <li><a href="/en/SVG" title="en/SVG">SVG</a></li> <li><a class=" external" href="http://www.w3.org/TR/SVG/animate.html" title="http://www.w3.org/TR/SVG/animate.html">SVG Animation Specification</a></li> <li><a class=" external" href="http://www.w3.org/TR/REC-smil" title="http://www.w3.org/TR/REC-smil">SMIL Specification</a></li>
</ul>
Revert to this revision