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:
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:
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:
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:
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:
