HTML5 <svg> tag - Scalable Vector Graphics

<svg id="svgelem" height="20" xmlns="http://www.w3.org/2000/svg">
<circle id="redcircle" cx="10" cy="10" r="10" fill="green" />
</svg>

SVG stands for Scalable Vector Graphics and it is a language for describing 2D-graphics and graphical applications in XML and the XML is then rendered by an SVG viewer.

SVG is mostly useful for vector type diagrams like Pie charts, Two-dimensional graphs in an X,Y coordinate system etc.

SVG became a W3C Recommendation 14. January 2003 and you can check latest version of SVG specification at SVG Specification.

Viewing SVG Files:

Most of the web browsers can display SVG just like they can display PNG, GIF, and JPG. Internet Explorer users may have to install the Adobe SVG Viewer to be able to view SVG in the browser.

Embeding SVG in HTML5

HTML5 allows embeding SVG directly using <svg>...</svg> tag which has following simple syntax:

<svg id="svgelem" height="100" xmlns="http://www.w3.org/2000/svg">
    <circle id="redcircle" cx="50" cy="50" r="50" fill="red" />
</svg>

<svg id="svgelem" height="100" xmlns="http://www.w3.org/2000/svg">
    <rect id="redrect" width="300" height="100" fill="green" />
</svg>