This article mainly introduces the basic concepts of SVG, as well as the difference between SVG and CANVAS, and finally gives a simple example to facilitate everyone to better understand SVG scalable vector graphics. Recommended to everyone.
Baidu Encyclopedia:
SVG Scalable Vector Graphics is a graphic format based on the Extensible Markup Language (XML) that describes two-dimensional vector graphics. SVG is a new two-dimensional vector graphics format formulated by W3C and is also a network vector graphics standard in the specification. SVG strictly follows XML syntax and uses descriptive language in text format to describe image content, so it is a vector graphics format that is independent of image resolution.
What is SVG?SVG refers to scalable vector graphics (Scalable Vector Graphics)
SVG is used to define vector-based graphics for networks
SVG Defines Graphics in XML format
SVG images will not lose their graphics quality when they are enlarged or changed in size.
SVG is the standard for the World Wide Web Alliance
SVG is a whole with 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 that every element in the SVG DOM is available. You can attach a JavaScript event handler to an element.
In SVG, each drawn figure is treated as an object. If the properties of the SVG object change, the browser can automatically reproduce the graphics.
Features:
No resolution dependency
Support event handlers
Best for applications with large rendering areas (such as Google Maps)
High complexity can slow down rendering (no application that overuses DOM)
Not suitable for gaming applications
Canvas
Canvas draws 2D graphics through JavaScript.
Canvas is rendered pixel by pixel.
In canvas, once the graph is drawn, it does not continue to get the attention of the browser. If its position changes, the entire scene also needs to be repainted, including any object that may have been overwritten by the graphics.
Features:
Resolution-dependent
Event handlers are not supported
Weak text rendering ability
Ability to save result images in .png or .jpg format
Best for image-intensive games, many of which are frequently repainted
svg example:Copy the code