HTML SVG

SVG (Scalable Vector Graphics)

SVG graphics, defined in XML, maintain scalability without loss of quality when zoomed or resized, and can be directly embedded in HTML pages.

All major browsers support SVG.

What is SVG?

·  SVG stands for Scalable Vector Graphics.

·  It is used to define vector-based graphics for the web.

·  SVG defines graphics in XML format.

·  Every element and attribute in SVG files can be animated.

·  SVG is a W3C recommendation.

·  SVG integrates with other standards like CSS, DOM, XSL, and JavaScript.

The <svg> Element

The HTML <svg> element serves as a container for SVG graphics.

SVG provides various methods for drawing paths, rectangles, circles, polygons, text, and more.

SVG Circle

Example

SVG Rectangle

Example

SVG Rectangle with Opacity and Rounded Corners

Example

SVG Star

Example

SVG Gradient Ellipse and Text

Example

Differences Between SVG and Canvas

SVG is a language for describing 2D graphics using XML, whereas Canvas draws 2D graphics on the fly using JavaScript.

Since SVG is XML-based, every element is accessible within the SVG DOM, allowing you to attach JavaScript event handlers to SVG graphics.

In SVG, each drawn shape is retained as an object. When the attributes of an SVG object are modified, the browser can automatically re-render the shape.

Canvas, on the other hand, renders graphics pixel by pixel. Once a graphic is drawn on a canvas, it is forgotten by the browser. To change its position, the entire scene, including any objects that were covered by the graphic, must be redrawn.

Comparison of SVG and Canvas

The table below highlights key differences between Canvas and SVG: