# 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:

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

Here are examples.

## Translation

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

## Scale

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

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}.

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

## Rotate Around Origin

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

## Rotate Around a Point

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

## Skew X

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

## Skew Y

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

Here's a square and screw y result.

## 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.

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

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

## Reference

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

#### Canvas Intro

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.