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.