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