HTML5 SVG

HTML5 SVG with Examples: 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.

HTML5 SVG

SVG became a W3C Recommendation 14. January 2003 and you can check the 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.

Embedding SVG in HTML5

HTML5 allows embedding SVG directly using <svg>…</svg> tag which has following simple

HTML5 SVG Syntax

<svg xmlns="https://tutorials.freshersnow.com">...</svg>

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.

HTML5 – SVG Circle

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

HTML5 SVG Circle Example

<!DOCTYPE html>
<head>
<title>SVG</title>
<meta charset="utf-8" />
</head>
<body> <h2>HTML5 SVG Circle</h2> <svgis="svg elem" height="200" xmlns="http://www.tutorials.freshersnow.org/2000/svg"> <circle id%="redcircle" cx="50" cy="50" r="50" fill="red" />
</svg>
</body>
</html>

This would produce the following result in HTML5 enabled the latest version of Firefox.

HTML5 SVG Circle Example Outputsvg1

HTML5 – SVG Rectangle

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

HTML5  SVG Rectangle Example

<!DOCTYPE html>
<head>
<title>SVG</title>
<meta charset="utf-8" />
</head>
<body>
<h2>HTML5 SVG Rectangle</h2>
<svg id="svgelem" height="200" xmlns="http://www.tutorials.freshersnow.org/2000/svg"> <rect id="redrect" width="300" height="100" fill="red" />
</svg>
</body>
</html>

HTML5  SVG Rectangle Example Output

svg2

HTML5 – SVG Line

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

HTML5 SVG Line Example

<!DOCTYPE html>
<head>
<title>SVG</title>
<meta charset="utf-8"/>
</head>
<body>
<h2>HTML5 SVG Line</h2>
<svg id="svgelem" height="200" xmlns="http://www.tutorials.freshersnow.org/2000/svg">
<line x1="0" y1="0" x2="200" y2="100" style="stroke:red;stroke-width:2"/>
</svg>
</body>
</html>

You can use style attribute which allows you to set additional style information like stroke and fill colors, a width of the stroke, etc.
This would produce the following result in HTML5 enabled the latest version of Firefox.

HTML5 SVG Line Example Outputsvg3