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

  <!DOCTYPE html>  <html>  <head>  <script type = “text/javascript” src = “https://d3js.org/d3.v4.min.js”>  </script>  </head>  <body>  <svg width = “300” height = “300”>  <rect x = “20”    y = “20”  width = “60”  height = “60”  fill = “lime”  transform = “translate(30 30)”>  </rect>  </svg>  </body>  </html>  

Output:

SVG Transformation

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

  <!DOCTYPE html>  <html>  <head>  <script type = “text/javascript” src = “https://d3js.org/d3.v4.min.js”>  </script>  </head>  <body>  <svg width = “300” height = “300”>  <rect x = “20”   y = “20”  width = “60”  height = “60”  fill = “lime”  transform = “translate(60 60) rotate(45)”>  </rect>  </svg>  </body>  </html>  

Output:

SVG Transformation

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

  <!DOCTYPE html>  <html>  <head>  <script type = “text/javascript” src = “https://d3js.org/d3.v4.min.js”>  </script>  </head>  <body>  <svg width = “300” height = “300”>   <g transform= “translate(60, 60) rotate(30)”>         <rect x = “20”   y = “20”  width = “60”  height = “60”  fill = “lime”>                   </rect>  <circle cx= “0”     cy= “0”  r= “30”  fill= “orange”/>  </g>    </svg>  </body>  </html>  

Output:

SVG Transformation

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:

  <!DOCTYPE html>  <html>  <head>  <script type = “text/javascript” src = “https://d3js.org/d3.v4.min.js”>  </script>  <style>  body {font-family: Arial;}  </style>  </head>  <body>  <div id= “svgcontainer”>   <svg width = “300” height = “300”>  <g transform= “translate(60, 60) rotate(30)”>         <rect x = “20”   y = “20”  width = “60”  height = “60”  fill = “lime”>                   </rect>  <circle cx= “0”     cy= “0”  r= “30”  fill= “orange”/>  </g>    </svg>  </div>    </body>  </html>  

Output:

SVG Transformation

Transformation with D3.js

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

Example:

  <!DOCTYPE html>  <html>  <head>  <script type = “text/javascript” src = “https://d3js.org/d3.v4.min.js”>  </script>  <style>  body {font-family: Arial;}  </style>  </head>  <body>  <div id= “svgcontainer”></div>  <script language= “javascript”>  var width= 300;  var height= 300;  var svg= d3.select(“#svgcontainer”)  .append(“svg”)  .attr(“width”, width)  .attr(“height”, height);  var group= svg.append(“g”)  .attr(“transform”, “translate(60, 60) rotate(30)”);  var rect= group.append(“rect”)  .attr(“x”, 20)  .attr(“y”, 20)  .attr(“width”, 60)  .attr(“height”, 30)  .attr(“fill”, “lime”)  var circle= group  .append(“circle”)  .attr(“cx”, 0)  .attr(“cy”, 0)  .attr(“r”, 30)  .attr(“fill”, “orange”)  </script>  </div>  </body>  </html>  

Output:

SVG Transformation

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:

  <script src = “http://d3js.org/d3.v4.min.js”></script>  <script src = “d3-transform.js”></script>  

Next TopicAxis API in D3.js

animation in d3.js benefits of d3.js concepts of d3.js d3.js graphs d3.js installation features of d3.js what is d3.js

D3.js SVG Transformation

SVG Transformation

Introduction

Minimal Illustration

Transformation with D3.js

Transformation Library

Margin vs Padding

Dijkstra’s Algorithm

You may also like