Introduction to SVG

Learn about SVG and its graphical and non-graphical elements.

We'll cover the following

Introduction

Let’s introduce the important concept of SVG in D3.js. SVG stands for Scale Vector Graphics. It is an XML-based vector graphic format. HTML is helpful when we are creating a web page, but when we want to draw something on a web page, HTML is very limited. SVG is used to draw sharp graphics. SVG has an advantage of maintaining sharpness with zoom-in and zoom-out features in comparison to other image tools like bitmap.

SVG was developed by the W3C SVG Working Group in 1998. All major browsers, Opera, Google Chrome, Mozilla Firefox, Safari, and Microsoft Edge support SVG rendering.

SVG logo
SVG logo

Including SVG in webpages

To include SVG in the webpage, we simply need to include the svg tag inside the HTML file.

<body>
     <svg>content</svg>
</body>

The content will mainly consist of the attributes of the graphical elements.

SVG mainly consists of graphical elements and some non-graphical elements. Let’s discuss them one by one.

Graphical elements

There are five main SVG graphical elements, which are given below:

  • Line can be drawn using the </line> tag inside the svg tag.
  • Rectangle can be drawn using the </rect> tag inside the svg tag.
  • circle can be drawn using the </circle> tag inside the svg tag.
  • path can be drawn using the </path> tag inside the svg tag.
  • text can be written using the </text> tag inside the svg tag.

Following is an illustration of the path that shows what we mean by the path in svg:

Non-graphical elements

SVG has some non-graphical elements as well that don’t draw anything but instead help to manage existing elements. One of these elements is group and can be added to the svg tag using the </g> tag. We can put any graphical elements inside </g> to move, organize, and transform them easily.