Lesson 9

SMIL Animation Fundamentals

SMIL (Synchronized Multimedia Integration Language) gives SVG a declarative animation system that lives inside the markup itself. No JavaScript, no external CSS files - the animation is part of the SVG document. While CSS @keyframes inside a <style> block can also produce self-contained animations, SMIL can target any SVG attribute - including geometry (cx, d, viewBox), filter parameters (stdDeviation), and text attributes (startOffset) that CSS simply can't reach. For truly self-contained animated SVGs that go beyond what CSS properties allow, SMIL is the tool.

This lesson covers the core <animate> element and the timing model that drives it. Lesson 10 will build on this with <animateTransform>, <animateMotion>, and advanced timing (syncbase, events, orchestration).

1. The Mental Model

A SMIL animation is a child element nested inside the element it animates. It declares: "animate this attribute, from this value to that value, over this duration." The browser handles interpolation.

<circle cx="50" cy="50" r="20" fill="coral">
  <!-- This animate element is a CHILD of the circle -->
  <animate
    attributeName="r"
    from="20"
    to="40"
    dur="2s"
    repeatCount="indefinite"/>
</circle>

2. The <animate> Element

<animate> is the workhorse. It animates a single attribute of its parent element over time. Here are its core attributes:

from/to vs values

You can define an animation two ways:

• from/to - simple A-to-B transition
• values - multiple keyframes, semicolon-separated. The animation progresses through them evenly (unless you use keyTimes)

<!-- Two-value animation (from/to) -->
<rect width="50" height="50" fill="coral">
  <animate attributeName="x" from="0" to="300" dur="3s"
           repeatCount="indefinite"/>
</rect>

<!-- Multi-value animation (values) -->
<rect width="50" height="50" fill="#61afef">
  <animate attributeName="x" values="0;300;150;300;0" dur="4s"
           repeatCount="indefinite"/>
</rect>

3. Timing: dur, begin, repeatCount

Clock values (dur)

Duration uses clock-value syntax:

begin - when the animation starts

The begin attribute is surprisingly powerful. At its simplest, it's a time offset from document load:

<!-- Starts immediately -->
<animate ... begin="0s"/>

<!-- Starts 2 seconds after document load -->
<animate ... begin="2s"/>

<!-- Starts when parent element is clicked -->
<animate ... begin="click"/>

Click-to-start animation

Setting begin="click" means the animation waits until the user clicks the parent element (the one the <animate> is nested inside). No JavaScript needed:

<svg viewBox="0 0 400 120" xmlns="http://www.w3.org/2000/svg">
  <circle cx="80" cy="60" r="30" fill="coral" style="cursor:pointer">
    <animate attributeName="cx" from="80" to="320" dur="1s"
             begin="click" fill="freeze"/>
  </circle>
  <text x="200" y="110" text-anchor="middle"
        font-size="12">Click the circle</text>
</svg>

Chaining animations with event offsets

You can offset from any event trigger. begin="click+1.5s" means "1.5 seconds after the click." This lets you sequence multiple animations from a single user action:

<svg viewBox="0 0 400 120" xmlns="http://www.w3.org/2000/svg">
  <circle cx="50" cy="60" r="20" fill="coral" style="cursor:pointer">
    <!-- Step 1: move right (starts on click) -->
    <animate attributeName="cx" from="50" to="350" dur="1.5s"
             begin="click" fill="freeze"/>
    <!-- Step 2: shrink 1.5s after click (= when move finishes) -->
    <animate attributeName="r" from="20" to="8"
             dur="0.5s" begin="click+1.5s" fill="freeze"/>
  </circle>
</svg>

Syncbase timing (preview)

The spec also defines syncbase timing - referencing another animation by id:

<!-- Syncbase syntax (Lesson 10 will cover this in depth) -->
<animate id="anim1" attributeName="cx" from="50" to="300"
         dur="2s" fill="freeze"/>

<!-- Starts when anim1 ends -->
<animate ... begin="anim1.end"/>

<!-- Starts 0.5s AFTER anim1 ends -->
<animate ... begin="anim1.end+0.5s"/>

repeatCount - how many cycles

• repeatCount="3" - plays 3 times then stops
• repeatCount="indefinite" - loops forever
• repeatDur="10s" - keeps repeating until 10s total have elapsed (even mid-cycle)

