HTML SVG

The HTML SVG is an acronym which stands for Scalable Vector Graphics.

HTML SVG is a modularized language which is used to describe graphics in XML. It describe two-dimensional vector and mixed vector/raster graphics in XML. It is a W3C recommendation. SVG images and their behaviors are defined in XML text files. So as XML files, you can create and edit an SVG image with text editor, but generally drawing programs like inkspace are preferred to create it.

SVG is mostly used for vector type diagrams like pie charts, 2-Dimensional graphs in an X,Y coordinate system etc.

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

HTML SVG Circle Example

Let’s see the example to draw circle by svg tag.

 

<svg width="100" height="100">  

 <circle cx="50" cy="50" r="40" stroke="yellow" stroke-width="4" fill="red" />  

</svg>

Here, we are using cx, cy and r attributes of circle tag. These attributes can’t be used with svg rect tag.Test it Now

Output:

HTML SVG Rectangle Example

Let’s see the example to draw rectangle by svg tag.

<svg width="100" height="100">  

 <circle cx="50" cy="50" r="40" stroke="yellow" stroke-width="4" fill="red" />  

</svg>

Here, we are using width and height attributes of rect tag.Test it Now

Output:

HTML SVG polygon Example

Let’s see the example to draw polygon by svg tag.

<svg height="210" width="500">  

  <polygon points="100,10 40,198 190,78 10,78 160,198"  

  style="fill:red;stroke:yellow;stroke-width:5;fill-rule:nonzero;" />  

</svg>

Here, we are using points attribute of polygon tag.Test it Now

Output:

Why SVG is preferred over other image formats?

SVG images can be saved as the smallest size possible. Unlike bitmap image formats like JPG or PNG, it does not contain a fixed set of dots. So it is also easy to print with high quality at any resolution.

SVG images can be zoomed to a certain level without degradation of the picture quality.

SVG images and their behaviors are defined in XML text files, so they can be created and edited with any text editor.