# Tutorial SVG 11: SVG transformations

SVG transformations as there are the translation, the rotation, scaling, skewing and matrix transforms are defined by the transform attribute, which we can add to most of the SVG element, like for example the rectangle, the circle etc. The values of the transform properties are the following transform functions:

• translate() - moves an object to a new position
• scale() - scales an object to a larger or a smaller one.
• rotate() - rotates an object around the origin of the coordinate system or around another defined point
• skewX() - skews an object horizontally
• skewY() - skews an object vertically
• matrix() - performs one of the above or combination of the above transformations by means of matrix calculations For transformation matrices see the CSS3 Tutorial: matrix transformations. The matrices mentioned there are also applicable on SVG transformations.

When a transformation is applied on an object in the coordinate system, a new coordinate system is created. Compare this to a movement (transformation) of an object on a table. If you move the object on the table, not only the object is moved, but the whole table including the object on the table. This has consequences for the next transformation on the same object. Not only has the position of the object changed, but also the position of the coordinate system, and in some cases the position of the origin. The origin plays an important role in the rotate() function (being a parameter) as you can see in example 5.

### Example1: simple SVG transformations

<svg width="700px" height="700px">
<text x="30px" y="50px">
Non-transformed text.
</text>
<text x="30px" y="50px" transform="translate(220,0)">
Horizontally translated  text.
</text>
<text x="30px" y="50px" transform="translate(0,100)">
Vertically translated text.
</text>
<text x="310px" y="210px" transform="rotate(315,270, 180)">
Rotated Text
</text>
<text x="-220px" y="260px" transform="skewX(45)">
Text skewed in x-direction
</text>
<text x="270px" y="100px" transform="skewY(25)">
Text skewed in y-direction
</text>
<text x="5px" y="80px" transform="scale(5)">
Scaled  text.
</text>
</svg>


SVG transformations

### Example2: Transformations on the <g> element.

Transformations can also be applied on "grouped" <g> elements,

<svg width="600px" height="440px">
<g>
<rect x="10px" y="10px" width="300px" height="300px"
style="stroke:black; fill:red; stroke-width:20; fill:red; fill-opacity:0.6;"  />
<text x="120px" y="120px" style="fill:white;font-size:35;">Hello
<tspan x="70" dy="70" >rectangular!</tspan>
</text>
</g>
<g transform="translate(200, 120)">
<rect x="10px" y="10px" width="300px" height="300px"
style="stroke:black; fill:red; stroke-width:20; fill:red; fill-opacity:0.6;"  />
<text x="120px" y="100px" style="fill:white;font-size:35;">Hello
<tspan x="80" dy="70" >translated</tspan>
<tspan x="70" dy="70" >rectangular!</tspan>
</text>
</g>
</svg>


Translation on the <g> element.

### Example3: Transformations and the <use> element.

When a <g> element or <symbol> element is defined within a <defs> element then it is handy to employ the <use> element to apply a transformation.

<svg width="1000px" height="600px">
<defs>
<g id="myGroup">
<rect x="10px" y="10px" width="300px" height="300px"
style="stroke:black; fill:red; stroke-width:20; fill:red; fill-opacity:0.6;"  />
<text x="120px" y="120px" style="fill:white;font-size:35;">Hello
<tspan x="70" dy="70" >rectangular!</tspan>
</text>
</g>
</defs>
<use xlink:href="#myGroup" transform="translate(0, 120) scale(0.5)" />
</svg>



Employing the <use> element in Transformations

## Translations

A translation is a movement of an object, horizontally, vertically or diagonal, without rotating it or changing its size or shape. Translations can be executed by means of the translate() function as a value for the transform property, as shown below in the code examples.

Also we can use so called the matrix() function. To enter the right parameters in the matrix function we need to know the transformation matrix associated with a translation (for transformation matrices see the CSS3 Tutorial: matrix transformations. In case you wonder why you need a CSS3 tutorial related to SVG: for CSS and SVG transformations we can make use of the same transformation matrices.

The transformation matrix related to diagonal translations looks as follows

$$\left( \begin{array}{cc} 1 & 0 & x \\ 0 & 1 & y \\ 0 & 0 & 1 \end{array} \right)$$

where x is the horizontal translation, y is the vertical translation (by default in px). This matrix leads to the matrix functions as shown below in the code examples.

### Source code example: horizontal translation.

transform="translate(x-distance)"

or

transform= "matrix(1,0,0,1,x,0)"


### Source code example: vertical translation and diagonal translations.

transform="translate(x-distance, y-distance)"

or

transform= "matrix(1,0,0,1,x,y)"


### Example4: Translation

<style>
circle{
stroke-width:10;
fill:darkgrey;
fill-opacity:0.6;
stroke:black;
fill:purple;
}
</style>
<?php
define("A", 20 );
?>
<svg width="700px" height="700px">
<circle cx="200" cy="200" r="75" style="fill:yellow; stroke-width:0;"
transform="matrix(1,0,0,1,0,0)"/>
<?php
for (\$i = 0; \$i <= 20; \$i++) { ?> <circle cx="200" cy="200" r="50" transform="matrix(1,0,0,1,<?php echo(100*cos(deg2rad((360/17)*\$i)))?>,
<?php
}
?>
</svg>


Translations

### Rotations

A rotate() transformation can be executed around the origin (then the x- and y-coordinates parameters are omitted) or around a specific point other than the origin.

### Source code example: rotation around the origin

transform="rotate(rotation-angle)"

or

transform= "matrix(cos(θ),sin(θ),-sin(θ),cos(θ),0,0)"


### Source code example: rotation around a point other than the origin

transform="rotate(rotation-angle, x-coordinate, y-coordinate)"


### Example5: Rotations in steps of 30 degrees around (250,190)

<svg width="1000px" height="700px">
<text x="200px" y="150px" transform="rotate(0, 250,190)"
style="fill:red; stroke:none; font-size:30">
She loves me...
</text>
<text x="200px" y="150px" transform="rotate(30, 250,190)"
style="fill:black; stroke:none; font-size:30">
She loves me not...
</text>
...
<text x="200px" y="150px" transform="rotate(300, 250,190)"
style="fill:red; stroke:none; font-size:30">
She loves me...
</text>
<text x="200px" y="150px" transform="rotate(330, 250,190)"
style="fill:black; stroke:none; font-size:30">
She loves me not...
</text>
</svg>


Rotation transformations