SVG Tag


Prev Tutorial Next Tutorial

<svg> tag

Html5 introduce new tag <svg>, SVG stands for Scalable Vector Graphics. It is used to define graphics for the Web. <svg> tag is container for SVG graphics.

SVG has several methods for drawing paths, boxes, circles, text, and graphic images. It is mostly used for vector type diagrams like pie charts, 2-Dimensional graphs in an X,Y coordinate system etc.

Draw circle using svg tag

To draw a circle you need <circle> tag with cx, cy and r attributes.

Example

<!DOCTYPE>
<html>
<body>
<svg width="100" height="100">
 <circle cx="50" cy="50" r="40" stroke="yellow" stroke-width="4" fill="red" />
</svg>
</body>
</html>

Result

Draw rectangle using svg tag

To draw a rectangle you need <rect> tag with it's attributes.

Example

<!DOCTYPE>
<html>
<body>
<svg width="200" height="100">
 <rect width="200" height="100" stroke="yellow" stroke-width="4" fill="red"  />
</svg>
</body>
</html>

Result

Draw polygon using svg tag

To draw a polygon you need <polygon> tag with points attribute of polygon tag.

Example

<!DOCTYPE>
<html>
<body>
<svg width="210" height="200">
 <polygon points="100,10 40,198 190,78 10,78 160,198"  
  style="fill:red;stroke:yellow;stroke-width:5;fill-rule:nonzero;" />
</svg>
</body>
</html>

Result

Browser supported

Element
<svg>YesYesYesYesYes

Why SVG is more preferred over other image formats ?

Due to following advantage with SVG web developers use this;

  • SVG images can be saved as the smallest size, unlike png, jpge and other image formate.
  • It does not contains fixed set of dots so it is easily print with high resolution.
  • SVG image can zoom a certain level without decrease the picture quality.
  • You can easily edit SVG image with using any text editor.

Prev Tutorial Next Tutorial

Advertisements
Download Projects