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(α)" → rotate by α degrees around the origin. Positive α is clockwise.

Rotate Around a Point

transform="rotate(αxy)" → 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's a square and screw y result.

Combine Transformations

multiple transformations can be combined, like this:

transform="f2f1 …"

Note: the transformation is performed with the last function first. (same convension as in group theory or linear algebra matrix multiplication) In the above, the order is f2, f1.

Here's a rectangle.

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

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