The transform attribute does a geometric transformation to a shape. The syntax is this:

transform="function1(…) function2(…) …"

By default, SVG provides these functions: {translate(…), scale(…), reflect(…), rotate(…), …}.

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 to the whole coordinate system. 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 Transformation

multiple transformations can be combined, like this:

<… transform="f1f2 …" />

Note: the transformation is performed with the last function first. 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).