ARTICLE

SVG in HTML5

Posted by Mahak Gupta Articles | HTML 5 February 17, 2012
SVG means Scalable Vector Graphics. It is used to define vector based graphics. HTML5 has support for inline SVG.
Reader Level:

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.

COMMENT USING