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

transform="translate(x y)"
Move it x unit to the right and y unit down.
<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, with respect to the origin.
transform="scale(s1, s2)"
Scale x by factor of s1, Scale y by factor of s2. 
<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 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>
∑ JS in Depth
XAH  BUY NOW

SVG tutorial

Canvas Intro