HTML5 – 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:


Firefox 3.7 has also introduced a configuration option ("about:config") where you can enable HTML5 using the following steps:

1. Type about:config in your Firefox address bar.
2. Click the "I'll be careful, I promise!" button on the warning message that appears (and make sure you adhere to it!).
3. Type html5.enable into the filter bar at the top of the page.
4. Currently it would be disabled, so click it to toggle the value to true.

Now your Firefox HTML5 parser should now be enabled and you should be able to experiment with the following examples.

---