tutorialstonight logo

HTML SVG


SVG stands for scalable vector graphics. It is an XML based image format which is used to define two dimensional images. It is composed of shapes.

The SVG images do not lose quality upon scaling up and down like raster images. As HTML is for text in the same way SVG is for graphics.

SVG is mostly useful while creating vector diagrams like pie chart, 2D graph in x,y coordinate systems etc.


SVG line

Creating straight using SVG and giving color to the line.


Output:



SVG rectangle

Creating rectangle using SVG and filling color.


Output:



SVG circle

Creating a circle using SVG and filling color.


Output:



SVG ellipse

Creating ellipse using SVG and filling color.


Output:



SVG polygon

Creating polygon using SVG and filling color.

Output: