Basic transformations
=====================

* « Previous
* Next »

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.

Example
-------


```html
<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 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.


```html
<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:


```html
<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.

Multiple transformations
------------------------

Transformations can be concatenated easily just by separating them with spaces. For example, `translate()` and `rotate()` are common used transformations.


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


This example shows again the small square shown above that this time is also rotated by 45 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



{

x

newCoordSys

=
a

x

prevCoordSys

+
c

y

prevCoordSys

+
e


y

newCoordSys

=
b

x

prevCoordSys

+
d

y

prevCoordSys

+
f

\left{ \begin{matrix} x\*{\mathrm{prevCoordSys}} = a x\*{\mathrm{newCoordSys}} + c y\*{\mathrm{newCoordSys}} + e \ y\*{\mathrm{prevCoordSys}} = b x\*{\mathrm{newCoordSys}} + d y\*{\mathrm{newCoordSys}} + f \end{matrix} \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.


```html
<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 create new coordinate systems by utilizing the `viewBox`, `width` and `height` of the inner `svg` element.


```html
<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.

* « Previous
* Next »