Note/Info The <svg> tag is a new tag in HTML5.
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.
Syntax:
<svg width=”val” height=”val”>….</svg>
Example
<svg width="200" height="200"> <circle cx="65" cy="65" r="50" stroke="hotpink" stroke-width="10" fill="skyblue" /> </svg>
How Browser will display
BLOCK Level.
Difference between HTML4.01, XHTML and HTML5
| HTML4 | XHTML | 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
Related Tags
The <canvas> tag is little similar.