Search⌘ K
AI Features
Home
Courses
Introduction to Visualization Using D3.js

Introduction to SVG

Explore the fundamentals of SVG in this lesson to understand how to create and manipulate scalable vector graphics with D3.js. Learn about essential SVG elements like lines, rectangles, circles, paths, and text, and how non-graphical group elements help organize and transform graphics efficiently for clear web visualizations.

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.