SVG Transformation
Remarks
Graphic elements can be altered by adding a transform attribute.
<svg xmlns="http://www.w3.org/2000/svg">
<rect x="0" y="0" width="30" height="30" transform="translate(10, 10)" />
</svg>
Instead of the top left origin being rendered at coordinates (0, 0), it will be shown down and right, from point (10, 10).
Whole groups of elements can be transformed together, and transformations can add to one another.
<svg xmlns="http://www.w3.org/2000/svg">
<g transform="rotate(45)">
<rect x="0" y="0" width="30" height="30" />
<circle cx="5" cy="5" r="5" transform="scale(3)" />
</g>
</svg>
First, every point of the circle will be scaled with the factor 3 in relation to the origin, bringing the center of the circle to the middle of the rectangle at (15, 15) and its radius to 15. Then, the rectangle and the circle will be rotated together by 45 degrees clockwise around the origin.
