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 −

<svg xmlns="http://www.w3.org/2000/svg">
   ...    
</svg>

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

  • Type about:config in your Firefox address bar.
  • Click the “I’ll be careful, I promise!” button on the warning message that appears (and make sure you adhere to it!).
  • Type html5.enable into the filter bar at the top of the page.
  • 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.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s