Home » D3.js | What is SVG

D3.js | What is SVG

by Online Tutorials Library

What is SVG?

The full form of SVG is Scalable Vector Graphics. It is a format of vector graphic type based on XML. It gives various options to design distinct shapes like Ellipses, Circle, Rectangles, and Lines. Thus, the design of visualizations along SVG provides us more flexibility and power.

SVG Characteristics

Some SVG characteristics are listed below:

  • SVG is text-based, and it is an image format that is vector-based.
  • SVG is the same as the HTML structure.
  • It can be illustrated as the DOM (Document Object Model).
  • The properties of SVG can be described as attributes.
  • SVG must contain absolute positions that are relative to an origin position (0, 0).
  • SVG may be added as is inside any HTML document.

Minimal Illustration

Let’s make an SVG image and add it within an HTML document.

Step 1: Make the SVG image. We will set the height of this image as 400 pixels and the width of this image as 400 pixels.

The above <svg> tag begins the SVG image. It has a height and width as the attributes. The SVG has a default format, i.e., pixel.

Step 2: Make the line beginning at the point (100, 100), ending at the point (200, 100), and fix the line’s color.

Where,

x1: First point’s x-coordinate

y1: First point’s y-coordinate

x2: Second point’s x-coordinate

y2: Second point’s y-coordinate

stroke: Line’s color

stroke-width: Line’s thickness

Step 3: Make any HTML document and combine the SVG (described as above) as follows:

Output:

What is SVG

SVG with D3.js

To create the SVG with the D3.js, let’s look at the following illustration:

Example:

The SVG container will take SVG image. We can select the SVG container with the help of a method called select() method. After that, the SVG element will be injected with the use of a method called append() method. Include the styles and attributes using the style() and attr() methods.

Output:

What is SVG

Rectangle Item

The rectangle can be illustrated by a <rect> as depicted in the below-mentioned example:

Example:

Attributes-

x: x-coordinate of the rectangle’s top-left side corner.

y: y-coordinate of the rectangle’s top-left side corner.

width: It represents the rectangle’s width.

height: It represents the rectangle’s height.

Output:

What is SVG

Circle Item

A circle can be represented by a tag <circle> as illustrated in the below-mentioned example:

Example:

Attributes-

cx: x-coordinate of the circle’s center.

cy: y-coordinate of the circle’s center.

r: It represents the circle’s radius.

Output:

What is SVG

Ellipses Item

It can be represented by a tag <ellipses> as described in the following example:

Attributes-

cx: x-coordinate of the ellipse’s center.

cy: y-coordinate of the ellipse’s center.

rx: It is the circle’s x-radius.

ry: It is the circle’s y-radius.

Output:

What is SVG


Next TopicSVG Transformation

You may also like