# 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

`transform="translate(x y)"`
Move it x unit to the right and y unit down.

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

Here is another example. Notice that we start with a circle centered at {10,10}. After scaling, its center changed. Because transformation is done 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(α)"`
Rotate by α degrees around the origin. Positive α is clockwise.

## Rotate Around a Point

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

## Skew X

`transform="skewX(α)"`
Skew x coordinate by α degrees.

## Skew Y

`transform="skewY(α)"`
Skew y coordinate by α degrees.

Here is 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 is a rectangle.

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

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