SVG transform animations: rotate, scale, and translate
SVG transforms unlock lively motion for icons, logos, and UI illustrations without heavyweight libraries. This practical guide covers rotate, scale, and translate—how to apply them
SVG transform animations: rotate, scale, and translate
SVG transforms unlock lively motion for icons, logos, and UI illustrations without heavyweight libraries. This practical guide covers rotate, scale, and translate—how to apply them, which techniques work best, and how to combine them for expressive interaction. If you’re looking for design-minded SVG resources, see more at SVGenious.
Understanding SVG transforms: rotate, scale, translate
SVG transforms are applied via the transform attribute or CSS transform on svg elements and their children. The three core operations are:
- Rotate — turns the element around a point. Syntax:
rotate(angle [cx cy]) - Scale — grows or shrinks the element. Syntax:
scale(sx [sy]) - Translate — moves the element along the x/y axis. Syntax:
translate(tx [ty])
Tip: When animating with SMIL animateTransform (native SVG animation), you can target a transform type like rotate or translate. For broader browser coverage and easier integration with CSS, many teams favor CSS animations on SVG shapes or groups (g).
Rotating SVGs: simple and expressive
Rotation is a natural way to add emphasis. Start with a centered group and rotate around a pivot. You can animate the angle from 0 to 360 degrees to create a full spin.
Alternative with CSS for broader support (and easier tweaking):
Scaling for emphasis or responsive visuals
Scale is great for hover effects or subtle motion that preserves layout. Use scale to enlarge a glyph without changing its position if you scale about the center.
CSS approach for scale on hover:
Translating objects: motion across the canvas
Translation moves elements without altering their size or orientation. It’s perfect for parallax cues or slide-in effects from the edge of the viewport.