4. The fill Attribute (Animation)

When a non-repeating animation ends, what should happen to the attribute?

<svg viewBox="0 0 400 120" xmlns="http://www.w3.org/2000/svg">
  <!-- fill="remove" (default)  -  snaps back -->
  <circle cx="80" cy="60" r="30" fill="coral">
    <animate attributeName="r" from="30" to="10" dur="2s"
             fill="remove" repeatCount="1"/>
  </circle>

  <!-- fill="freeze"  -  stays at final value -->
  <circle cx="250" cy="60" r="30" fill="#61afef">
    <animate attributeName="r" from="30" to="10" dur="2s"
             fill="freeze" repeatCount="1"/>
  </circle>
</svg>

5. Interpolation: calcMode

The calcMode attribute controls how the browser interpolates between values. This is SMIL's easing system.

calcMode="spline" with keySplines

For custom easing curves, set calcMode="spline" and provide keySplines. This uses the same cubic Bézier model as CSS cubic-bezier().

Each spline is four numbers: x1 y1 x2 y2 - the two control points of a cubic Bézier on a unit square where:

• X axis = normalised time within the segment (0 = start, 1 = end)
• Y axis = interpolation progress through the value change (0 = start value, 1 = end value)

This is a timing function, not a spatial curve. Unlike the Bézier curves in path commands (which define physical shapes in x/y space), this Bézier maps time to progress. The slope of the curve at any point represents the instantaneous velocity - a steep section means fast movement, a flat section means slow. You're not defining velocity directly; you're shaping the time-to-progress relationship, and velocity is its derivative.

Semicolons separate segments. If values has N entries, there are N−1 segments, so you need N−1 splines. For values="A;B;C" (2 segments): keySplines="<A→B curve>; <B→C curve>".

<svg viewBox="0 0 400 120" xmlns="http://www.w3.org/2000/svg">
  <!-- Linear (for comparison) -->
  <circle cx="30" cy="40" r="15" fill="grey" opacity="0.4">
    <animate attributeName="cx" values="30;370;30"
             dur="3s" repeatCount="indefinite"/>
  </circle>

  <!-- Spline-eased -->
  <circle cx="30" cy="80" r="15" fill="coral">
    <animate attributeName="cx"
             values="30;370;30"
             dur="3s"
             calcMode="spline"
             keyTimes="0;0.5;1"
             keySplines="0.42 0 1 1; 0 0 0.58 1"
             repeatCount="indefinite"/>
  </circle>
</svg>

6. keyTimes - Controlling Timing

keyTimes maps each value in the values list to a point in normalised time (0 to 1). It lets you spend more time on some segments and less on others.

<!-- values has 4 entries, so keyTimes needs 4 entries -->
<animate attributeName="cx"
         values="50;200;350;200"
         keyTimes="0;0.2;0.5;1"
         dur="4s"
         repeatCount="indefinite"/>
<!-- 
  0 → 0.2 (20% of 4s = 0.8s): cx goes 50 → 200 (fast)
  0.2 → 0.5 (30% of 4s = 1.2s): cx goes 200 → 350 (medium)
  0.5 → 1.0 (50% of 4s = 2.0s): cx goes 350 → 200 (slow)
-->

7. The <set> Element

<set> is a simplified animation that performs a discrete value change at a point in time. No interpolation, no duration needed - it just switches an attribute to a new value. Think of it as calcMode="discrete" with a single target value.

<circle cx="200" cy="60" r="30" fill="coral">
  <!-- Change colour to blue after 2 seconds -->
  <set attributeName="fill" to="#61afef" begin="2s" fill="freeze"/>
</circle>

<set> fully supports the begin attribute with all the same values as <animate> - time offsets, click events, and syncbase timing all work. This makes it ideal for click-driven state changes:

<!-- Colour change on click -->
<circle cx="100" cy="60" r="30" fill="coral" style="cursor:pointer">
  <set attributeName="fill" to="#61afef" begin="click" fill="freeze"/>
</circle>

<!-- Visibility toggle after a delay -->
<rect x="10" y="10" width="80" height="40" fill="coral">
  <set attributeName="visibility" to="hidden" begin="3s" fill="freeze"/>
</rect>

Cross-element triggers

