HTML5 Scalable Vector Graphics (SVG)

Introduction to SVG

SVG is abbreviated as Scalable Vector Graphics.
It is a language used for describing 2D-graphics and graphical applications.
SVG viewer is rendered by XML.
SVG is mostly used for vector type diagrams like Pie charts, 2D graphs in an X,Y coordinate system.
It is a W3C recommendation.

Embeding SVG in HTML5

While Google Chrome supports SVG directly, embedding will be required for Firefox.

The syntax for embedding SVG in HTML5 is as follows:
<svg xmlns=“http://www.w3.org/2000/svg”>
….......
</svg>

Enabling HTML5 in Firefox

A configuration option (“about:config”) is introduced by Firefox 3.7 where by using the following steps we can enable HTML5 -

1. In the address bar of Firefox type about:config.
2. On the warning message that appears click the “I'll be careful, I promise!”.
3. In the filter bar at the top of the page type html5.enable.
4. Currently its value will be disabled, click it to toggle the value to true.
5. HTML5 will be enabled.

Drawing with SVG

SVG has various methods for drawing circle, path, rectangle etc.

1. SVG Circle

Example : Demonstration of drawing an SVG circle

<!DOCTYPE html>
<html>
     <body>

          <svg width="300" height="200">
               <circle cx="100" cy="100" r="90" stroke="orange" stroke-width="4" fill="yellow" />
          </svg>

     </body>
</html>

Output:
svg circle

2. SVG Rectangle

Example : Demonstration of drawing an SVG rectangle

<!DOCTYPE html>
<html>
     <body>

          <svg width="300" height="100">
               <rect width="300" height="100" style="fill:rgb(255,0,0);stroke-width:10;stroke:rgb(0,0,0)" />
          </svg>

     </body>
</html>

Output:

svg rect

3. SVG Rounded Rectangle

Example : Demonstration of drawing an SVG Rounded Rectangle

<!DOCTYPE html>
<html>
     <body>

          <svg width="400" height="300">
               <rect x="50" y="20" rx="20" ry="20" width="200" height="200"
               style="fill:hotpink;stroke:black;stroke-width:5;opacity:0.5" />
          </svg>
     </body>
</html>

Output:
svg rounded rect

4. SVG Star

Example : Demonstration of drawing an SVG Star

<!DOCTYPE html>
<html>
     <body>

          <svg width="500" height="500">
               <polygon points="120,30 60,218 210,98 30,98 180,218"
               style="fill:yellow;stroke:purple;stroke-width:5;fill-rule:even;" />
          </svg>

     </body>
</html>

Output:
svg star

5. SVG Logo

Example : Demonstration of drawing an SVG Logo

<!DOCTYPE html>
<html>
<body>

     <svg height="130" width="700">
          <defs>
               <linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%">
                    <stop offset="0%" style="stop-color:rgb(255,160,122);stop-opacity:0.5" />
                    <stop offset="100%" style="stop-color:rgb(0,160,122);stop-opacity:1" />
               </linearGradient>
          </defs>
          <ellipse cx="100" cy="70" rx="95" ry="45" fill="url(#grad1)" />
          <text fill="black" font-size="25" font-family="Verdana" x="22" y="76">TutorialRide</text>
     </svg>

</body>
</html>

Output:
svg logo

6. SVG Line

Example : Demonstration of drawing an SVG Line

<!DOCTYPE html>
<html>
     <body>

          <svg width="500" height="200">
               <line x1="0" y1="0" x2="200" y2="100" style="stroke:red;stroke-width:3"/>
          </svg>

     </body>
</html>

Output:

svg line

7. SVG Polygon

Example : Demonstration of drawing an SVG Polygon

<!DOCTYPE html>
<html>
     <body>

          <svg width="500" height="200">
               <polygon  points="30,20 400,30,180,60" fill="blue" stroke="black" stroke-width="2" />
          </svg>

     </body>
</html>

Output:

svg polygon

8. SVG Polyline

Example : Demonstration of drawing an SVG Polyline

<!DOCTYPE html>
<html>
     <body>

          <svg width="500" height="200">
               <polyline points="10,10 10,50 50,50 50,70 70,70 70,90" fill="orange"/>
          </svg>

     </body>
</html>

Output:

svg gradient