<svg> tag

HTML5 <svg> tag

SVG – Scalable Vector Graphics

The <svg> tag helps to describe the 2D Graphics and Graphical applications in XML for the website.

These images are normally smaller in size and on Zooming, the quality of image does not get impacted.

SVG is a W3C recommendation introduced in 14 January 2003 as part of HTML5.

SVG displays in the same way as how png, jpg or gif files are displayed in the web. 

To learn more about SVG, Click Here.

<svg width=”val” height=”val”>….</svg>


<svg width="200" height="200">
  <circle cx="65" cy="65" r="50"
    stroke="hotpink" stroke-width="10" fill="skyblue" />

How Browser will display

BLOCK Level.

Difference between HTML4.01, XHTML and HTML5

NA NA New tag in HTML5

Attributes used with <svg> tag

There are many attributes which can be used with the <svg> tag but the below ones are commonly used –

Attribute Description
width Width of the SVG file.
height Height of the SVG file.

Global Attributes

The <svg> tag supports Global attributes.

Event Attributes

The <svg> tag supports Event attributes.

Supporting Browsers

supporting-browsers for tags

Related Tags

The <canvas> tag is little similar.

Tutorials for all brains!