The spec defines begin="elementId.click" for triggering an animation from a click on a different element. However, browser support for cross-element event references is unreliable (Chrome often ignores them). The workaround is to place the <set> inside the clickable element itself and target a different attribute, or use begin="click" directly on each element that should react. We'll explore cross-element orchestration patterns in Lesson 10.

For now, the reliable pattern is: <set> nested inside the element being clicked, controlling that same element:

<svg viewBox="0 0 300 100" xmlns="http://www.w3.org/2000/svg">
  <!-- Click to change colour (set is inside the clickable element) -->
  <rect x="50" y="20" width="200" height="60" rx="8"
        fill="coral" style="cursor:pointer">
    <set attributeName="fill" to="#61afef" begin="click" fill="freeze"/>
  </rect>
  <text x="150" y="57" text-anchor="middle"
        font-size="16" fill="white" pointer-events="none">Click me</text>
</svg>

Common uses for <set>:

• Toggling visibility or display at a specific time or on click
• Changing a href to swap images
• Switching class names for CSS-driven state changes
• Any non-interpolatable attribute (strings, enumerations)
• Button-driven state machines - combine multiple <set> elements to build toggle-style UI entirely in SVG

8. Animating Colour

Colour attributes (fill, stroke, stop-color) can be smoothly interpolated with <animate>. The browser handles the colour space interpolation:

<circle cx="200" cy="60" r="40" fill="coral">
  <animate attributeName="fill"
           values="coral;#61afef;#98c379;#e5c07b;coral"
           dur="6s" repeatCount="indefinite"/>
</circle>

9. Additive and Accumulative Animation

Two lesser-known but powerful attributes control how animated values combine:

additive and accumulate answer different questions:

• additive → "What do I do with the base attribute value within each cycle?" (replace: ignore it; sum: add to it)
• accumulate → "What do I do between repeat cycles?" (none: reset; sum: build on previous)

Think of it this way: additive controls the spatial reference (relative to where?) and accumulate controls the temporal reference (does each repeat reset or build?).

Concrete example - <rect x="100"> with from="0" to="50", repeatCount="3":

accumulate example

<!-- Without accumulate: bounces between 0 and 100 each cycle -->
<rect x="0" y="10" width="30" height="30" fill="coral">
  <animate attributeName="x" from="0" to="100" dur="2s"
           repeatCount="3" fill="freeze"/>
</rect>

<!-- With accumulate="sum": each cycle adds 100 more -->
<rect x="0" y="50" width="30" height="30" fill="#61afef">
  <animate attributeName="x" from="0" to="100" dur="2s"
           repeatCount="3" fill="freeze"
           accumulate="sum"/>
</rect>

additive example

<!-- additive="replace" (default): animated value IS the x value -->
<rect x="100" y="10" width="30" height="30" fill="coral">
  <animate attributeName="x" from="0" to="50" dur="2s"
           repeatCount="indefinite"/>
  <!-- x goes 0→50, ignoring the base x="100" -->
</rect>

<!-- additive="sum": animated value is ADDED to base x="100" -->
<rect x="100" y="60" width="30" height="30" fill="#61afef">
  <animate attributeName="x" from="0" to="50" dur="2s"
           additive="sum" repeatCount="indefinite"/>
  <!-- x goes (100+0)→(100+50) = 100→150 -->
</rect>

10. Multiple Animations on One Element

You can stack multiple <animate> children on the same element, each targeting a different attribute. They run independently and simultaneously:

<circle cx="200" cy="60" r="20" fill="coral">
  <!-- Animate position -->
  <animate attributeName="cx" values="50;350;50"
           dur="4s" repeatCount="indefinite"/>
  <!-- Animate size simultaneously -->
  <animate attributeName="r" values="20;35;20"
           dur="2s" repeatCount="indefinite"/>
  <!-- Animate opacity simultaneously -->
  <animate attributeName="opacity" values="1;0.4;1"
           dur="4s" repeatCount="indefinite"/>
</circle>

11. SMIL and the CSS Cascade

You might worry: if CSS overrides presentation attributes (Lesson 4), and SMIL animates attributes, won't CSS block SMIL? No - SMIL operates at a higher priority than both.

The actual priority order (highest wins):

