SMIL Animation: <animate> & <set>
SMIL (Synchronized Multimedia Integration Language) is a set of native XML tags that allow you to define animations directly inside your SVG code. The most fundamental of these is the <animate> tag.
One of the biggest advantages of SMIL is that the animation logic stays entirely within the SVG file, making it self-contained and portable.
The <animate> Tag
To animate an element, you nest the <animate> tag inside the shape you want to affect. It uses several key attributes to control the behavior:
| Attribute | Description |
|---|---|
attributeName |
The property to animate (e.g., cx, fill, opacity). |
from / to |
The start and end values for the animation. |
values |
A semicolon-separated list of values for multi-step animations (overrides from/to). |
dur |
The duration (e.g., 2s, 500ms). |
repeatCount |
How many times it repeats (indefinite for looping). |
The <set> Tag
The <set> tag is a simplified version of <animate>. While <animate> interpolates values (like smoothly sliding a shape), <set> simply "jumps" to a new value after a specific event or time. It is used for discrete (non-interpolated) changes, such as toggling visibility or flipping a color instantly.
Example: Basic SMIL Animations
The circle below uses <animate> to move and change color. The rectangle uses <set> to instantly change color when you hover over it.
When to use SMIL?
SMIL is excellent when you want your graphics to be self-animating without external CSS or JS dependencies. It also excels at animating complex SVG attributes that CSS cannot touch, such as path data (for shape morphing).