SVG HTML

HTML SVG is an acronym for Scalable Vector Graphics. In this article, we will learn more about SVG HTML.

What is SVG?

SVG, i.e., Scalable Vector Graphics, which is an image format, but they are different from raster images such as .png, .jpg, and .gif, which use a grid of tiny pixels to create an image. When .png and .jpg images are zoomed in, then the pixels become larger, and the image becomes blurry. Still, the vector image can be scaled to any size without losing its resolution because its appearance is based on geometry instead of fixed pixels.

HTML SVG is a modularized language for describing graphics in XML format. It describes two-dimensional vector and mixed vector/raster graphics. The W3C recommends it.

SVG is mostly used for vector-type diagrams, such as pie charts and 2-dimensional graphs in an X and Y coordinate system.

The <svg> element specifies the root of an SVG fragment. We can animate every element and every attribute in SVG files.

We can create SVG images using tools like Figma or Illustrator or directly write code in HTML, which is easier.

Demonstrations of SVG HTML

We will see various SVG HTML examples to understand the use of SVG in HTML.

Demonstration 1:

We are going to construct a slanting line using SVG HTML in this illustration. Here we are using the "x1", "y1", "x2", and "y2" attributes of the <line> tag.

Code:

Output:

Here, in the output, we can see the slanting line. When we zoom in, this line will not be blurred, and its dimensions will remain the same.

Demonstration 2:

Let us see the illustration to draw a circle by using the <svg> tag. Here we are using the "cx", "cy" and "r" attributes of the <circle> tag.

Code:

Output:

Here, in the result, we can witness a circle drawn on the web page using SVG.

Demonstration 3:

Let us see the illustration to draw a rectangle by using the <svg> tag. We are her using the "width" and "height" attributes of the <rect> tag.

Code:

Output:

We can witness a rectangle here in the result drawn on the web browser using SVG.

Demonstration 4:

Let us witness the demonstration of forming a polygon by utilizing the <svg> tag. Here, we are using the "points" attribute of the <polygon> tag.

Code:

Output:

We can see a polygon here in the output drawn on the web page using SVG.

Demonstration 5:

Let us witness the demonstration of creating an ellipse by utilizing the <svg> tag. Here we are utilizing the "cx", "cy", "rx", and "ry" attributes of the <ellipse> tag.

Code:

Output:

We can witness an ellipse here in the output drawn on the web browser using SVG.

Demonstration 6:

Let us witness the demonstration of writing a text by utilizing the <svg> tag. We will write a simple text and a rotated text using <text> tag.

Here we are using the "x" and "y" attributes of <text> tag.

Code:

Output:

We can witness a text here in the output written on the web page using SVG.

Demonstration 7:

Let us witness the demonstration for creating a polyline by utilizing the <svg> tag. Here, we are using the "points" attribute of the <polyline> tag.

Code:

Output:

We can here see a polyline created on the web browser using SVG HTML.

Demonstration 8:

Let us witness the demonstration for drawing a Christmas decoration ball by using the <svg> tag. Here, we are going to utilize <circle> and <rect> tags to draw a Christmas decoration ball.

Code:

Output:

Here, we can observe the Christmas decoration ball on the web page created with the use of SVG HTML.

Demonstration 9:

Let us see the illustration to draw a Christmas tree by using the <svg> tag. Here, we are going to use <polygon> and <rect> tags to draw a Christmas tree.

Code:

Output:

Here, we can observe the Christmas tree on the web page created with the help of SVG HTML.

Demonstration 10:

Let us see the illustration to see the use of <path > SVG element. The <path > tag is used to describe a shape, and here we are going to define a heart shape.

Code:

Output:

Here, we can witness a heart shape on the web page created with the use of SVG HTML.

Why is SVG Preferred over Other Image Formats?

1. Images with formats like JPEG, GIF, and PNG are called bitmap images. These images are made with pixels, so their height and width are predefined. If bitmap images are zoomed in, then the pixels become blurred, and their picture quality is degraded. On the other hand, SVG images are vector images that do not have fixed height and width, so when SVG images are zoomed in, then SVG images do not become blurry, which means SVG images can be zoomed to a certain level without degrading the picture quality. So, it is also easy to print with high quality at any resolution.
2. Bitmap images are not scalable, whereas SVG images are scalable.
3. Bitmap images have big file sizes, whereas SVG images have small file sizes.
4. SVG images can be saved in the smallest size possible. Unlike bitmap image formats like JPG or PNG, it does not contain a fixed set of dots.
5. SVG images and their behaviors are defined in XML text files so that they can be created and edited with any text editor.

Browser Support

Here are the browsers that support the SVG HTML:

• Firefox
• Safari
• Microsoft Edge
• Google Chrome
• Opera

Conclusion

We have understood the SVG HTML in this article. Some points to remember are given below:

1. Various tags are used within the <svg> tag for forming different kinds of shapes, such as a circle, a rectangle, a star, etc.
2. The tags used to create different shapes are as follows:
   • <line> tag: It creates a line on the web browser.
   • <circle> tag: It creates a circle on the web browser.
   • <rectangle> tag: It draws a rectangle on the web browser.
   • <polygon> tag: It creates a polygon on the web page.
   • <ellipse> tag: It forms an ellipse on the web page.
   • <polyline> tag: It constructs a polyline on the web page.
   • <path> tag: It is used to create different shapes on the web browser.
3. We can use a mixture of different tags to create SVG images, such as a Christmas decoration ball or a Christmas tree.
4. SVG is preferred over other image formats because it is scalable, can be zoomed in without degrading the quality of the image, and can be saved in small file sizes.