Now we're ready to start distorting our beautiful images. But first, let's formally introduce the `<g>`

element. With this helper, you can assign properties to a complete set of elements. Actually, that's its only purpose. An example:

<svg width="30" height="10"> <g fill="red"> <rect x="0" y="0" width="10" height="10" /> <rect x="20" y="0" width="10" height="10" /> </g> </svg>

All following transformations are summed up in an element's `transform`

attribute. Transformations can be chained simply by concatenating them, separated by whitespace.

## Translation

It may be necessary to move an element around, even though you can position it with the according attributes. For this purpose, the `translate()`

transformation stands ready.

<svg width="40" height="50" style="background-color:#bff;"> <rect x="0" y="0" width="10" height="10" transform="translate(30,40)" /> </svg>

The example will render a rectangle, translated to the point (30,40) instead of (0,0).

If the second value is not given, it is assumed to be `0`.

## Rotation

Rotating an element is quite a common task. Use the `rotate()`

transformation for this:

<svg width="31" height="31"> <rect x="12" y="-10" width="20" height="20" transform="rotate(45)" /> </svg>

This example shows a square that is rotated by 45 degrees. The value for `rotate()`

is given in degrees.

## Skewing

To make a rhombus out of our rectangle, the `skewX()`

and `skewY()`

transformations are available. Each one takes an angle that determines how far the element will be skewed.

## Scaling

`scale()`

changes the size of an element. It takes two numbers, the first being the *x* scale factor and the second being the *y* scale factor. The factors are taken as the ratio of the transformed dimension to the original. For example, `0.5 shrinks by 50%. If the second number is omitted, it is assumed to be equal to the first.`

## Complex transformations with `matrix()`

All the above transformations can be expressed by a 2x3 transformation matrix. To combine several transformations, one can set the resulting matrix directly with the `matrix(a, b, c, d, e, f)`

transformation which maps coordinates from a previous coordinate system into a new coordinate system by

$$\backslash left\{\; \backslash begin\{matrix\}\; x\_\{\backslash mathrm\{prevCoordSys\}\}\; =\; a\; x\_\{\backslash mathrm\{newCoordSys\}\}\; +\; c\; y\_\{\backslash mathrm\{newCoordSys\}\}\; +\; e\; \backslash \backslash \; y\_\{\backslash mathrm\{prevCoordSys\}\}\; =\; b\; x\_\{\backslash mathrm\{newCoordSys\}\}\; +\; d\; y\_\{\backslash mathrm\{newCoordSys\}\}\; +\; f\; \backslash end\{matrix\}\; \backslash right.$$

See a concrete example on the SVG transform documentation. Detailed information about this property can be found in the SVG Recommendation.

## Effects on Coordinate Systems

When using transformations you establish a new coordinate system inside the element the transformations apply to. That means, the units you specify for the element and its children might not follow the 1:1 pixel mapping, but are also distorted, skewed, translated and scaled according to the transformation.

<svg width="100" height="100"> <g transform="scale(2)"> <rect width="50" height="50" /> </g> </svg>

The resulting rectangular in the above example will be 100x100px. The more intriguing effects arise, when you rely on attributes like `userSpaceOnUse`

and the such.

## Embedding SVG in SVG

In contrast to HTML SVG allows you to embed other `svg`

elements seamlessly. This way you can also simply create new coordinate systems by utilizing the `viewBox`

, `width`

and `height`

of the inner `svg`

element.

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="100" height="100"> <svg width="100" height="100" viewBox="0 0 50 50"> <rect width="50" height="50" /> </svg> </svg>

The example above has basically the same effect as the one above, namely that the rect will be twice as large as specified.