A logo that spins endlessly on a loading screen, a badge that grows slightly to catch the eye, an icon that slides gently to reveal a menu: all three effects come from the same native SVG element, <animateTransform>, which animates a full geometric transform rather than a plain color or size attribute.
Despite what its name might suggest, <animateTransform> does not do everything at once. Each <animateTransform> element can only animate one type of transformation at a time, a rotation, a scale, a translation or a skew, never several combined inside the same element. That detail often surprises developers coming from CSS, where a single transform property happily accepts several functions chained together.
Definition
<animateTransform> is a SMIL animation element specialised in the transform attribute. It requires a type attribute, which spells out exactly which transformation is being animated: rotate, scale, translate, skewX or skewY. That constraint exists because a transform is not a simple interpolatable number like a width or an opacity: a rotation is described by an angle and a center point, a translation by an x and y offset, a scale by a factor, all different data shapes that the browser needs to interpolate correctly based on the declared type.
Main attributes
| Attribute | Role |
|---|---|
type | The transformation being animated: rotate, scale, translate, skewX or skewY. Required. |
from / to | Starting and ending values, in the format specific to the chosen type, for example angle center-x center-y for rotate. |
dur | Total duration of the animation. |
repeatCount | Number of repetitions, or indefinite for an endless loop. |
additive | sum lets the effect stack on top of a transform already present on the element, instead of replacing it. |
A concrete example
Here is a <rect> spinning endlessly around its center, a classic pattern for a subtle loading indicator.
<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
<rect x="40" y="40" width="20" height="20" fill="#2563eb">
<animateTransform
attributeName="transform"
type="rotate"
from="0 50 50"
to="360 50 50"
dur="1s"
repeatCount="indefinite"
/>
</rect>
</svg>How it differs from <animate> and <animateMotion>
It is fair to ask why not simply use <animate> with attributeName="transform". Historically that was not possible: <animate> can interpolate numbers, colors or lists of numbers, but not a transform matrix that bundles rotation, translation and scale into a single value. <animateTransform> was introduced precisely to fill that gap, with interpolation logic tailored to whichever type is declared. Since SVG2, some browsers accept animating transform directly with <animate>, but <animateTransform> remains the safest and most broadly compatible choice. One more useful distinction: unlike <animateMotion>, which makes an element follow a curved path, <animateTransform> is limited to simple geometric transforms applied around a fixed point, with no notion of a trajectory.
A classic pitfall
The most common trap is trying to combine several transforms inside a single element, for instance writing type="rotate scale", a syntax that simply does not exist in the specification. To rotate AND scale an element at the same time, you need two separate <animateTransform> elements on the same target, one with type="rotate", the other with type="scale", each carrying additive="sum" so the two effects stack instead of overwriting each other.
<animateTransform> can only animate one transformation type at a time: combining a rotation and a scale requires two separate elements, each with additive="sum".A real use case
A circular loading indicator that spins endlessly while a network request is in flight. An action button that grows just slightly on hover to feel more tactile, an effect often recreated more simply in CSS but perfectly achievable in pure SMIL for a standalone SVG. A menu icon that slides sideways to reveal a hidden panel, without depending on any external script.
<animateTransform>?Not with a single element: each <animateTransform> is limited to one transformation type declared in its type attribute. To combine two effects, add a second element with a different type and additive="sum" on both, so their effects add up instead of cancelling each other out.
type attribute is missing from <animateTransform>?The animation produces no visible effect at all: type is required so the browser knows how to interpret the from and to values, otherwise it cannot tell whether it should compute a rotation, a translation or a scale.
That is often the simpler route when the SVG is inline in a page where CSS is already loaded. But <animateTransform> keeps a real advantage: it keeps working even when the SVG stands alone, is used as a standalone icon, or sits in a context with no external stylesheet available at all.