HTML5 SVG

SVG is defined as scalable vector graphics.

HTML5 supports inline SVG.

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

SVG has several methods for drawing paths, boxes, circles, text, and graphic images.

What is SVG?

• SVG stands for Scalable Vector Graphics
• SVG is used to define vector-based graphics for the web
• SVG uses XML format to define graphics
• SVG images do not lose graphics quality when zoomed in or resized
• SVG is a standard of the World Wide Web Consortium

SVG Advantages

Compared to other image formats (such as JPEG and GIF), the advantages of using SVG are:

• SVG images can be created and modified with a text editor
• SVG images can be searched, indexed, scripted, or compressed
• SVG is scalable
• SVG images can be printed at high quality at any resolution
• SVG can be enlarged without degradation of image quality

Browser Support

The numbers in the table specify the first browser version that fully supports the element.

Embed SVG directly into HTML pages

In HTML5, you can embed SVG elements directly into an HTML page.

SVG Circle

Result:

SVG Five-pointed Star

Result:

To learn more about SVG tutorials, please visitSVG Tutorial。

Differences between SVG and Canvas

SVG is a language for describing 2D graphics using XML.

Canvas draws 2D graphics with JavaScript.

SVG is based on XML, which means that every element in the SVG DOM is available. You can attach JavaScript event handlers to an element.

In SVG, each drawn shape is treated as an object. If the attributes of an SVG object change, the browser can automatically redraw the shape.

Canvas is rendered pixel by pixel. In canvas, once a shape is drawn, it no longer receives the browser's attention. If its position changes, the entire scene also needs to be redrawn, including any objects that might have been covered by the shape.

Comparison of Canvas and SVG

The table below lists some differences between canvas and SVG.