HTML5 supports inline SVG.
What is SVG?
SVG refers to Scalable Vector Graphics
SVG is used to define vector-based graphics for the network
SVG defines graphics in XML format
SVG images will not lose their graphics quality when enlarged or resized
SVG is the standard of the World Wide Web Consortium
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 with high quality at any resolution
SVG can be enlarged without degrading image quality
Internet Explorer 9+, Firefox, Opera, Chrome, and Safari support inline SVG.
Embed SVG directly into an HTML page
In HTML5, you can embed SVG elements directly into an HTML page:
Program running result:
To learn more about the SVG tutorial, visit the SVG tutorial.
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 graphic.
Canvas is rendered pixel by pixel. In a canvas, once the graph is drawn, it won't continue to get the attention of the browser. If its position changes, the entire scene needs to be redrawn, including any objects that may have been covered by the graphic.
Comparison of Canvas and SVG
The table below lists some of the differences between canvas and SVG.
| Canvas|| SVG|
Independent of resolution
Event handler is not supported
Support event handler
Weak text rendering ability
Best for applications with large rendering areas (like Google Maps)
Ability to save result imagesin .png or .jpg format
High complexity slows down rendering (any application that overuses DOM is not fast)
Best for image-intensive games,
Many of these objects will be frequent
Not suitable for gaming applications