Introduction to SVG

In D3.js, SVG represents Scalable Vector Graphics. SVG is a text or XML (Extensible Markup Language) based image or graphics format used to grant the options to draw various shapes like line, circle, triangle, rectangle, ellipse, etc. So, the SVG helps you to design the visualization more flexibly and effectively.

Features of SVG

Here, some important features of SVG are given below-

  1. Scalable Vector Graphics (SVG) can be presented as the DOM (Document Object Model).
  2. The structure of SVG is similar, like HTML.
  3. You can determine the properties of SVG as attributes.
  4. The SVG can be considered as a vector-based graphics or text-based format.
  5. The utter position of SVG should be related to origin (0,0).
  6. You can also involve the SVG in an HTML document.

Create a Line Element

Here, we are going to create a SVG line image and include it within the HTML document.

Step 1: First, create an SVG image that have 400-pixel height and 400-pixel width.

In the above code, we used the <svg> tag and height and width are the attributes of <svg> tag. By default, the SVG format takes pixel as its unit.

Step 2: Now, draw a line with starting points (200, 200) and the ending points (400, 200). You can set any color for the line. Here, we have set the green color for the line.

 In the above­-given code, we used a <line> tag, which helps to draw a line and also contained the attributes a1, b1 as a staring point, and a2, b2 as ending points. The <style> tag is used to set the color of the line and the thickness of the line can be set by using stroke-width style attribute.

a1 – Coordinate of a for the first point

b1– Coordinate of b for the first point

a2 – Coordinate of a for the second point

b2 – Coordinate of b for the second point

stroke-width – Controls the line thickness

stroke – Controls the line color

Step 3: Now, you are required to create an HTML file named svg_line.html and attach it with the SVG code as shown in the below code.

Output

After the successful execution of the above code, you will get the following output:

Introduction to SVG

SVG with D3.js

You can also generate SVG with the help of D3.js, as shown in the below steps:

Step 1: First, you need to create a svgcontainer for storing the graphics as given in the below code:

Step 2: Now, you are required to choose the SVG container with the help of select() method and implant the SVG element with the help of append() method. You can also add the styles and attributes using the attr() method and style() method. It is shown as follows-

Step 3: Now, you need to attach the line element within the SVG element as given in the below code:

Example

Here, we have discussed an example to understand the above code.

Output

You will get the following output, after the execution of the above code:

Introduction to SVG

Create a Circle Element

Here, we will create a circle with the help of <circle> tag as shown in below code-

The circle attributes are-

cx – coordinate of x for the center of the circle

cy – coordinate of y for the center of the circle

r – radius of the circle

Here, we have the code to draw a circle in SVG is shown below-

Example

Here, we have an example to illustrate the same:

Output

After the successful execution of the above code, we will get the following output:

Introduction to SVG

Create a Rectangle Element

By using <rect> tag, you can easily draw a rectangle in SVG (Scalable Vector Graphics). It is shown in below code:

A rectangle contains the following attributes:

x – It represents the coordinate of x for the top-left corner of the rectangle.

y – It represents the coordinate of y for the top-left corner of the rectangle.

Height – It represents the height of the rectangle.

Width – It represents the width of the rectangle.

The simple SVG rectangle can be defined as shown below-

Example

An example is given below to create an SVG rectangle:

Output

After the successful execution of the above code, you will get the following result:

Introduction to SVG

Create an Ellipse Element

Unlike the circle, an ellipse contains two radiuses (rx, ry). By using <ellipse> tag, you can easily draw an ellipse in SVG (Scalable Vector Graphics). It is shown in below code:

An ellipse contains the following attributes:

cx – It denotes the coordinate of x for the center of the ellipse.

cy – It denotes the coordinate of y for the center of the ellipse.

rx – It represents the height of the ellipse.

ry – It represents the width of the ellipse.

The SVG ellipse can be determined as shown in below code-

Example

An example is given below to create an SVG ellipse:

Output

After the successful execution of the above code, you will get the following result:

Introduction to SVG

Create the Text Element on Ellipse

You can also include the text on the created ellipse. It can be done by using <text> tag as shown in below code:

An ellipse with the text contains the following attributes:

x – It denotes the coordinate of x for the center of the ellipse.

y – It denotes the coordinate of y for the center of the ellipse.

The SVG ellipse with the text can be defined as shown in below code-

Example

Here, we have an example to create an ellipse with the text as shown in the below code:

Output

Introduction to SVG

Pin It on Pinterest

Share This