HTML5 Inline SVG
HTML5 supports inline SVG.
What is SVG?
SVG refers to Scalable Vector Graphics (Scalable Vector Graphics)
SVG is used to define vector-based graphics for the web
SVG uses XML format to define graphics
SVG images will not lose their graphic quality when they are enlarged or changed in size
SVG is the standard of the World Wide Web Consortium
Compared with other image formats (such as JPEG and GIF), the advantages of using SVG are:
SVG images can be created and modified through a text editor
SVG images can be searched, indexed, scripted or compressed
SVG is scalable
SVG images can be printed with high quality at any resolution
SVG can be enlarged without degradation of image quality
Internet Explorer 9+, Firefox, Opera, Chrome, and Safari support inline SVG.
Embed SVG directly into HTML page
In HTML5, you can embed SVG elements directly in HTML pages:
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="190">
<polygon points="100,10 40,180 190,60 10,60 160,180" style="fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;">
To learn more about the SVG tutorial, please visit the SVG tutorial . (under construction)
The difference between SVG and Canvas
SVG is a language that uses XML to describe 2D graphics.
In SVG, each drawn graphic is treated as an object. If the properties of the SVG object change, the browser can automatically reproduce the graphics.
Canvas is rendered pixel by pixel. In canvas, once the graphic is drawn, it will not continue to get the browser's attention. If its position changes, then the entire scene needs to be redrawn, including any objects that may have been covered by graphics.
Comparison of Canvas and SVG
The following table lists some of the differences between canvas and SVG.
Depends on resolution
Event handler is not supported
Weak text rendering capabilities
Ability to save the resulting image in .png or .jpg format
Best for image-intensive games where many objects will be redrawn frequently
Independent of resolution
Support event handler
Best for applications with large rendering areas (such as Google Maps)
High complexity will slow down rendering speed (any application that overuses DOM is not fast)
Not suitable for gaming applications