svg

Time:2021-4-3

Inline svg

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

Svg advantages

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.

Canvas uses JavaScript to draw 2D graphics.

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

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.

Canvas SVG
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