# 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 behaviours. 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>

Output:

Explanation:

In the above example, we are drawing a circle by using the SVG tag and 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>

Output:

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>

Output:

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 of the SVG format can be saved as 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 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.