How to Animate SVG Using SMIL Elements

Synchronized Multimedia Integration Language (SMIL) allows you to animate Scalable Vector Graphics (SVG) directly inside the XML markup without requiring external CSS or JavaScript. By embedding elements like <animate> and <animateTransform>, you can smoothly modify numeric properties, colors, coordinate systems, and spatial transformations. This guide covers how to implement these SMIL elements to build self-contained, responsive vector animations directly within your SVG code.

The <animate> Element

The <animate> element is used to modify scalar attributes over time, such as dimensions, coordinates, opacities, and fill colors. You nest the <animate> tag inside the target shape element or link it using an href attribute.

Core Attributes:

• attributeName: The name of the SVG attribute to animate (e.g., x, y, r, fill, opacity).
• from and to: The start and end values of the animation.
• dur: The duration of the animation cycle (e.g., 2s, 500ms).
• repeatCount: The number of playback iterations (indefinite or a specific integer).
• values: A semicolon-separated list of values defining an interpolation sequence.
• fill: Defines the post-animation state (freeze retains the final value; remove resets to the start).

Example: Animating Radius and Color

<svg viewBox="0 0 100 100" width="200" height="200" xmlns="http://www.w3.org/2000/svg">
  <circle cx="50" cy="50" r="20" fill="#3498db">
    <!-- Animate the radius -->
    <animate 
      attributeName="r" 
      values="20; 40; 20" 
      dur="3s" 
      repeatCount="indefinite" />
    
    <!-- Animate the color -->
    <animate 
      attributeName="fill" 
      values="#3498db; #e74c3c; #3498db" 
      dur="3s" 
      repeatCount="indefinite" />
  </circle>
</svg>

The <animateTransform> Element

The <animateTransform> element specifically targets the SVG transform attribute, enabling rotation, scaling, translation, and skewing.

Core Attributes:

• attributeName: Always set to "transform".
• type: The transformation type (translate, scale, rotate, skewX, or skewY).
• from and to: Transformation parameters corresponding to the type. For rotation, the format is angle [centerX centerY].
• additive: Set to "sum" to allow multiple transformations to layer over each other without overriding.

Example: Rotating a Shape Around Its Center

<svg viewBox="0 0 100 100" width="200" height="200" xmlns="http://www.w3.org/2000/svg">
  <rect x="35" y="35" width="30" height="30" fill="#2ecc71">
    <animateTransform 
      attributeName="transform" 
      type="rotate" 
      from="0 50 50" 
      to="360 50 50" 
      dur="4s" 
      repeatCount="indefinite" />
  </rect>
</svg>

Advanced Controls: Timing and Triggers

SMIL provides advanced event-based triggers and sequencing controls without scripting.

• User Events: Trigger animations on interaction using the begin attribute (e.g., begin="click", begin="mouseover").
• Chained Sequences: Reference the completion of another animation using element IDs (e.g., begin="firstAnim.end").
• Timing Offsets: Add delays to events (e.g., begin="click + 0.5s").

Example: Chained and Click-Triggered Animations

<svg viewBox="0 0 200 100" width="400" height="200" xmlns="http://www.w3.org/2000/svg">
  <!-- Interactive Circle -->
  <circle id="triggerCircle" cx="50" cy="50" r="25" fill="#e67e22" cursor="pointer">
    <animate 
      id="grow" 
      attributeName="r" 
      from="25" 
      to="40" 
      dur="0.4s" 
      begin="click" 
      fill="freeze" />
  </circle>

  <!-- Dependent Rectangle -->
  <rect x="120" y="30" width="40" height="40" fill="#9b59b6">
    <animateTransform 
      attributeName="transform" 
      type="scale" 
      from="1" 
      to="1.5" 
      dur="0.5s" 
      begin="grow.end" 
      fill="freeze" />
  </rect>
</svg>

Key Advantages of SMIL Animation

• Self-Contained: Animations are embedded directly in the SVG file, working seamlessly when embedded as <img> tags or used as CSS background images.
• Declarative: High performance with native browser-level rendering pipelines.
• Resolution Independence: Vector paths and transformations retain sharpness at all screen densities and zoom levels.