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 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.
HTML5 - SVG Circle
Following is the HTML5 version of an SVG example which would draw a cricle using
DOCTYPE html>
<head>
<title>SVGtitle>
<meta charset="utf-8" />
head>
<body>
<h2>HTML5 SVG Circleh2>
<svg id="svgelem" height="200" xmlns="http://www.w3.org/2000/svg">
<circle id="redcircle" cx="50" cy="50" r="50" fill="red" />
svg>
body>
html>
This would produce following result in HTML5 enabled latest version of Firefox.
HTML5 - SVG Rectangle
Following is the HTML5 version of an SVG example which would draw a rectangle using
DOCTYPE html>
<head>
<title>SVGtitle>
<meta charset="utf-8" />
head>
<body>
<h2>HTML5 SVG Rectangleh2>
<svg id="svgelem" height="200" xmlns="http://www.w3.org/2000/svg">
<rect id="redrect" width="300" height="100" fill="red" />
svg>
body>
html>
This would produce following result in HTML5 enabled latest version of Firefox.
HTML5 - SVG Line
Following is the HTML5 version of an SVG example which would draw a line using
DOCTYPE html>
<head>
<title>SVGtitle>
<meta charset="utf-8" />
head>
<body>
<h2>HTML5 SVG Lineh2>
<svg id="svgelem" height="200" xmlns="http://www.w3.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, width of the stroke etc.
This would produce following result in HTML5 enabled latest version of Firefox.
HTML5 - SVG Ellipse
Following is the HTML5 version of an SVG example which would draw an ellipse using
DOCTYPE html>
<head>
<title>SVGtitle>
<meta charset="utf-8" />
head>
<body>
<h2>HTML5 SVG Ellipseh2>
<svg id="svgelem" height="200" xmlns="http://www.w3.org/2000/svg">
<ellipse cx="100" cy="50" rx="100" ry="50" fill="red" />
svg>
body>
html>
This would produce following result in HTML5 enabled latest version of Firefox.
HTML5 - SVG Polygon
Following is the HTML5 version of an SVG example which would draw a polygon using
DOCTYPE html>
<head>
<title>SVGtitle>
<meta charset="utf-8" />
head>
<body>
<h2>HTML5 SVG Polygonh2>
<svg id="svgelem" height="200" xmlns="http://www.w3.org/2000/svg">
<polygon points="20,10 300,20, 170,50" fill="red" />
svg>
body>
html>
This would produce following result in HTML5 enabled latest version of Firefox.
HTML5 - SVG Polyline
Following is the HTML5 version of an SVG example which would draw a polyline using
DOCTYPE html>
<head>
<title>SVGtitle>
<meta charset="utf-8" />
head>
<body>
<h2>HTML5 SVG Polylineh2>
<svg id="svgelem" height="200" xmlns="http://www.w3.org/2000/svg">
<polyline points="0,0 0,20 20,20 20,40 40,40 40,60" fill="red" />
svg>
body>
html>
This would produce following result in HTML5 enabled latest version of Firefox.
HTML5 - SVG Gradients
Following is the HTML5 version of an SVG example which would draw a ellipse using
Similar way you can use
DOCTYPE html>
<head>
<title>SVGtitle>
<meta charset="utf-8" />
head>
<body>
<h2>HTML5 SVG Gradient Ellipseh2>
<svg id="svgelem" height="200" xmlns="http://www.w3.org/2000/svg">
<defs>
<radialGradient id="gradient" cx="50%" cy="50%" r="50%"
fx="50%" fy="50%">
<stop offset="0%" style="stop-color:rgb(200,200,200);
stop-opacity:0"/>
<stop offset="100%" style="stop-color:rgb(0,0,255);
stop-opacity:1"/>
radialGradient>
defs>
<ellipse cx="100" cy="50" rx="100" ry="50"
style="fill:url(#gradient)" />
svg>
body>
html>
This would produce following result in HTML5 enabled latest version of Firefox.
-
Average:
-
Reads(876)
-
Trackback(0)
-
Permalink
Comments (0)