SVG transforms explained: translate, scale, rotate, skew, and matrix

What a transform changes

An SVG transform does not normally rewrite a path's d values. It maps the element's local coordinates into a new position, angle, or scale during rendering. That distinction matters when source coordinates look unchanged even though the artwork has moved.

<rect x="10" y="10" width="60" height="40"
      transform="translate(80 20)" />

The rectangle still begins at 10,10 in its own coordinate system. Translation adds 80 horizontally and 20 vertically, so it appears at 90,30 in the parent system. Keeping geometry and placement separate is especially useful for repeated icons and grouped illustrations.

Translate and scale

translate(tx ty) moves an element. When the second value is omitted, vertical movement is zero. scale(sx sy) multiplies coordinates and dimensions. With one value, both axes use the same scale.

<g transform="translate(40 30) scale(1.5)">
  <circle cx="20" cy="20" r="16" />
</g>

Scaling around the coordinate origin can make an object appear to jump. A circle centered at 20,20 becomes centered at 30,30 under a scale of 1.5. To scale around a chosen point, translate that point to the origin, scale, and translate back. Visual editors often perform this three-step calculation for you.

Rotate around the right pivot

rotate(angle cx cy) rotates by degrees around an optional pivot. Without a pivot, rotation happens around 0,0, not around the element's visual center.

<rect x="50" y="40" width="80" height="30"
      transform="rotate(25 90 55)" />

The pivot 90,55 is the rectangle's center. For an irregular path, use its bounding-box center only if that matches the desired visual motion. A logo may need a hand-chosen optical center. If a rotated object swings in a wide circle, the missing or incorrect pivot is usually the cause.

Transform order is not interchangeable

Transform functions are composed into one matrix. Changing their order changes the coordinate system seen by later operations. Compare a move followed by a scale with a scale followed by a move. In one case the translation itself is scaled; in the other it is not.

<!-- Different results -->
transform="translate(80 0) scale(2)"
transform="scale(2) translate(80 0)"

When the result is confusing, place each transform on a nested group. One group can translate, its child can rotate, and the element can scale. The nesting makes each coordinate system visible in the markup and reduces accidental changes.

Skew and matrix values

skewX(angle) and skewY(angle) slant one axis. They are useful for controlled perspective-like effects, but large angles can create extreme bounds. Every transform can be represented as matrix(a b c d e f). The first four values describe scaling, rotation, and skew; e and f describe translation.

Matrix form is compact and precise, but it hides intent. Keep named transforms while authoring when humans need to edit the source. Accept matrix output when importing from design tools, but record the original geometry before trying to reverse a complex matrix by hand.

SVG transform attributes and CSS transforms are related but not identical

The SVG transform attribute works in the element's SVG coordinate system. CSS also has a transform property, and when both target the same element the CSS property takes precedence. CSS origin behavior can additionally depend on transform-origin and transform-box, so copying a transform string between markup and a stylesheet is not always neutral.

For portable source, use the SVG attribute when the transform is part of the artwork's geometry and test CSS transforms in their final embedding context. The current MDN transform reference also notes that SVG 2 permits the attribute on the root svg element, while older SVG 1.1-era targets may need a wrapper group.

Transforms, strokes, and export

Scaling normally scales stroke width too. Add vector-effect="non-scaling-stroke" when a line should remain the same screen thickness as its geometry changes. Filters, clipping paths, and gradients may use their own coordinate systems, so inspect those resources if a transformed object has an unexpected paint or crop.

1. Identify the intended pivot and parent coordinate system.
2. Apply one operation at a time.
3. Use nested groups when order needs to stay understandable.
4. Check stroke width, filters, clips, and bounds after scaling.
5. Export and reopen the SVG to verify the saved transform.

Try the transform controls in the SVG Vector Lab editor, then inspect the resulting attribute beside the canvas. For framing problems after a transform, use the viewBox debugging guide.