tutorialstonight logo
A Platform To Learn To Code

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.

Example

Run the code

Output:



SVG rectangle

Creating rectangle using SVG and filling color.

Example

Run the code

Output:



SVG circle

Creating a circle using SVG and filling color.

Example

Run the code

Output:



SVG ellipse

Creating ellipse using SVG and filling color.

Example

Run the code

Output:



SVG polygon

Creating polygon using SVG and filling color.

Example

Run the code

Output:




BOX

BOX