Basic transformations
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
<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'stransform 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, thetranslate() transformation stands ready.
<svg width="40" height="50"> <rect x="0" y="0" width="10" height="10" transform="translate(30,40)" /></svg>svg { background-color: #bbffff;}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 be0.
Rotation
Rotating an element is quite a common task. Use therotate() transformation for this:
<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 forrotate() is given in degrees.
Multiple transformations
Transformations can be concatenated easily just by separating them with spaces. For example,translate() androtate() are common used transformations.
<svg width="40" height="50"> <rect x="0" y="0" width="10" height="10" transform="translate(30,40) rotate(45)" /></svg>svg { background-color: #bbffff;}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, theskewX() andskewY() 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 thex scale factor and the second being they 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 withmatrix()
All the above transformations can be expressed by a 2x3 transformation matrix. To combine several transformations, one can set the resulting matrix directly with thematrix(a, b, c, d, e, f) transformation which maps coordinates from a previous coordinate system into a new coordinate system by
See aconcrete example on the SVG transform documentation. To read more about transformations, check theCSS transforms guide.
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.
<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 likeuserSpaceOnUse and the such.
Embedding SVG in SVG
In contrast to HTML, SVG allows you to embed othersvg elements seamlessly. This way you can also create new coordinate systems by utilizing theviewBox,width andheight of the innersvg element.
<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.