Login

Username:

Password: 

Join us Now |  Forgot Password? | Forgot UserName?

HTML

Learn step by step



HTML5 SVG

What is SVG?
  • SVG stands for Scalable Vector Graphics
  • SVG uses XML format to define graphics
  • SVG provides vector based graphics
  • Every SVG attribute and element support animation
  • SVG graphics do not loose pixels when zoomed in or out
  • SVG is a W3C recommended
SVG Advantages

Advantages of using SVG over other image formats (like png, jpeg and gif) are:

  • SVG images can be indexed, scripted, compressed
  • SVG images are very scalable
  • SVG images are zoomable without degradation in quality
  • All text editors support SVG image creation and edition
How to view SVG Files:

Almost all 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 plugin in order to view SVG files.

Embedding SVG in HTML5

HTML5 allows embedding SVG directly using <svg>...</svg> tag which has following simple syntax:

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

Firefox 3.7 has 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 Rectangle

<!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.w3.org/2000/svg">
<rect id="greenrect" width="300" height="100" fill="green" />
</svg>
</body>
</html>

This would produce following result in HTML5 supported browsers.

HTML5 SVG Rectangle
HTML5 - SVG Gradients

In below example we will draw a ellipse using <ellipse> tag and would use <radialGradient> tag to define an SVG radial gradient.

Similar way you can use <linearGradient> tag in order to create SVG linear gradient.


<!DOCTYPE html>
<head>
<title>SVG</title>
<meta charset="utf-8" />
</head>
<body>
<h2>HTML5 SVG Gradient Ellipse</h2>
<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 supporting browsers.

HTML5 SVG Gradient Ellipse


Related Videos