HTML5 and SVG

Scalable Vector Graphics (SVG) are part of the vector-based family of graphics. They are different from raster-based graphics, which store the color definition for each pixel in an array of data. The most common raster-based formats used on the web today are JPEG, GIF, and PNG, and each of these formats has strengths and weaknesses.

SVG has several advantages over any raster-based format:

• SVG graphics are created using mathematical formulas that require far less data to be stored in the source file because you don't have to store the data for each individual pixel.
• Vector images scale better. With images on the web, trying to scale an image up from its original size can result in distorted (or pixilated) images.

  The original pixel data was designed for a specific size. When the image is no longer that size, the program displaying the image guesses as to what data to use to fill in the new pixels. Vector images are more resilient; when the size of the image changes, the mathematical formulas can be adjusted accordingly.

• The source file size tends to be smaller, so SVG graphics load faster than their raster counterparts and use less bandwidth.
• SVG images are rendered by the browser and can be drawn programmatically. They can be changed dynamically, making them especially suited for data-driven applications, such as charts.
• The source file for an SVG image is a text-based file, so it's both accessible and search engine friendly.

HTML5 allows embeding SVG directly using 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.

HTML5 - SVG Rectangle

Following is the HTML5 version of an SVG example which would draw a rectangle using tag:

HTML5 SVG Rectangle