Making a tooltip appear when the cursor hovers over an icon, revealing a hidden panel on click, flipping a status badge’s color from neutral grey to solid green with no visible transition: none of these are about smoothly animating a value, they are about switching it from one state to another at a precise moment. That is exactly what <set> does, the simplest animation element in SVG.
While most SVG animation elements interpolate a value between a starting point and an ending point, <set> does nothing of the sort: it sets an attribute to a given value, at a given moment, full stop. No transition, no easing curve, no in-between steps.
Definition
<set> is a SMIL animation element that sets an attribute’s value at a precise moment, with no interpolation whatsoever. Like <animate>, it sits inside the element it modifies, taking an attributeName to name the target attribute and a to attribute for the value being applied. There is no from attribute on <set>, since there is simply nothing to interpolate between a start and an end: the value flips in one go, at the moment defined by begin, and stays that way until dur runs out.
Main attributes
| Attribute | Role |
|---|---|
attributeName | The target attribute, for example visibility, display or fill. |
to | The value applied in one go, with no transition. |
begin | The moment or event that triggers the change, for example a delay or a click. |
dur | How long the new value stays active. |
fill | freeze keeps the value after dur, remove (the default) jumps back to the original value. |
A concrete example
Here is an icon paired with a tooltip <text>, hidden by default, that appears instantly the moment the cursor hovers over the icon, with no fade at all.
<svg viewBox="0 0 220 80" xmlns="http://www.w3.org/2000/svg">
<rect id="icone" x="20" y="20" width="40" height="40" rx="8" fill="#2563eb" />
<text x="72" y="45" font-size="14" fill="#111827" visibility="hidden">
Tip available here
<set
attributeName="visibility"
to="visible"
begin="icone.mouseover"
dur="2s"
/>
</text>
</svg>How it differs from <animate>
The difference with <animate> comes down entirely to the word interpolation. <animate> builds a path of values between from and to, smoothly, over the duration set by dur: a width grows gradually from 0 to 200 pixels, an opacity slides from 1 to 0. <set> builds nothing of the kind: it accepts no from, no values, none of the easing curves you can tune elsewhere with keySplines. It flips a value, a final point treated as such, with no detour. That makes sense for attributes that have no meaningful in-between state: an element cannot be half visible or half display: block, whereas it can perfectly well be half transparent.
A classic pitfall
The most common trap is writing a from attribute on a <set>, hoping for a gradual transition between two values: that attribute is simply ignored, since <set> cannot interpolate anything at all. The second trap involves fill: without fill="freeze", the value set by <set> reverts to its original state once dur runs out, which can make a panel revealed on click look like it closes itself a few seconds later for no apparent reason, to anyone who has not read the documentation.
<set> silently ignores any from attribute placed on it: if a gradual transition is needed, <animate> is the element to reach for, never <set>.A real use case
A tooltip that appears instantly when the cursor hovers over an icon, with no fade and no delay, for immediate feedback. A status badge whose fill attribute flips from neutral grey to solid green the moment a task turns to done, with no color transition slowing down the reading of the information. An element whose display attribute switches from none to inline to reveal a menu on click, a binary toggle for which a gradual interpolation would not make any visual sense anyway.
<set> produce a fade transition?No, <set> supports no interpolation at all: the value changes instantly, with no intermediate step. For a gradual fade, use <animate> on the opacity attribute, with a from attribute and a to attribute.
begin attribute do on a <set>?It defines when the value change should happen: a fixed delay such as begin="2s", or an event such as begin="myButton.click", which triggers <set> precisely on a click made on another element of the document.
<set> target any attribute in the SVG?In theory yes, but it is mostly useful for attributes with no meaningful in-between value, such as visibility, display or href. For a color, a width or a position, <animate> or <animateTransform> produce a far more natural result thanks to their gradual interpolation.