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:
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:
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:
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:
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:
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:
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:
8. 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:
