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(xy)"

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 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 is a square and screw y result.

Combine Transformations

multiple transformations can be combined, like this:

transform="…f3f2f1"

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