It is possible to transform any shape created in SVG. The possible transformations include

• translation: moving an object horizontally and/or vertically
• rotation: rotating an object about some point
• scaling: making an object larger or smaller, either uniformly or non-uniformly
• skewness: skewing the shape of an object

A transform can be applied to a variety of items, including groups, definitions, basic shapes such as circles or rectangles, shapes that has been constructed, lines, text, and <use> elements. This is done with the attribute transform=”transformation list” where the transformation list includes one or more transformations.

ATTENTION! The transform not only reshapes or repositions the object in question, it alters the object’s coordinate space as well. This may lead to unexpected outcomes which can be hard to understand. I just play around with the various transform parameters until I get the desired effect.

Translation

transform="translate(changex,changey)"

The values change_x and change_y describe how many units horizontally and vertically to move the object. If only change_x is given, then change_y is assumed to be 0.

Example

The following image shows a blue rectangle which is sitting in its original position and a red rectangle which has the same coordinates but has been translated 250 units to the right and 150 units down.

Rotation

transform="rotate(angle,centrex,centrey)

The value angle is measured in degrees clockwise. The point (centre_x,centre_y) is the point about which the rotation takes place. If it is not specified, it is taken to mean the origin of the current user coordinate system.

Examples

The following image shows an unrotated rectangle (blue outline) and a rotated rectangle (transparent red). The red rectangle is rotated 15° clockwise around the origin of the coordinate system (upper left corner).

The next image also shows an unrotated rectangle (blue outline) and a rotated rectangle (transparent red). This time the red rectangle is rotated 15° clockwise around the centre of the unrotated rectangle. [In this example, the centre of the rectangle is (250,150).]

Scaling

transform="scale(scalex,scaley)"

The scaling function scales both the dimensions and the position coordinates of a shape. It also scales the stroke width. The values scale_x and scale_y describe the scaling in the x- and y-directions. If only scale_x is given, then scale_y is assumed to be equal to scale_x.

Examples

In the following examples, the original rectangle is the blue outline and the scaled rectangle is the red outline. In the first instance, the red rectangle is scaled by a factor of 2 in both directions.

In the second instance, the red rectangle is scaled by a factor of 3 in the x-direction and a factor of 2 in the y-direction.

In the third instance, the red rectangle is scaled by a factor of 0.5 in both directions. Scaling can magnify or reduce the original object.

Finally, we see the effect of a negative scaling factor. This produces a reversed image but interestingly, does not affect the stroke width. In this example, a scaling factor of −1 is applied in the x-direction whilst a scaling factor of 1 is applied in the y-direction. A scaling factor of 1 neither magnifies nor diminishes.

Skewness

transform="skewX(angle)"
transform="skewY(angle)"

The value angle gives the angle in degrees by which a figure is skewed, either in the x-direction or the y-direction. However, because the coordinate system itself is being skewed, the figure will be repositioned as well.

Examples

The blue rectangle is unskewed. The transparent yellow rectangle has a skew of 15° in the x-direction. The transparent red rectangle has a skew of −50° in the x-direction.

The skewY parameter has a similar effect. Again, the blue rectangle is unskewed. The transparent yellow rectangle has a skew of 5° in the y-direction. The transparent red rectangle has a skew of −30° in the y-direction.

Matrix format

It is also possible to express transformations as a 3 × 3 matrix in which you specify the top two rows. However, since I never use that notation, I will not discuss it further.

Combining transformations

It is possible to apply multiple transformations to an object but the order in which you list them is significant. This is because of the alteration of the object’s coordinate space. The second transform takes place in the first transform’s coordinate space, the third transform takes place in the first and second transform’s coordinate space, and so on.

Example

The blue rectangle is the original untransformed object. If we move it 400 units to the right and then rotate it 60°, we get the yellow rectangle. However, if we first rotate it 60° and then move it 400 units to the right, we get the red rectangle.