Reader Level:
Article
HTML 5

SVG in HTML5

By Mahak Gupta on Feb 17 2012
SVG means Scalable Vector Graphics. It is used to define vector based graphics. HTML5 has support for inline SVG.
    • Like
    • Love It
    • Awesome
    • Interesting
    • It's Okay
    • Thumbs Down
  • 7.4k
  • 0

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 embed in our HTML5 page:

<!DOCTYPE html>
 
<html>
 <
body>
 
    <svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="180">
 
<circle cx="100" cy="40" r="30" stroke="black"
 
stroke-width="3" fill="blue"/>
 
</svg>
 </
body>
 </
html>

Here is the output

SVGHtml1.gif


Here we create a polygon in SVG, which can be easily embeded in our HTML5 page:

<!DOCTYPE html>
 
<html>
 <
body>
 
    <svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="190">
 
<polygon points="80,5 20,90 190,60 5,60 160,90"
 
style="fill:Blue;stroke:Red;stroke-width:7;fill-rule:evenodd;" />
 
</svg>
 </
body>
 </
html>

Here is the output

SVGHtml2.gif

Rotate the Text in SVG

<!DOCTYPE html>

<html>

<body>

    <svg xmlns="http://www.w3.org/2000/svg" version="1.1">

<text x="0" y="19" fill="Blue" transform="rotate(30 20,60)">My name is Mahak</text>

</svg>

</body>

</html>

Here is the Output


SVGHtml3.gif

Here we create a line in SVG

<!DOCTYPE html>

<html>

<body>

    <svg xmlns="http://www.w3.org/2000/svg" version="1.1">

<line x1="0" y1="0" x2="150" y2="150"

style="stroke:rgb(255,0,0);stroke-width:3"/>

</svg>

</body>

</html>

Here is The Output

SVGHtml4.gif