SVG animation with SMIL

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.

Although Chrome 45 deprecated SMIL in favor of CSS animations and Web animations, the Chrome developers have since suspended that deprecation.

Gecko 2.0 (Firefox 4 / Thunderbird 3.3 / SeaMonkey 2.1) introduced support for animating SVG using Synchronized Multimedia Integration Language (SMIL). SMIL allows you to:

animate the numeric attributes of an element (x, y, ...)
animate transform attributes (translation or rotation)
animate color attributes
follow a motion path

This is done adding an SVG element like <animate> inside the SVG element to animate. Below are examples for the four different ways.

As of Chrome 45.0, SMIL animations are deprecated in favor of CSS animations and Web animations.

Animating attributes of an element

The following example animates the cx attribute of a circle. To do so, we add an <animate> element inside the <circle> element. The important attributes for <animate> are:

attributeName: The name of the attribute to animate.
from: The initial value of the attribute.
to: The final value.
dur: The duration of the animation (for example, 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 <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(theta, x, y), where theta is the angle in degrees, and x and y are absolute positions. 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"
            <!-- Rotate from 0 to 360 degrees, and move from 60 to 100 in the x direction. -->
            from="0 60 60"
            to="360 100 60"
            <!-- Keep doing this until the drawing no longer exists. -->
            repeatCount="indefinite" 
			/>
       </rect>
     </svg>
  </body>
</html>

Animation following a path

The <animateMotion> element lets you animate an element position and rotation according to a path. The path is defined the same way as in <path>. You can set the attribute to define whether the object rotates following the tangent of the path.

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 <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 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>
  </body>
</html>

View Live Examples

Example 2: Curved motion

Same example as 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="20" fill="blue" stroke="black" stroke-width="1">
        <animateMotion path="M 250,80 H 50 Q 30,80 30,50 Q 30,20 50,20 H 250 Q 280,20,280,50 Q 280,80,250,80Z"
          dur="3s" repeatCount="indefinite" rotate="auto">
      </rect>
    </svg>
  </body>
</html>

Animating attributes of an element

Animating the transform attributes

Animation following a path

Example 1: Linear motion

Example 2: Curved motion

See also

Document Tags and Contributors