SVG: Coordinate Transformation

By Xah Lee. Date: . Last updated: .

The transform attribute does a geometric transformation to a shape. The syntax is this:

transform="function1(…) function2(…) …"

By default, SVG provides these transformation functions:

Here are examples.

Translation

here's a example using transform="translate(20 40)".

<svg width="100" height="100">

<rect x="0" y="0" width="10" height="20"
 style="fill:gray"
/>

<rect x="0" y="0" width="10" height="20"
 style="fill:blue;"
 transform="translate(20 40)"/>

</svg>

Scale

transform="scale(s)" → scale uniformly by factor of s.

<svg width="100" height="100">

<circle cx="0" cy="0" r="10" style="fill:none; stroke:gray" />

<circle cx="0" cy="0" r="10" style="fill:none; stroke:blue" transform="scale(2)" />

</svg>

Here's another example. Notice that we start with a circle centered at {10,10}. After scaling, its center changed. Because transformation is done with with respect to {0,0}. That is, any point {x,y} become {x * s, y * s}.

<svg width="100" height="100">

<circle cx="10" cy="10" r="10" style="fill:none; stroke:gray" />

<circle cx="10" cy="10" r="10" style="fill:none; stroke:blue" transform="scale(2)" />

</svg>

You can scale the x and y coordinate separately, by transform="scale(s1, s2)".

<svg width="100" height="100">

<circle cx="10" cy="10" r="10" style="fill:none; stroke:gray" />

<circle cx="10" cy="10" r="10" style="fill:none; stroke:blue" transform="scale(2, 3)" />

</svg>

Rotate Around Origin

transform="rotate(alpha)" → rotate by alpha degrees around the origin. Positive alpha is clockwise.

<svg width="100" height="100">

<rect x="50" y="0" width="10" height="20"
 style="fill:none; stroke:gray;"
/>

<rect x="50" y="0" width="10" height="20"
 style="fill:blue;"
 transform="rotate(30)"/>

<rect x="50" y="0" width="10" height="20"
 style="fill:red;"
 transform="rotate(60)"/>

</svg>

Rotate Around a Point

transform="rotate(alpha x y)" → rotate by alpha degrees, around point {x,y} Positive alpha is clockwise.

<svg width="100" height="100">

<rect x="50" y="0" width="10" height="20"
 style="fill:none; stroke:gray;"
/>

<rect x="50" y="0" width="10" height="20"
 style="fill:blue;"
 transform="rotate(30 50 0)"/>

<rect x="50" y="0" width="10" height="20"
 style="fill:red;"
 transform="rotate(60 50 0)"/>

</svg>

Skew X

transform="skewX(alpha)" → skew x coordinate by alpha degrees.

<svg width="100" height="100">

<rect x="10" y="10" width="30" height="30"
 style="fill:none; stroke:gray;"
/>

<rect x="10" y="10" width="30" height="30"
 style="fill:none; stroke:blue;"
 transform="skewX(20)"
/>

</svg>

Skew Y

transform="skewY(alpha)" → skew y coordinate by alpha degrees.

Here's a square and screw y result.

<svg width="100" height="100">

<rect x="10" y="10" width="30" height="30"
 style="fill:none; stroke:gray;"
/>

<rect x="10" y="10" width="30" height="30"
 style="fill:none; stroke:blue;"
 transform="skewY(20)"/>

</svg>

Combine Transformations

multiple transformations can be combined, like this:

transform="… f3 f2 f1"

Note: the transformation is performed with the right-most function first. (same convention as in group theory or linear algebra matrix multiplication)

Here's a rectangle.

<svg width="100" height="100">
<rect x="0" y="0" width="10" height="20" />
</svg>

Here's a rectangle, translated then rotated (in that order).

<svg width="100" height="100">
<rect x="0" y="0" width="10" height="20"
 style="fill:blue;"
 transform="rotate(30) translate(40 0)" />
</svg>

Here's a rectangle, rotated then translated (in that order).

<svg width="100" height="100">
<rect x="0" y="0" width="10" height="20"
 style="fill:red;"
 transform="translate(40 0) rotate(30)" />
</svg>

Reference

Coordinate Systems, Transformations and Units – SVG 1.1 (Second Edition)

SVG tutorial

  1. SVG Basics
  2. Path
  3. Path Elliptical Arc
  4. Circle Arc
  5. Specifying Styles
  6. Shape Styles
  7. Viewport
  8. viewBox
  9. Coordinate Transformation
  10. Text Element
  11. Font Size
  12. Structure Elements
  13. Scripting SVG
  14. SVG Clock
  15. Animation

Canvas Intro

  1. Canvas vs SVG
  2. Canvas intro
  3. Demo: Halma
  4. Demo: Raycaster
Liket it? I spend 2 years writing this tutorial. Help me spread it. Tell your friends. Or, Put $5 at patreon.

Or, Buy JavaScript in Depth

If you have a question, put $5 at patreon and message me.

Web Dev Tutorials

  1. HTML
  2. Visual CSS
  3. JS in Depth
  4. JS Object Ref
  5. DOM Scripting
  6. SVG
  7. Blog