Post
Ask Question

SVG in HTML5

Introduction

 
SVG means Scalable Vector Graphics. It is used to define vector-based graphics. HTML5 has support for inline SVG.
 
Here we create a circle in SVG, which can be easily embedded in our HTML5 page:
  1. <!DOCTYPE html>  
  2.  <html>  
  3.  <body>  
  4.      <svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="180">  
  5.  <circle cx="100" cy="40" r="30" stroke="black"  
  6.  stroke-width="3" fill="blue"/>  
  7.  </svg>  
  8.  </body>  
  9.  </html> 
Here is the output
 
SVGHtml1.gif
 
Here we create a polygon in SVG, which can be easily embeded in our HTML5 page:
  1. <!DOCTYPE html>  
  2.  <html>  
  3.  <body>  
  4.      <svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="190">  
  5.  <polygon points="80,5 20,90 190,60 5,60 160,90"  
  6.  style="fill:Blue;stroke:Red;stroke-width:7;fill-rule:evenodd;" />  
  7.  </svg>  
  8.  </body>  
  9.  </html> 
Here is the output
 
SVGHtml2.gif
 
Rotate the Text in SVG
  1. <!DOCTYPE html>  
  2. <html>  
  3. <body>  
  4.     <svg xmlns="http://www.w3.org/2000/svg" version="1.1">  
  5. <text x="0" y="19" fill="Blue" transform="rotate(30 20,60)">My name is Mahak</text>  
  6. </svg>  
  7. </body>  
  8. </html> 
Here is the Output
SVGHtml3.gif
 
Here we create a line in SVG
  1. <!DOCTYPE html>  
  2. <html>  
  3. <body>  
  4.     <svg xmlns="http://www.w3.org/2000/svg" version="1.1">  
  5. <line x1="0" y1="0" x2="150" y2="150"  
  6. style="stroke:#ff0000;stroke-width:3"/>  
  7. </svg>  
  8. </body>  
  9. </html> 
Here is The Output
 
SVGHtml4.gif


Similar Articles