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.
Some SVG characteristics are listed below:
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.
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:
SVG with D3.js
To create the SVG with the D3.js, let's look at the following illustration:
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.
The rectangle can be illustrated by a <rect> as depicted in the below-mentioned example:
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.
A circle can be represented by a tag <circle> as illustrated in the below-mentioned example:
cx: x-coordinate of the circle's center.
cy: y-coordinate of the circle's center.
r: It represents the circle's radius.
It can be represented by a tag <ellipses> as described in the following example:
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.
Next TopicSVG Transformation