HTML5 SVG Tags, TutorialsPoint, HTML5 SVG Tags Tutorial

HTML5 SVG Tag

The SVG ( Scalable Vector Graphics) Element is used for graphical representation with HTML5.

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.

1. It defines the Vector based graphics

2. The script of SVG is in XML format

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

4. Every independent element can be animated also

5. It is the recommendation of W3C

Example :

	
<!DOCTYPE html>
<html lang="en">
    <head>
       <title>HTML5 SVG Tag</title>
    </head>
    
    <body>
    
        <svg id="svgelem" height="150" xmlns="http://www.w3.org/2000/svg">
         <circle id="bluecircle" cx="40" cy="40" r="40" fill="blue" />
        </svg><br>
        
        <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><br>
        
        <svg id="svgelem" height="200" xmlns="http://www.w3.org/2000/svg">
         <line x1="0" y1="0" x2="200" y2="100" style="stroke:blue;stroke-width:5"/>
      </svg><br>
      
      <svg id="svgelem" height="200" xmlns="http://www.w3.org/2000/svg">
 
         <defs>
            <radialGradient id="gradient" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">
               <stop offset="0%" style="stop-color:rgb(200,200,200); stop-opacity:0"/>
               <stop offset="110%" style="stop-color:rgb(0,0,255); stop-opacity:1"/>
            </radialGradient>
         </defs>
 
         <ellipse cx="100" cy="50" rx="100" ry="50" style="fill:url(#gradient)" />
 
      </svg>
      
    </body>
    
</html>

Output :

HTML5 Tutorial