SVG Transformation

The Scalable Vector Graphics (SVG) gives several options for transforming the shape of an individual item or collection of SVG items. The transformation of SVG supports Skew, Rotate, Scale, and Translate.

Let's understand the concept of SVG transformations inside this chapter described as follows.

Introduction

The Scalable Vector Graphics represents a new property called transform, which supports transformation.

Some of the possible values are specified as follows:

Translate: This value holds two essential options. The first option, i.e., tx, which represents translation with the x-axis. The second option is ty, which represents translation with the y-axis. Such as, translate (30 30).

Rotate: This value holds three vital options. The first option is angle that represents a rotation angle. The second and third options are cx and cy, which represents the rotation center inside the x-axis and y-axis. When cy and cx are not described, it will become default for the latest coordinate system's origin. Such as, rotate (60).

Scale: The scale value holds two options. The first one is sx, which illustrates any scaling factor with the x-axis. The second one is sy, which illustrates the scaling factor with the y-axis. In this value, the sy factor holds the sx value, and it is optional when it is not specified, such as scale (10).

Skew: It holds an individual option. A skew-angle represents the angle for SkewX with the x-axis and the angle for SkewY with the y-axis, such as skewx (20).

Let's consider some examples.

Example: 1

Translation with SVG Rectangle

Output:

• Two or more transformations may also be described for any individual SVG item using a space as the separation. When two or more values are specified, then the transformation can be used sequentially within a specified order.

Example: 2

Output:

• The transformation may be used to group of SVG items also. It enables for transforming any complex graphics illustrated inside the SVG, described as follow:

Example: 3

Output:

Minimal Illustration

It tries to rotate and scale an image using the transformation to make any SVG image.

Let's understand by an illustration as below:

Example:

Output:

Transformation with D3.js

We will learn how to apply the transformation with D3.js in the following-mentioned illustration:

Example:

Output:

Transformation Library

The D3.js gives an isolated library to maintain transform, without creating any transform properties manually. It provides techniques to manage every transformation type. A few techniques are rotate(), scale(), translate(), and transform(). We can add d3-transform inside our webpage with a script which is mentioned as below: