html5 svg study guide - SVG basics_html5 tutorial skills

Baidu Encyclopedia:

SVG Scalable Vector Graphics is a graphics format based on Extensible Markup Language (XML) for describing two-dimensional vector graphics. SVG is a new two-dimensional vector graphics format developed by W3C and is also the network vector graphics standard in the specification. SVG strictly follows XML syntax and uses a descriptive language in text format to describe image content. Therefore, it is a vector graphics format that is independent of image resolution.

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 are enlarged or resized The graphics quality will not be lost
SVG is a standard of the World Wide Web Consortium
SVG is an integral part of W3C standards such as DOM and XSL

The difference between

Canvas and SVG:
　SVG
　SVG is a language that uses XML to describe 2D graphics.
SVG is based on XML, which means every element in the SVG DOM is available. You can attach a JavaScript event handler to an element.
　In SVG, each drawn shape is considered an object. If the properties of an SVG object change, the browser can automatically reproduce the graphic.
Features:
Not dependent on resolution
Supports event handlers
Best suited for applications with large rendering areas (such as Google Maps)
High complexity will slow down rendering (any Applications that overuse DOM are not fast)
　Not suitable for game applications
Canvas
Canvas draws 2D graphics through JavaScript.
Canvas is rendered pixel by pixel.
In canvas, once the graphic is drawn, it will no longer receive the browser's attention. If its position changes, the entire scene needs to be redrawn, including any objects that may have been covered by graphics.
Features:
Resolution dependent
No support for event handlers
Weak text rendering capabilities
Ability to save result images in .png or .jpg format
Best for image-intensive applications Games where many objects are frequently redrawn

svg example:

Copy code

The code is as follows: