# Revision 19079 of Basic Transformations

• Revision slug: SVG/Tutorial/Basic_Transformations
• Revision title: Basic Transformations
• Revision id: 19079
• Created:
• Creator: PetiPandaRou
• Is current revision? No
Tags:

## Revision Content

Now we're ready to start distorting our beautiful images. But first, let's formally introduce the {{ SVGElement("g") }} element. With this helper, you can assign properties to a complete set of elements. Actually, that's its only purpose. An example:

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

This results in two red rectangles.

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.

```<rect x="0" y="0" width="10" height="10" transform="translate(30,40)" />
```

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:

```<rect x="20" y="20" width="20" height="20" transform="rotate(45)" />
```

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, evaluated as ratio by which to scale. 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 3x3 transformation matrix. To combine several transformations, one can set the resulting matrix directly with the `matrix(A1, A2, B1, B2, C1, C2)` transformation. Detailed information about this property can be found in the SVG Recomendation.

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

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

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

{{ languages( { "fr": "fr/SVG/Tutorial/Transformations_de_base"} ) }}

## Revision Source

```<p>{{ PreviousNext("SVG/Tutorial/Texts", "SVG/Tutorial/Clipping_and_masking") }}</p>
<p>Now we're ready to start distorting our beautiful images. But first, let's formally introduce the {{ SVGElement("g") }} element. With this helper, you can assign properties to a complete set of elements. Actually, that's its only purpose. An example:</p>
<pre class="brush: xml">&lt;g fill="red"&gt;
&lt;rect x="0" y="0" width="10" height="10" /&gt;
&lt;rect x="20" y="0" width="10" height="10" /&gt;
&lt;/g&gt;
</pre>
<p>This results in two red rectangles.</p>
<p>All following transformations are summed up in an element's <code>transform</code> attribute. Transformations can be chained simply by concatenating them, separated by whitespace.</p>
<h2>Translation</h2>
<p>It may be necessary to move an element around, even though you can position it with the according attributes. For this purpose, the <code>translate()</code> transformation stands ready.</p>
<pre>&lt;rect x="0" y="0" width="10" height="10" transform="translate(30,40)" /&gt;
</pre>
<p>The example will render a rectangle, translated to the point (30,40) instead of (0,0).</p>
<p>If the second value is not given, it is assumed to be <var>0</var>.</p>
<h2>Rotation</h2>
<p>Rotating an element is quite a common task. Use the <code>rotate()</code> transformation for this:</p>
<pre>&lt;rect x="20" y="20" width="20" height="20" transform="rotate(45)" /&gt;
</pre>
<p>This example shows a square that is rotated by 45 degrees. The value for <code>rotate()</code> is given in degrees.</p>
<h2>Skewing</h2>
<p>To make a rhombus out of our rectangle, the <code>skewX()</code> and <code>skewY()</code> transformations are available. Each one takes an angle that determines how far the element will be skewed.</p>
<h2>Scaling</h2>
<p><code>scale()</code> changes the size of an element. It takes two numbers, evaluated as ratio by which to scale. <var>0.5 shrinks by 50%. If the second number is omitted, it is assumed to be equal to the first.</var></p>
<h2>Complex transformations with <code>matrix()</code></h2>
<p>All the above transformations can be expressed by a 3x3 transformation matrix. To combine several transformations, one can set the resulting matrix directly with the <code>matrix(A1, A2, B1, B2, C1, C2)</code> transformation. Detailed information about this property can be found in the <a class="external" href="http://www.w3.org/TR/SVG/coords.html#TransformMatrixDefined">SVG Recomendation</a>.</p>
<h2>Effects on Coordinate Systems</h2>
<p>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.</p>
<pre>&lt;g transform="scale(2)"&gt;
&lt;rect width="50" height="50" /&gt;
&lt;/g&gt;
</pre>
<p>The resulting rectangular in the above example will be 100x100px. The more intriguing effects arise, when you rely on attributes like <code>userSpaceOnUse</code> and the such.</p>
<h2>Embedding SVG in SVG</h2>
<p>In contrast to HTML SVG allows you to embed other <code>svg</code> elements seamlessly. This way you can also simply create new coordinate systems by utilizing the <code>viewBox</code>, <code>width</code> and <code>height</code> of the inner <code>svg</code> element.</p>
<pre>&lt;svg xmlns="http://www.w3.org/2000/svg" version="1.1"&gt;
&lt;svg width="100" height="100" viewBox="0 0 50 50"&gt;
&lt;rect width="50" height="50" /&gt;
&lt;/svg&gt;
&lt;/svg&gt;
</pre>
<p>The example above has basically the same effect as the one above, namely that the rect will be twice as large as specified.</p>