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
 

Article Extensions
Contents added by Sam Hobbs on Feb 17, 2012

I found some good samples of SVG. If you go to International Space Station - Wikimedia Commons then go to "ISS configuration changes" near the bottom there are SVG files and most or all of the PNG files have SVG versions. For example:

http://upload.wikimedia.org/wikipedia/commons/8/89/ISS_configuration_jul-2004_without_labels.svg

I am sure there is a better place to go for those; probably the NASA site has them but I will leave that for others to discover.

Mahak Gupta

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

COMMENT USING