SVG Animations with SMIL: A Complete Guide

What is SMIL?

SMIL (Synchronized Multimedia Integration Language) is an XML-based language for writing interactive multimedia presentations. Unlike CSS animations or JavaScript-based animations, SMIL allows you to animate SVG elements directly using declarative markup--no scripts required.

Despite rumors of its demise, SMIL remains fully supported in modern browsers and offers unique capabilities that CSS cannot match. Google reversed its deprecation plans in 2020, confirming SMIL's future in web development.

What You'll Learn

• The three core SMIL animation elements
• How to animate SVG attributes, transforms, and motion paths
• Practical code examples for common animation patterns
• When to use SMIL vs CSS animations

For teams building interactive web experiences, understanding SMIL complements our front-end development services and enables richer visual storytelling without JavaScript dependencies.

The Three Core Animation Elements

SMIL provides three primary elements for animating SVG content:

1. <animate> - Attribute Animation

The <animate> element animates changes to a single attribute value over time. This is the most fundamental SMIL animation element.

<circle cx="0" cy="50" r="15" fill="blue">
 <animate
 attributeName="cx"
 from="0"
 to="500"
 dur="5s"
 repeatCount="indefinite" />
</circle>

Key attributes:

• attributeName: The name of the attribute to animate
• from/to: Initial and final values
• dur: Duration (e.g., "5s" for 5 seconds)
• repeatCount: Loop count ("indefinite" for continuous)

2. <animateTransform> - Transform Animation

The <animateTransform> element animates SVG transform attributes. This is necessary because transforms like rotation are compound values.

<rect width="15" height="34" fill="blue">
 <animateTransform
 attributeName="transform"
 begin="0s"
 dur="20s"
 type="rotate"
 from="0 60 60"
 to="360 100 60"
 repeatCount="indefinite" />
</rect>

Transform types: translate, rotate, scale, skewX, skewY

3. <animateMotion> - Path Animation

The <animateMotion> element animates an element's position along a path defined using SVG path syntax.

<circle cx="0" cy="50" r="15" fill="blue">
 <animateMotion
 path="M 0 0 H 300 Z"
 dur="3s"
 repeatCount="indefinite" />
</circle>

The rotate="auto" attribute makes elements follow the path's tangent automatically.

These animation techniques are essential for creating engaging user interfaces and interactive experiences.

Core Animation Attributes

Timing Control

Value Animation

<!-- Multi-value animation -->
<animate
 attributeName="opacity"
 values="0;1;0.5;1;0"
 dur="4s"
 repeatCount="indefinite" />

<!-- Keyed animation -->
<animate
 attributeName="cx"
 values="0;100;0"
 keyTimes="0;0.5;1"
 dur="2s"
 repeatCount="indefinite" />

Synchronization

Animations can be synchronized using event triggers:

<!-- Start when another animation ends -->
<animate begin="otherAnimation.end" ... />

<!-- Start on click -->
<animate begin="click" ... />

Mastering these timing attributes is crucial for creating smooth micro-interactions that enhance user experience.

Practical Examples

Example 1: Pulsing Circle

<svg width="200" height="200">
 <circle cx="100" cy="100" r="50" fill="#3498db">
 <animate
 attributeName="r"
 values="50;70;50"
 dur="2s"
 repeatCount="indefinite" />
 <animate
 attributeName="opacity"
 values="1;0.7;1"
 dur="2s"
 repeatCount="indefinite" />
 </circle>
</svg>

Example 2: Bouncing Ball Along Path

<svg width="400" height="200">
 <path
 d="M 20,180 Q 100,20 200,180 T 380,180"
 fill="none"
 stroke="#ccc"
 stroke-width="2" />
 <circle r="15" fill="#e74c3c">
 <animateMotion
 path="M 20,180 Q 100,20 200,180 T 380,180"
 dur="3s"
 repeatCount="indefinite"
 rotate="auto" />
 </circle>
</svg>

Example 3: Loading Spinner

<svg width="50" height="50">
 <circle cx="25" cy="25" r="20" fill="none" stroke="#333" stroke-width="4">
 <animateTransform
 attributeName="transform"
 type="rotate"
 from="0 25 25"
 to="360 25 25"
 dur="1s"
 repeatCount="indefinite" />
 </circle>
</svg>

Example 4: Progress Bar

<svg width="300" height="30">
 <rect x="0" y="0" width="300" height="30" fill="#eee" rx="5" />
 <rect x="0" y="0" width="0" height="30" fill="#27ae60" rx="5">
 <animate
 attributeName="width"
 from="0"
 to="300"
 dur="2s"
 fill="freeze" />
 </rect>
</svg>

These patterns are commonly used in landing page design to guide user attention and provide visual feedback.

Color Animation

SMIL can animate color attributes directly, which CSS cannot do for all color properties:

<rect width="100" height="100" fill="red">
 <animate
 attributeName="fill"
 values="#ff0000;#00ff00;#0000ff;#ff0000"
 dur="6s"
 repeatCount="indefinite" />
</rect>

This is particularly useful for:

• Animated icons and logos
• Interactive UI elements
• Data visualization color transitions
• Status indicators

Color animations enhance visual hierarchy in our UI/UX design services and help communicate state changes to users.

Event-Triggered Animations

SMIL animations can start based on events like clicks or mouse hover:

<rect x="10" y="10" width="100" height="80" fill="#3498db">
 <animate
 attributeName="fill"
 values="#3498db;#e74c3c;#3498db"
 dur="0.5s"
 begin="rectMouse.mouseover"
 end="rectMouse.mouseout" />
</rect>

For click-triggered animations:

<circle cx="100" cy="100" r="50" fill="#3498db" id="triggerCircle">
 <animate
 attributeName="r"
 values="50;70;50"
 dur="0.3s"
 begin="triggerCircle.click" />
</circle>

Event-driven animations create responsive interactive web applications that feel alive and engaging.

Browser Support

SMIL is supported in all modern browsers:

Google reversed its deprecation plans in 2020, confirming SMIL's future in web development.

Accessibility Considerations

1. Respect prefers-reduced-motion: Use CSS to hide animated SVGs from users who prefer reduced motion

2. Allow user control: Animations that run indefinitely should have a clear way to pause

3. Don't flash: Avoid rapid animations that could trigger photosensitive seizures

@media (prefers-reduced-motion: reduce) {
 svg { animation: none !important; }
}

Building accessible animations is part of our commitment to inclusive web design standards.

Best Practices

1. Use meaningful durations: Animations should feel natural--typically between 200ms and 1s for UI elements

2. Set appropriate repeat counts: Use repeatCount="indefinite" only for continuously looping animations

3. Consider fill="freeze": For animations that should end in a specific state, freeze maintains the final value

4. Use values for complex animations: When animating through multiple states, the values attribute provides clear control

5. Test with different SVG contexts: SMIL animations work inline, in <img>, and in CSS background-image

6. Provide fallbacks: For critical UI feedback, consider adding JavaScript fallbacks

7. Keep animations subtle: Overly flashy animations can distract from content

Following these best practices ensures animations enhance rather than detract from the user experience in our responsive website design.

Sources

1. MDN Web Docs - SVG Animation with SMIL
2. Smashing Magazine - SMIL's Not Dead Baby, SMIL's Not Dead
3. W3C SMIL Specification