Reader Level:
Article

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.

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
 

Mahak Gupta

My name is Mahak Gupta. I am a C# Corner MVP.

COMMENT USING