Introduction
HTML5 SVG is mostly used for applying graphical design to Web Pages. Following are the concepts covered.
- What is SVG
- Example of SVG
Description
SVG is a graphical language to develop the 2D graphics and graphical applications. SVG is known as Scalable Vector Graphics and which is recommended by the W3C in the year of 2003, 14 January. Second edition of SVG 1.1 was recommended in the year of 2011, 16 August which is the latest version of the SVG.
By using … these tags user can use SVG in HTML5 and syntax for the SVG animations is as shown below.
[html]
<svg xmlns=”http:// www.splessons.org/2000/svg”>
...
</svg>
[/html]
SVG elements are used to develop the boxes, circles, text, paths, graphics etc.
Description
<svg> elements are supported by all the latest browsers.Following are the browsers with versions supported by HTML5.
- Chrome 4.0
- Internet Explorer 9.0
- Mozilla Firefox3.0
- Safari 3.2
- Opera 10.1
Description
User can develop various animations using SVG elements such as
The examples below demonstrate the use of SVG Animations.
- Circle
- Rectangle
- Star
- Logo
Example 1
The code below demonstrates drawing a circle using SVG animation elements in HTML5.
[html]<!DOCTYPE html>
<html>
<body>
<svg width="100" height="100">
<circle cx="50" cy="50" r="40"
stroke="Black" stroke-width="4" fill="Blue" />
</svg>
</body>
</html>
[/html]
Result
By running the above code in a preferred browser following output appears.
Example 2
The code below demonstrates drawing a Rectangle using SVG animation elements in HTML5.
[html]<!DOCTYPE html>
<html>
<body>
<svg width="400" height="100">
<rect width="400" height="100"
style="fill:rgb(0,51,255);stroke-width:10;stroke:rgb(255,0,0)" />
</svg>
</body>
</html>
[/html]
Result
By running the above code in a preferred browser following output appears.
Example 3
The code below demonstrates drawing a Star using SVG Animation elements in HTML5.
[html]<!DOCTYPE html>
<html>
<body>
<svg width="300" height="200">
<polygon points="100,10 40,198 190,78 10,78 160,198"
style="fill:yellow;stroke:black;stroke-width:5;fill-rule:evenodd;" />
</svg>
</body>
</html>
[/html]
Result
By running the above code in a preferred browser following output appears.
Example 4
The code below demonstrates designing a Logo using SVG animation elements in HTML5.
[html]<!DOCTYPE html>
<html>
<body>
<svg height="330" width="2000">
<defs>
<linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%"
style="stop-color:rgb(255,0,0));stop-opacity:1" />
<stop offset="100%"
style="stop-color:rgb(0,51,255);stop-opacity:1" />
</linearGradient>
</defs>
<ellipse cx="210" cy="200" rx="200" ry="110" fill="url(#grad1)" />
<text fill="#ffffff" font-size="45" font-family="Verdana"x="100" y="215">splessons</text>
</svg>
</body>
</html>
[/html]
Result
By running the above code in a preferred browser following output appears.
Example 5
The code below demonstrates designing a Linear Gradient using SVG Animation elements in HTML5.
[html]<!DOCTYPE HTML>
<html>
<style>body{font-family:Verdana;}</style>
<body>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<defs>
<linearGradient id="linearGradient" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="20%" style="stop-color:#800080; stop-opacity:1" />
<stop offset="80%" style="stop-color:#CC33FF; stop-opacity:1" />
</linearGradient>
</defs>
<rect width="500" height="300"
fill="url(#linearGradient)" />
</svg>
</body>
</html>
[/html]
Result
By running the above code in a preferred browser following output appears.
Example 6
The code below demonstrates designing a Radial Gradient using SVG Animation elements in HTML5.
[html]<!DOCTYPE HTML>
<html>
<style>body{font-family:Verdana;}</style>
<body>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<defs>
<radialGradient id="radialGradient" cx="70%" cy="20%" r="60%" fx="20%" fy="20%">
<stop offset="0%" style="stop-color:#ffff00;stop-opacity:1" />
<stop offset="100%" style="stop-color:#fa4b2a;stop-opacity:1" />
</radialGradient>
</defs>
<rect width="500" height="300"
fill="url(#radialGradient)" />
</svg>
</body>
</html>
[/html]
Result
By running the above code in a preferred browser following output appears.
Example 7
The code below demonstrates designing a pattern using SVG Animation elements in HTML5.
[html]<!DOCTYPE HTML>
<html>
<style>body{font-family:Verdana;}</style>
<body>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<defs>
<pattern id="Circle"
width="10" height="10"
patternUnits="userSpaceOnUse">
<circle cx="1" cy="1" r="5" stroke="#000" stroke-width="2" fill=" #0000FF" />
</pattern>
</defs>
<circle cx="300" cy="100" r="95"
fill="url(#Circle)"/>
</svg>
</body>
</html>
[/html]
Result
By running the above code in a preferred browser following output appears.
Description
- HTML5 SVG animations are supported by all the latest browsers.
- HTML5 SVG has several methods to generate graphics on a web pages.
- HTML5 SVG is develop for designing 2D graphics.