Transforms

Code

<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200">
  <g transform="translate(50, 50)">
    <rect x="0" y="0" width="40" height="40" fill="red"/>
  </g>
  <g transform="rotate(45 100 100)">
    <rect x="80" y="80" width="40" height="40" fill="blue"/>
  </g>
  <g transform="scale(1.5) translate(20, 20)">
    <circle cx="20" cy="20" r="10" fill="green"/>
  </g>
  <g transform="skewX(20)">
    <rect x="10" y="150" width="40" height="40" fill="orange"/>
  </g>
</svg>

Explanation

The transform attribute applies a coordinate-space change to a group or element, with operations applied right to left. rotate accepts an optional center point so shapes spin in place. Transforms compose, so translate-then-rotate differs from rotate-then-translate, mirroring matrix multiplication order.

More SVG Snippets