1. SMIL animation (special "override" layer - always wins while active)
2. CSS !important
3. CSS specificity (stylesheets, <style> blocks)
4. Presentation attributes (fill="coral")
5. Inherited values

<style>
  .styled { fill: blue; }  /* CSS wins over presentation attr */
</style>

<circle class="styled" fill="red" cx="100" cy="60" r="30">
  <!-- SMIL wins over CSS  -  circle animates to green -->
  <animate attributeName="fill" to="green" dur="2s"
           fill="freeze"/>
</circle>
<!-- Priority: SMIL (green) > CSS (blue) > attribute (red) -->

12. What Can (and Can't) Be Animated

SMIL can animate any presentation attribute or geometry attribute that takes a numeric or colour value. Some examples:

13. Practical Example: Breathing Circle

Combining the techniques covered so far into a polished, production-quality animation:

<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
  <circle cx="100" cy="100" r="40" fill="none"
          stroke="coral" stroke-width="3" opacity="0.8">
    <!-- Radius breathes in and out -->
    <animate attributeName="r" values="40;60;40"
             dur="4s" calcMode="spline"
             keyTimes="0;0.5;1"
             keySplines="0.4 0 0.2 1; 0.4 0 0.2 1"
             repeatCount="indefinite"/>
    <!-- Opacity pulses gently -->
    <animate attributeName="opacity" values="0.8;0.3;0.8"
             dur="4s" calcMode="spline"
             keyTimes="0;0.5;1"
             keySplines="0.4 0 0.2 1; 0.4 0 0.2 1"
             repeatCount="indefinite"/>
    <!-- Stroke thins as it expands -->
    <animate attributeName="stroke-width" values="3;1;3"
             dur="4s" repeatCount="indefinite"/>
  </circle>
</svg>

14. Practical Example: Loading Spinner

<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
  <circle cx="50" cy="50" r="40" fill="none"
          stroke="#61afef" stroke-width="6"
          stroke-dasharray="200" stroke-dashoffset="200"
          stroke-linecap="round">
    <!-- Draw the stroke -->
    <animate attributeName="stroke-dashoffset"
             values="200;0;200" dur="2s"
             repeatCount="indefinite"/>
  </circle>

  <!-- Rotate the whole circle for spin -->
  <animateTransform attributeName="transform" type="rotate"
    values="0 50 50;360 50 50" dur="1.5s"
    repeatCount="indefinite"
    xlink:href="circle"/>
</svg>

15. Browser Support & the "Deprecated" Myth

You may have read that SMIL is "deprecated." Here's the actual situation:

• Chrome announced deprecation intent in 2015, then reversed it in 2016. SMIL remains fully supported.
• Firefox - full support, never threatened removal.
• Safari - full support.
• Edge (Chromium) - full support (same engine as Chrome).
• IE - never supported SMIL. IE is dead, so this doesn't matter.

SMIL is not deprecated in any current browser. The SVG 1.1 spec defines it, and the SVG Animations Level 2 spec is actively developed. For self-contained SVG animations, SMIL remains the best tool.

16. SMIL vs CSS vs JavaScript - When to Use What

The browser has three completely independent animation systems. They're not wrappers around each other - each has its own spec, its own engine, and its own strengths:

Decision guide

Performance differences

The key performance distinction is where the animation runs in the rendering pipeline:

CSS transform and opacity are special - the browser promotes the element to its own compositor layer (a GPU texture) and animates it without touching the main thread. No repaint, no relayout. That's why they hit smooth 60fps even on a busy page. Everything else - including SMIL and CSS animating fill/stroke - triggers a CPU repaint each frame.

Quiz

Exercises

1. Pulsing dot - Create a circle that pulses its radius and opacity in a breathing pattern using calcMode="spline" for natural easing. Make it feel alive, not mechanical.
2. Colour cycle - Animate a rectangle's fill through 5 colours of your choice over 10 seconds, looping indefinitely.
3. Progress bar - A horizontal rect whose width animates from 0 to full width over 3 seconds, then freezes. Use fill="freeze".
4. Bouncing ball - Animate a circle's cy with values and keySplines to create a realistic bounce (fast at bottom, slow at top). Hint: use ease-in on the way down and ease-out on the way up.
5. Polyrhythm - Put 3 animations on one element with durations 3s, 4s, and 5s. Observe how long it takes before the pattern repeats exactly.