Knowledge of the basic concepts of SVG, and the difference between SVG and canvas

This article mainly introduces the basic concept of SVG knowledge, as well as the difference between SVG and canvas, and finally gives a simple example, so that you can better understand the SVG scalable vector graphics. Recommend to everyone.

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

What is SVG?

SVG refers to a scalable vector graphic (Scalable vector graphics)
SVG is used to define vector-based graphics for the network
SVG defines graphics using XML format
SVG images have no loss of graphics quality when zoomed in or changed size
SVG is the standard of the World Wide Web Consortium
SVG is a whole with a broad standard 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 that every element in the SVG DOM is available. You can attach a JavaScript event handler to an element.
In SVG, each drawn shape is treated as an object. If the properties of the SVG object change, the browser can automatically reproduce the graphic.
Characteristics:
Not dependent on resolution
Support for event handlers
Best for applications with large rendering areas (e.g. Google Maps)
High complexity slows rendering speed (any applications that overuse the DOM are unpleasant)
Not suitable for gaming applications
Canvas
Canvas uses JavaScript to draw 2D graphics.
The Canvas is rendered per pixel.
In the canvas, once the drawing is drawn, it will not continue to get the attention of the browser. If its position changes, the entire scene also needs to be redrawn, including any objects that might have been overwritten by the graphic.
Characteristics:
Dependent resolution
Event handlers are not supported
Weak text rendering capabilities
Ability to save result images in. png or. jpg format
Best for image-intensive games where many of the objects are redrawn frequently

SVG examples:

Copy CodeThe code is as follows:
<svg width= "100%" height= "100%" >
<circle cx= "cy=" "r=" stroke= "#ff0" stroke-width= "3" fill= "Red"/>
</svg>

Knowledge of the basic concepts of SVG, and the difference between SVG and canvas