What is SVG?
- Svg refers to scalable vector graphics
- SVG is used to define vector based graphics for networks
- Svg uses XML format to define graphics
- The quality of SVG image will not be lost when it is enlarged or changed
- 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 as follows:
- 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
Embedding SVG directly into HTML page
In HTML5, you can embed SVG elements directly into HTML pages
The results are as follows
The difference between SVG and canvas
SVG is a language that uses XML to describe 2D graphics.
In SVG, every drawing is regarded as an object. If the attributes of the SVG browser change automatically, then the SVG browser can automatically reproduce the attributes of the object.
Canvas is rendered pixel by pixel. In canvas, once the drawing is completed, it will not continue to get the attention of the browser. If its position changes, then the entire scene also needs to be redrawn, including any objects that may have been covered by graphics.
|Resolution dependence does not support event processing, weak text rendering ability, and the ability to save the result image in. PNG or. JPG format is the most suitable for image intensive games, in which many objects will be redrawn frequently||Resolution independent event processor is most suitable 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) and is not suitable for game applications|