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
  • Comment 20 words added

Revision Content

{{ PreviousNext("SVG/Tutorial/Texts", "SVG/Tutorial/Clipping_and_masking") }}

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.

{{ PreviousNext("SVG/Tutorial/Texts", "SVG/Tutorial/Clipping_and_masking") }}

{{ 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>
<p>{{ PreviousNext("SVG/Tutorial/Texts", "SVG/Tutorial/Clipping_and_masking") }}</p>
<p>{{ languages( { "fr": "fr/SVG/Tutorial/Transformations_de_base"} ) }}</p>
Revert to this revision