mozilla

# Revision 498801 of Basic Transformations

• Revision slug: Web/SVG/Tutorial/Basic_Transformations
• Revision title: Basic Transformations
• Revision id: 498801
• Created:
• Creator: fred.wang
• Is current revision? No
• Comment
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(a, b, c, d, e, f)` transformation which maps coordinates from a new coordinate system into a previous coordinate system by

${x prevCoordSys=ax newCoordSys+cy newCoordSys+e y prevCoordSys=bx newCoordSys+dy newCoordSys+f$

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.

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

## Revision Source

```<div>
<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 id="Translation">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 class="brush: xml">
&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 id="Rotation">Rotation</h2>
<p>Rotating an element is quite a common task. Use the <code>rotate()</code> transformation for this:</p>
<pre class="brush: xml">
&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 id="Skewing">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 id="Scaling">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 id="Complex_transformations_with_matrix()">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(a, b, c, d, e, f)</code> transformation which maps coordinates from a new coordinate system into a previous coordinate system by</p>
<p><math display="block"><mrow><mo>{</mo><mrow><mtable rowspacing="0.5ex"><mtr><mtd><msub><mi>x</mi> <mtext>prevCoordSys</mtext></msub><mo>=</mo><mi>a</mi><msub><mi>x</mi> <mtext>newCoordSys</mtext></msub><mo>+</mo><mi>c</mi><msub><mi>y</mi> <mtext>newCoordSys</mtext></msub><mo>+</mo><mi>e</mi></mtd></mtr> <mtr><mtd><msub><mi>y</mi> <mtext>prevCoordSys</mtext></msub><mo>=</mo><mi>b</mi><msub><mi>x</mi> <mtext>newCoordSys</mtext></msub><mo>+</mo><mi>d</mi><msub><mi>y</mi> <mtext>newCoordSys</mtext></msub><mo>+</mo><mi>f</mi></mtd></mtr></mtable></mrow></mrow>[/itex]</p>
<p>See a <a href="/en-US/docs/Web/SVG/Attribute/transform#General_Transformation">concrete example on the SVG transform documentation</a>. Detailed information about this property can be found in the <a href="http://www.w3.org/TR/SVG/coords.html#TransformMatrixDefined">SVG Recommendation</a>.</p>
<h2 id="Effects_on_Coordinate_Systems">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 class="brush: xml">
&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 id="Embedding_SVG_in_SVG">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 class="brush: xml">
&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>
<div>