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(α)" → rotate by α degrees around the origin. Positive α 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(α x y)" → rotate by α degrees, around point {x,y} Positive α 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(α)" → skew x coordinate by α 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(α)" → skew y coordinate by α 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 convension 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. Specifying Styles
  5. Shape Styles
  6. Viewport
  7. viewBox
  8. Coordinate Transformation
  9. Text Element
  10. Font Size
  11. Structure Elements
  12. Scripting SVG
  13. SVG Clock
  14. Animation
Liket it? 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 Reference
  5. DOM
  6. SVG
  7. Web Dev Blog