How SMIL Animate Works in SVG

Synchronized Multimedia Integration Language (SMIL) allows developers to animate Scalable Vector Graphics (SVG) directly within XML markup without relying on external CSS keyframes or JavaScript. By embedding the <animate> element inside or linked to an SVG shape, you can transition numerical values, colors, coordinates, and transformation attributes over specified timeframes. This guide explains the core mechanisms, essential attributes, and execution lifecycle of the SMIL <animate> element.

The Basic Mechanism of <animate>

The <animate> element functions by targeting a specific attribute of an SVG element and interpolating its value from a starting state to an ending state over a defined duration.

To apply an animation, the <animate> tag is typically nested directly inside the target SVG element (such as a <circle>, <rect>, or <path>):

<svg width="200" height="200" viewBox="0 0 200 200">
  <circle cx="50" cy="100" r="30" fill="blue">
    <animate 
      attributeName="cx" 
      from="50" 
      to="150" 
      dur="2s" 
      repeatCount="indefinite" />
  </circle>
</svg>

Alternatively, the element can target an external node using the href (or legacy xlink:href) attribute referencing the target element’s id.

Key Attributes Controlling Transitions

The SMIL engine relies on specific attributes to calculate and render transitions:

• attributeName: Specifies the exact XML attribute or CSS property to animate (e.g., cx, y, width, fill, opacity, d).
• from and to: Define the initial and final values of the transition. The browser parses these values and computes the intermediate frames mathematically.
• by: Specifies a relative offset value instead of an absolute target (e.g., increasing a radius by="20").
• values: Accepts a semicolon-separated list of values (e.g., values="50; 150; 50") to create multi-step keyframe sequences without multiple animation tags.
• dur: Defines the duration of one full animation cycle using standard time units such as seconds (2s) or milliseconds (500ms).
• repeatCount: Determines the number of iterations, accepting a numeric count (e.g., 3) or indefinite for continuous looping.

Timing, Triggers, and Fill Modes

SMIL offers powerful synchronization controls for starting, ending, and persisting visual states:

Triggering with begin and end

The begin attribute sets when the transition starts. It can be a fixed clock time (begin="0s"), a delayed time (begin="2s"), or an event-based trigger. Event triggers allow interaction handling directly in markup, such as begin="click" or begin="button.click+0.5s".

Maintaining State with fill

By default, an animated attribute resets to its original value when the duration ends. Setting fill="freeze" instructs the renderer to retain the final animated state (to value) after completion. The default value is fill="remove".

Advanced Interpolation and Pacing

The SMIL engine determines transition pacing via the calcMode attribute:

• linear (default): Interpolates values evenly across the duration.
• discrete: Jumps instantly from one value to the next without interpolation.
• paced: Produces an even rate of change through a list of values, ignoring custom timing.
• spline: Enables custom cubic-bezier easing curves, defined in conjunction with keyTimes and keySplines attributes for fine-tuned acceleration and deceleration.

Through these combined declarative parameters, the SVG rendering engine continuously calculates intermediate attribute values on the compositor level, delivering smooth vector transitions while keeping the animation self-contained within the SVG file format.