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
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
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
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
