SVG Transformations

SVG Transformations

SVG elements can be manipulated using transform functions.

The transform attribute can be used with any SVG element.

The transform attribute defines a list of transform functions that can be applied to an element and the element's children:

• translate()
• scale()
• rotate()
• skewX()
• skewY()
• matrix()

Translate() Function

The translate() function is used to move an object by x and y.

Assume one object is placed with x="5" and y="5". Then another object contains transform="translate(50 0)", this means that the other object will be placed at x-position 55 (5 + 50) and at y-position 5 (5 + 0).

Let's look at some examples:

In this example, the red rectangle is translated/moved to the point (55,5) instead of (5,5):

Here is the SVG code:

In this example, the red rectangle is translated/moved to the point (5,55) instead of (5,5):

Here is the SVG code:

In this example, the red rectangle is translated/moved to the point (55,55) instead of (5,5):

Here is the SVG code:

Scale() Function

The scale() function is used to scale an object by x and y. If y is not provided, it is set to be equal to x.

The scale() function is used to change the size of an object. It takes two numbers: the x scale factor and the y scale factor. The x and y scale factors are taken as the ratio of the transformed dimension to the original. For example, 0.5 shrinks the object by 50%.

In this example, the red circle is scaled to twice the size with the scale() function:

Here is the SVG code:

In this example, the red circle is scaled vertically to twice the size with the scale() function:

Here is the SVG code:

In this example, the red circle is scaled horizontally to twice the size with the scale() function:

Here is the SVG code:

Rotate() Function

The rotate() function is used to rotate an object by a degree.

In this example, the blue rectangle is rotated with 45 degrees:

Here is the SVG code:

SkewX() Function

The skewX() function is used to skew an object along the x axis by a degree.

In this example, the blue rectangle is skewed along the x axis by 30 degrees:

Here is the SVG code:

SkewY() Function

The skewY() function is used to skew an object along the y axis by a degree.

In this example, the blue rectangle is skewed along the y axis by 30 degrees:

Here is the SVG code: