Introduction in HTML5

How to use the SVG in HTML5?

Introduction of SVG

  • SVG, Scalable Vector Graphics is an XML based language to define vector based graphics.

  • SVG is intended to display images over the web.

  • Being vector images, SVG image never loses quality no matter how they are zoomed out or resized.

  • SVG images supports interactivity and animation.

  • SVG is a W3C standard.

  • Others image formats like raster images can also be clubbed with SVG images.


  • Use any text editor to create and edit SVG images.

  • Being XML based, SVG images are searchable, indexable and can be scripted and compressed.

  • SVG images are highly scalable as they never loses quality no matter how they are zoomed out or resized

  • Good printing quality at any resolution

  • SVG is an Open Standard


  • Being text format size is larger then compared to binary formatted raster images.

  • Size can be big even for small image.


  • svg element indicates the start of SVG image.

  • svg element's width and height attributes defines the height and width of the SVG image.

  • In above example, we've used a <circle> element to draw a circle.

  • cx and cy attribute represents center of the circle. Default value is (0,0). r attribute represents radius of circle.

  • Other attributes stroke and stroke-width controls the outlining of the circle.

  • fill attribute defines the fill color of the circle.

  • Closing</svg> tag indicates the end of SVG image.

 Views: 479 | Post Order: 118

Write for us