After going through the previous chapter now you may have familiar with SUMMARY Element. In this chapter we will learn about the SVG Element. We will also see some differences between the CANVAS and SVG Element.

<svg> . . . </svg>

The SVG Element is used for graphical representation with HTML5. Sometimes we feel that we need to draw a graphic representation. If there is a recommendation not to use of graphics software then the mandatory task will be to create with code section. In HTML5 We came to know about the CANVAS, by which we were able to create the graphical representation. But there was also a lot of codes and scripting we had to write for even a single image or 2D output.

Now the new feature of HTML5 is SVG ELEMENT (Scalable Vector Graphics Element), by which we can also draw the graphical representation. There are some certain additional features, we would like to introduce it in below given list.

✔ It defines the Vector based graphics

✔ The script of SVG is in XML format

✔ Since it is vector based graphics, So there is no any chance to loose the quality even on zoomed situation

✔ Every independent element can be animated also

✔ It is the recommendation of W3C

Here is the Syntax for SVG Element

Supported Browser
html5 tutorial html5 tutorial html5 tutorial html5 tutorial html5 tutorial


<svg> The additional element will go here </svg>

Below is complete syntax along with example


<!DOCTYPE html>

<html>
	
    <head>
    	 <title>Title name will go here</title>
    </head>
    
    <body>
		
		<svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="190">
			<polygon points="100,10 40,180 190,60 10,60 160,180"/>
		</svg>
        
    </body>
    
</html>

Download

Below are some difference that we can find out between HTML5 CANVAS and HTML5 SVG:

✔ It is created with the help of Java Script ✔ It is created in XML format
✔ It is rendered pixel by pixel ✔ Since it is in XML format, So we can also call external Java Script for even handling and etc.
✔ It is Resolution Dependent ✔ It is Resolution Independent
✔ It has no support for event handling ✔ It has support for even handling
✔ It has low text rendering capabilities ✔ It has high text rendering capabilities
✔ The graphics output can be saved as jpg or png format ✔ The graphics output can’t be saved in image format
✔ Best suited for graphical intensive games ✔ Not suited for games application
✔ Once the graphic is drawn, it is forgotten by the browser ✔ It is always remembered by the browser