SVG Overview in HTML5

This article will provide some light on a tag of HTML5 named SVG. SVG stands for “Scalable Vector Graphics”. It is basically used to define vector-based graphics for the web. A very good advantage of the SVG is that if we zoom or resize an image then there is no loss of quality of the image.

SVG always defined the graphics in XML format. Using SVG we can animate every attribute in the file.


We can use this SVG tag inside the HTML tag or outside. If we use SVG from outside then for linking this SVG page to an HTML page we use:

Now we move to do some work on SVG.

1. How to make a rectangle using SVG

So here we can see examples of an SVG in which there is no loss of image quality after zooming the image.

Here we can also see that there is no loss of image quality after zooming the image.

Inkscape is a professional vector graphics editor for Windows, Mac OS X, and Linux. It's free and open source.

Download Inkscape: http://sourceforge.net/projects/inkscape/files/latest/download?source=files

Here I make a man using the Inkscape tool. Code that is automatically generated by the Inkscape tool to only make the man:

Conclusion

In this article, we studied SVG Overview in HTML5.