Basic svg knowledge in html5 + SVG Learning Guide, html5svg

Basic svg knowledge in html5 + SVG Learning Guide, html5svg
This article mainly introduces the basic concepts of SVG and the differences between SVG and CANVAS. Finally, we provide a simple example to help you better understand the Scalable Vector Graphics of SVG. We recommend it to you.

Baidu Encyclopedia:

Scalable Vector Graphics is a format used to describe two-dimensional Vector Graphics based on the Extensible Markup Language (XML. SVG is a new two-dimensional vector graphics format developed by W3C. It is also the Standard for network vector graphics in specifications. SVG strictly follows the XML syntax and uses descriptive language in text format to describe image content. Therefore, it is a vector image format unrelated to image resolution.

What is SVG?

SVG refers to Scalable Vector Graphics)
SVG is used to define vector-Based Graphics for Networks
SVG defines images in XML format
The image quality of SVG images is not lost when they are enlarged or changed.
SVG is the standard of the World Wide Web Alliance
SVG is integrated with W3C standards such as DOM and XSL.

Differences between Canvas and SVG:
SVG
SVG is a language that uses XML to describe 2D images.
SVG is based on XML, which means that every element in the svg dom is available. You can append a JavaScript event processor to an element.
In SVG, each drawn image is regarded as an object. If the attributes of an SVG object change, the browser can automatically reproduce the image.
Features:
Resolution independent
Event processor supported
Most suitable for applications with large rendering areas (such as Google Maps)
High complexity slows down the rendering speed (any application that excessively uses DOM is not fast)
Not suitable for game applications
Canvas
Canvas uses JavaScript to draw 2D images.
Canvas is rendered by pixel.
In the canvas, once the image is drawn, it will not continue to get the attention of the browser. If its position changes, the entire scenario also needs to be re-drawn, including any objects that may have been overwritten by the image.
Features:
Dependency resolution
Event processor not supported
Weak text rendering capability
The result image can be saved in. png or. jpg format.
Most Suitable for image-intensive games, many of which are frequently repainted

Svg example:

The Code is as follows:
<Svg width = "100%" height = "100%">
<Circle cx = "300" cy = "60" r = "50" stroke = "# ff0" stroke-width = "3" fill = "red"/>
</Svg>