Playing around SVG (scalar vector graphics) always fascinates me. To me, providing a usable website shows the designer cares about its users and product, and SVG provides us power to do so. SVG has already taken the web by storm, and its robust feature “SVG transformations” takes its abilities to a whole new level. SVG images can be transformed easily by moving, scaling, skewing, and rotating. The process is quite useful when it comes to performing animations where scaling and rotating are deemed necessary. This is also helpful presenting vertical and diagonal text.
The transform attribute defines a series of elements that need to be transformed. All the items within the transform list can be split with the help of whitespace or commas, and applied from right to left.
In this article, I will walk through the basics of SVG transformations and then show you techniques of experimenting with it. So, let’s get started.
Rotating and Translating an SVG Element
The below example showcases the process of rotating and translating an SVG element with the help of SVG attribute.
<svg width="250" height="250">
<!-- Before: translation and rotation effects -->
<rect x="50" y="50" height="150" width="150" style="fill: #333" fill-opacity=0.2 stroke-opacity=0.2></rect>
<!-- After: apply rotate and translate with text element -->
<rect x="50" y="50" height="150" width="150" style="fill: #666" transform="translate(60) rotate(45 90 50)"></rect>
<text x="70" y="80" transform="translate(30) rotate(45 50 50)" style="fill: #FFF">Transformation</text>
Following will be the output:
It’s worth noticing the use of ‘rect’ and ‘text’ elements. The transform element is used to specify transformations on an element. The above example showcases the application of both transform and rotate functions. You can also go on to modify gradients and fill patterns.
Types of Elements which Can be Transformed
One thing that makes SVG transformations versatile is the way it provides us freedom to be applied to a variety of shapes. In fact, it can also be applied to <g> element, so making it handy to transform or modify a large portion of elements simultaneously.
There are basically four types of functions SVG provides to us. They are described as follows:
Matrix () function is helpful for applying one or more transformation function to an SVG element. Following is the syntax used to define matrix function.
matrix(<a> <b> <c> <d> <e> <f>)
The declaration mentioned above clearly specifies the application of transformation function to six values.
Translate is a kind of SVG function which allows you to convert the coordinates of an SVG image. The function is quite helpful when it comes to rotating an image between the x and y-axis.
Translate function can be either used individually or along with several other transformation functions to define the core action of an image. Below is the syntax used for translate function.
tx- represents the rotation along the x axis
ty- translation value along the y-axis
In addition to this, it’s up to you whether to use “ty” value or not as it is optional. If you choose not to use it, the default value will be considered equal to zero. Both the values can be separated either by using whitespace or comma, and they never take any unit.
Following is the example representing the usage of translate function:
<svg width="200" height="200" style="border: 1px solid #CCCCCC; background: #F0F0F0;">
<rect x="15" y="15" width="80" height="120" style="fill: #908e63"/>
<rect x="15" y="15" width="80" height="120" style="fill: #6891b3" transform="translate(90,50)" />
This will be the result:
This transformation function lets you rotate a shape around its center or a given point. The function boasts a fixed point, but the shape changes its angles. Following is the syntax used to define the rotate function.
rotate(<rotate-angle> [<cx> <cy>])
In rotate function, the unit of an angle is defined using degrees. No units are used, and it is always considered degrees by default.
Below is the example for rotate function:
transform= “rotate (45,100, 100)”
In the code above, 45 degrees is the point which specifies the angle of rotation. The center point is positioned at 100,100. If you choose omitting to enter the center coordinates, then the default values will become equal to (0,0).
Now, the angle moves to right-hand side of the graph. If you want to move the shape to the opposite direction, simply put minus (-) in front of 45, just like this.
The scale function is helpful in scaling an SVG image up or down using the scale () function. This is the syntax we use to define scale function.
The scale function is used to define the dimensions of a shape as well as its position coordinates. It also takes one or two values to define the horizontal and vertical scaling values at the same time.
Here, sx is the scale value that moves along the x-axis, whereas sy is the scaling value for y-axis. Both of them are used to either contract or expand the element horizontally and vertically respectively.
You can skew an SVG element using a function called skewX () and skewY (). They are represented like this:
SkewX- used to determine the skew transformation along with the x-axis
SkewY- determines the skew transformation along the y-axis
The skew angles are also defined using degrees by default, so no units are used.
So, this is all I have to say regarding SVG transformations. I hope you find the article easy and enjoyable. Be sure to bookmark it for any future reference.