HTML5 - SPLessons

HTML5 SVG

Chapter 8

SPLessons 5 Steps, 3 Clicks
5 Steps - 3 Clicks

HTML5 SVG

HTML5 SVG

shape Introduction

HTML5 SVG is mostly used for applying graphical design to Web Pages. Following are the concepts covered.

  • What is SVG
  • Example of SVG

What is SVG

shape 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.


<svg xmlns=”http:// www.splessons.org/2000/svg”>
...
</svg>

SVG elements are used to develop the boxes, circles, text, paths, graphics etc.

Browser Support

shape Description

<svg> elements are supported by all the latest browsers.Following are the browsers with versions supported by HTML5.

Example of SVG

shape Description

User can develop various animations using SVG elements such as

The examples below demonstrate the use of SVG Animations.

shape Example 1

The code below demonstrates drawing a circle using SVG animation elements in HTML5.

<!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>

Result
By running the above code in a preferred browser following output appears.

shape Example 2

The code below demonstrates drawing a Rectangle using SVG animation elements in HTML5.

<!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>

Result
By running the above code in a preferred browser following output appears.

shape Example 3

The code below demonstrates drawing a Star using SVG Animation elements in HTML5.

<!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>

Result
By running the above code in a preferred browser following output appears.

shape Example 4

The code below demonstrates designing a Logo using SVG animation elements in HTML5.

<!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>

Result
By running the above code in a preferred browser following output appears.

shape Example 5

The code below demonstrates designing a Linear Gradient using SVG Animation elements in HTML5.

<!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>                                                                                                          

Result
By running the above code in a preferred browser following output appears.

shape Example 6

The code below demonstrates designing a Radial Gradient using SVG Animation elements in HTML5.

<!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>                                                                                                          

Result
By running the above code in a preferred browser following output appears.

shape Example 7

The code below demonstrates designing a pattern using SVG Animation elements in HTML5.

<!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>                                                                                                          

Result
By running the above code in a preferred browser following output appears.

Summary

shape 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.