HTML5 SVG Element

  • SVG stands for Scalable Vector Graphics.
  • SVG defines the 2-d graphics in XML.
  • SVG graphics never be fade after stretching and resizing.
  • SVG is used in more vector diagram and charts.
  • SVG is the W3C recommendation.
  • HTML5 has <svg> tag to use it.
Syntax :
<svg xmlns="http://www.w3.org/2000/svg">
...    
</svg>

HTML5 - SVG Line

Code :
<svg id="svgline" height="200"
	xmlns="http://www.w3.org/2000/svg">
    <line x1="0" y1="0" x2="200" y2="100"
          style="stroke:blue;stroke-width:2"/>
</svg>
Output :
SVG circle

HTML5 - SVG Circle

Code :
<svg id="svgcircle" height="150"
	xmlns="http://www.w3.org/2000/svg">
    <circle id="bluecircle" cx="50" cy="50"
    	r="50" fill="blue" />
</svg>
Output :
SVG circle

HTML5 - SVG Rectangle

Code :
<svg id="svgrec" height="200"
	xmlns="http://www.w3.org/2000/svg">
    <rect id="bluerect" width="300" height="100"
    	fill="blue"/>
</svg>
Output :
SVG circle

HTML5 - SVG Ellipse

Code :
<svg id="svgellipse" 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(7,145,209);
      stop-opacity:0"/>
      <stop offset="100%" style="stop-color:rgb(7,145,209);
      stop-opacity:1"/>
      </radialGradient>
   </defs>
   <ellipse cx="100" cy="50" rx="100" ry="50" 
      style="fill:url(#gradient)" />
</svg>
Output :
SVG circle