Understanding the Basics of SVG Transformations


By -

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.

Transformation Example.


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.



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:

1. Matrix

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.

2. Translation

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.

translate(<tx> [<ty>])

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:


This will be the result:

Image 2

3. Rotate

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).

transform= “rotate(45)”

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.

Transform= “rotate(-45)

4. Scale

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.

scale(<sx> [<sy>])

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.

5. Skew

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.

To Conclude

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.

Mike Swan

Mike Swan is an experienced PSD to WordPress service provider, and a web designer. With this article, he is making people aware about how to create custom Wordpress website from PSD.

Comments are closed.