HTML svg Tag

HTML <svg>Tag: The HTML svg  tag specifies container for SVG graphics. SVG stands for Scalable Vector Graphics. SVG graphics do NOT lose any quality if they are zoomed or resized. And every element and every attribute in SVG files can be animated. SVG has several methods for drawing paths, boxes, circles, text, and graphic images.

HTML <svg>Tag

SVG images are scalable. And they can be printed with high quality at any resolution. It’s resolution independent whereas CANVAS is resolution dependent. And also supports event handlers whereas CANVAS doesn’t have support for event handlers.

Syntax: <svg> Text </svg>



Browser compatibility

The HTML<svg> tag is supported by different types of browsers.

  • Chrome-4.0
  • Firefox-3.5
  • Opera-10.5
  • Safari-4.0
  • Internet Explorer-9.0

Example:

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

Output:

html svg tag