SVG Transformations

SVG (Scalable Vector Graphics) transformations allow you to manipulate the position, rotation, scale, and skew of SVG elements, enabling dynamic and interactive visual effects. SVG supports various transformation functions that can be applied to individual elements or groups of elements. Here's how to use SVG transformations:

1. Translate

The translate() function moves an element from its current position by a specified distance along the X and Y axes.

Example:

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

In this example, the second rectangle is translated 50 units to the right from its original position.

2. Rotate

The rotate() function rotates an element around a specified point by a given angle.

Example:

<svg width="200" height="100">
  <rect x="25" y="25" width="50" height="50" fill="blue" />
  <rect x="25" y="25" width="50" height="50" fill="red" transform="rotate(45, 50, 50)" />
</svg>

This example rotates the second rectangle by 45 degrees around the point (50,50).

3. Scale

The scale() function scales an element by a specified factor along the X and Y axes.

Example:

<svg width="200" height="100">
  <circle cx="30" cy="30" r="20" fill="blue" />
  <circle cx="30" cy="30" r="20" fill="red" transform="scale(2)" />
</svg>

In this example, the second circle is scaled by a factor of 2.

4. Skew

The skewX() and skewY() functions skew an element by a specified angle along the X or Y axis, respectively.

Example:

<svg width="200" height="100">
  <rect x="0" y="0" width="50" height="50" fill="blue" />
  <rect x="0" y="0" width="50" height="50" fill="red" transform="skewX(30)" />
</svg>

This example skews the second rectangle by 30 degrees along the X axis.

5. Multiple Transformations

You can apply multiple transformations to an element by combining them within the transform attribute.

Example:

<svg width="200" height="100">
  <circle cx="30" cy="30" r="20" fill="blue" />
  <circle cx="30" cy="30" r="20" fill="red" transform="translate(50, 0) rotate(45)" />
</svg>

This example translates the second circle 50 units to the right and then rotates it by 45 degrees.

6. Conclusion

SVG transformations provide powerful capabilities for manipulating the position, rotation, scale, and skew of SVG elements. By using transformation functions like translate(), rotate(), scale(), and skew(), you can create dynamic and visually appealing graphics in SVG.

Archive