Scalable Vector Graphics in HTML5

Scalable Vector Graphics in HTML5

PONRAM's picture

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.
PONRAM's picture

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>

PONRAM's picture

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>

PONRAM's picture

Line using SVG

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

JudLup Luna's picture

you should use canvas tag for draw on browser

JudLup Luna

Login to leave a comment.