Scalable Vector Graphics in HTML5

Scalable Vector Graphics in HTML5

In this post I try to intoduce Scalable Vector Graphics(SVG) with some examplesScalable Vector Graphics is used to define vector-based graphics for the high end  Web Applications. It defines the graphics in XML format.

The main advantage of SVG is it does not make any lose in quality even if they are zoomed or resized. One of the added advantage of SVG is every element and every attribute in SVG files can be animated. Here we can see a example of creating an circle with SVG

<!DOCTYPE html>
<html>
<body>

<h1>Circle Using SVG</h1>

<svg>
   <circle cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="green" />
</svg>
 
</body>
</html>

5 posts / 0 new
Last post
For more complete information about compiler optimizations, see our Optimization Notice.

Rectangle Using SVG

<!DOCTYPE html>
<html>
<body>

<svg>
  <rect width="200" height="80" style="fill:rgb(0,5,255);stroke-width:1;stroke:rgb(0,0,0)" />
</svg>
 
</body>
</html>

Ellipse Using SVG

<!DOCTYPE html>
<html>
<body>

<svg>
  <ellipse cx="300" cy="80" rx="100" ry="50" style="fill:green;stroke:purple;stroke-width:2" />
</svg>

</body>
</html>

Line using SVG

<svg>
  <line x1="0" y1="0" x2="200" y2="200"
  style="stroke:rgb(255,0,0);stroke-width:2"/>
</svg>

you should use canvas tag for draw on browser

Leave a Comment

Please sign in to add a comment. Not a member? Join today