Transformation in SVG

• Translation: Move the object from one center point to another

Example:

<svg width="500" height="400">
  <rect x="50" y="50" width="100" height="100" fill="blue" transform="translate(100, 50)" />
</svg>

Output:

• Rotation: Rotate the object by a certain angle

Example:

<svg width="500" height="400">
      <rect x="150" y="150" width="100" height="100" fill="lightgreen" transform="rotate(45, 200, 200)" />
</svg>

Output:

• Scaling: Resize object

Example:

<svg width="500" height="400">
    <rect x="50" y="50" width="100" height="100" fill="red" transform="scale(1.5, 0.5)" />
</svg>

Output:

• Skewing: Slants object along x and y axis

Example:

<svg width="500" height="400">
  <rect x="50" y="50" width="100" height="100" fill="purple" transform="skewX(30)" />
</svg>

Output:

• Animating Transformations: SVG supports animating transformations

Example:

<svg width="500" height="400">
    <rect x="150" y="150" width="100" height="100" fill="lightgreen">
      <animateTransform attributeName="transform" type="rotate" from="0 200 200" to="360 200 200" dur="5s" repeatCount="indefinite" />
    </rect>
</svg>