Guide to the SVG animateTransform Element in SMIL

This article explains the function and usage of the <animateTransform> element within Synchronized Multimedia Integration Language (SMIL) for SVG. It covers how <animateTransform> controls geometric transformations—such as translation, rotation, scaling, and skewing—over time, outlines its core attributes, and highlights how it differs from standard SVG animation elements to create dynamic, scalable vector graphics.

What is the <animateTransform> Element?

The <animateTransform> element is a dedicated SMIL animation element designed specifically to animate transformation attributes on target SVG elements. While standard SVG attributes like coordinates (x, y) or styles (opacity, fill) can be animated using the <animate> tag, the transform attribute requires specialized handling.

Because SVG transformations often involve coordinate matrices and parameters (such as rotation angles and center points), <animateTransform> allows developers to interpolate these transform operations smoothly over a specified duration without requiring external JavaScript or CSS.

Supported Transformation Types

The type attribute specifies the category of transformation being applied. The <animateTransform> element supports five primary transformation types:

• translate: Animates the movement of an element along the X and Y axes (<tx> [<ty>]).
• scale: Animates the resizing of an element uniformly or non-uniformly (<sx> [<sy>]).
• rotate: Animates the rotation angle around a specified origin point (<rot-angle> [<cx> <cy>]).
• skewX: Animates the shear transformation along the X-axis by a specified angle.
• skewY: Animates the shear transformation along the Y-axis by a specified angle.

Key Attributes of <animateTransform>

To control the timing, values, and behavior of the transformation, <animateTransform> relies on several core attributes:

• attributeName: Must be set to "transform" to target the transform attribute of the parent or referenced element.
• type: Defines the specific transform operation (translate, scale, rotate, skewX, or skewY).
• from, to, and by: Specify the starting, ending, or relative transformation values.
• values: A semicolon-separated list of values used to define more complex keyframe sequences.
• dur: Defines the duration of the animation (e.g., 3s, 500ms).
• repeatCount: Determines how many times the animation runs, often set to a specific number or "indefinite" for continuous looping.
• additive: Determines whether the animation overrides previous transformations (replace, the default) or adds to them (sum). Setting additive="sum" is essential when stacking multiple transformations on the same element.

How <animateTransform> Differs from <animate>

The standard <animate> element modifies scalar attributes, colors, or direct path data over time. However, it cannot correctly parse or interpolate the multi-parameter syntax of the transform attribute (such as a 3-value rotation: angle, center-x, center-y).

The <animateTransform> element understands the mathematical rules of 2D transformation matrices. It ensures that operations like rotating around an offset anchor point or compounding scaling and translation are rendered properly throughout the animation cycle.