SVG in HTML5

Home / Topic / SVG in HTML5 / Transformations in SVG

Transformations in SVG

In this chapter, we will explore transformations in SVG. Transformations allow you to manipulate, move, rotate, and scale SVG elements in various ways, which is essential for creating dynamic and complex graphics. We will learn how to use basic transformations and how to combine them for advanced visual effects.

What is a Transformation in SVG?

Transformations in SVG allow you to modify the position, size, and orientation of elements precisely. This is achieved by using the transform attribute on SVG elements or by grouping multiple elements within a <g> (group) and applying the transformation to the entire group.

Basic Syntax of the `transform` Attribute

The basic syntax of transform can be divided into several common functions:

translate(x, y): Moves the element along the X and Y axes.
rotate(angle, cx, cy): Rotates the element at the specified angle around an optional center point (cx, cy).
scale(sx, sy): Scales the element on the X and Y axes.
skewX(angle) and skewY(angle): Skews the element on the X or Y axis.

Translating Elements

The translate function shifts an element to the specified position. This is useful for repositioning graphics without changing their original coordinates.

html

"This code uses the translate function to move a rectangle. The original rectangle, 60 by 60 pixels, is positioned at 10, 10. With translate 50, 20, we move the rectangle 50 pixels to the right and 20 pixels down."

In this case, the rectangle is translated 50 pixels on the X-axis and 20 pixels on the Y-axis, changing its position without affecting its dimensions.

Rotating Elements

The rotate function allows rotating an element at a specific angle. By default, the rotation occurs around the origin (0,0), but a rotation point (cx, cy) can be specified.

html

"In this example, we rotate a rectangle 45 degrees around the point 100, 75. This means the rectangle is turned from this point, affecting both its position and orientation."

Here, the rectangle is rotated 45 degrees around the point (100, 75), changing its orientation and position.

Scaling Elements

The scale function changes the size of an element by multiplying its dimensions by a specific factor. scale(sx, sy) allows non-uniform scaling, where sx and sy represent scale factors on the X and Y axes.

html

"This code applies non-uniform scaling to a circle in SVG. The circle has an original radius of 30 pixels but is scaled 150% on the X-axis and 50% on the Y-axis."

In this example, the circle is stretched on the X-axis and flattened on the Y-axis, changing its proportions.

Skew in SVG

The skewX and skewY functions skew an element along the X or Y axis, creating a distortion effect. This can be useful for generating interesting shapes or visual effects.

html

"In this example, we apply skewX to the rectangle. This skews the rectangle 20 degrees along the X-axis, creating a distortion to the right."

The skewX(20) function skews the rectangle 20 degrees, affecting only the X-axis and generating an inclined perspective.

Combining Transformations

SVG allows applying multiple transformations in a single transform attribute by separating them with spaces. This gives us great flexibility to manipulate graphics.

html

"Here we apply a combination of transformations. First, we move the rectangle 50 pixels on both axes. Then, we rotate the rectangle 45 degrees and finally scale the size by 120%."

In this example, translate, rotate, and scale are combined, allowing the rectangle to be moved, rotated, and scaled in a single line of code.

Applying Transformations to Groups of Elements

The <g> element in SVG allows grouping multiple elements and applying transformations to the entire group, rather than applying them individually to each element.

html

"This example uses a g group to apply a combined transformation. The entire group is moved 20 pixels on both axes and then rotated 30 degrees. Inside the group, there is a rectangle and a circle, both affected by the transformations."

In this case, both the rectangle and the circle within the <g> group are transformed as a unit, moving and rotating together.

Conclusion

Transformations in SVG are powerful tools that allow manipulating graphic elements in various ways. From translations and rotations to scales and complex combinations, these transformations are essential for creating interactive and engaging graphics. In the next chapter, we will learn about animations in SVG, using both SMIL and CSS to bring our graphics to life.

See you in the next chapter!

Back to previous chapter

Mark as read and continue