Svg HTML

HTML <svg> Tag

The HTML <svg> tag represents Scalable Vector Graphics. To describe two-dimensional vector and mixed vector/raster graphics in XML, HTML SVG is used. It is a modularized language and a W3C recommendation. The XML text files contain the definition of the SVG images and their behaviors. Every element and every attribute in an SVG file can be animated.

Example 1: HTML SVG Circle.

<!DOCTYPE html>
<html>
<body>
<h3>I am a Circle.</h3>
<svg width="100" height="100">
  <circle cx="50" cy="50" r="30" stroke="red" stroke-width="3" fill="pink" />
</svg>
</body>
</html>

Explanation:

In the above example, we are drawing a circle by using the SVG tag and the cx, cy, and r attributes of the circle tag.

Example 2: HTML SVG Rectangle.

<!DOCTYPE html>
<html>
<body>
<h3>I am a Rectangle.</h3>
<svg width="100" height="200">
  <rect width="100" height="200" style="fill:crimson;stroke-width:20;stroke:yellow" />
</svg>
</body>
</html>

Explanation:

In the above example, we are drawing a rectangle by using the SVG tag and the width and height attributes of the HTML rect tag.

Example 3: HTML SVG polygon.

<!DOCTYPE html>
<html>
<body>
<h3>I am a Star.</h3>
<svg width="200" height="200">
  <polygon points="100,10 40,198 190,78 10,78 160,198"
  style="fill:gray;stroke:crimson;stroke-width:4;fill-rule:evenodd;" />
</svg>
</body>
</html>

Explanation:

In the above example, we are drawing a polygon by using the SVG tag and the points attribute of the polygon tag.

Importance of SVG image format:

  • The images in the SVG format can be saved in the smallest size possible.
  • It does not contain a fixed set of dots, like those in bitmap image formats (JPG or PNG).
  • High-quality printing at any resolution is thus possible with the SVG images.
  • Up to a certain level, it can also be zoomed in without degradation of the picture quality.
  • An SVG image can be created and edited with any text editor because it is defined in XML text files.

Supporting Browsers:

Chrome, IE, Firefox, Opera, and Safari.