# SVG: Coordinate Transformation

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(`

→ scale uniformly by factor of `s`)"`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(`

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

## Rotate Around a Point

`transform="rotate(`

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

## Skew X

`transform="skewX(`

→ skew x coordinate by `alpha`)"`alpha` degrees.

## Skew Y

`transform="skewY(`

→ skew y coordinate by `alpha`)"`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)

#### SVG tutorial

- SVG Basics
- Path
- Path Elliptical Arc
- Circle Arc
- Specifying Styles
- Shape Styles
- Viewport
- viewBox
- ViewBox Unit Size
- Coordinate Transformation
- Text Element
- Font Size
- Structure Elements
- Scripting SVG
- SVG Clock
- Animation

#### Canvas Intro

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