SVG: Coordinate Transformation

By Xah Lee. Date: 2014-07-25. Last updated: 2017-12-19.

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

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

By default, SVG provides these transformation functions:

translate(…)
scale(…)
reflect(…)
rotate(…)
and more.

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)

Liket it? Put $5 at patreon.

Or, Buy JavaScript in Depth

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