Shulou(Shulou.com)06/03 Report--

Editor to share with you what is the difference between the drawing principles of Canvas and SVG in HTML5, I believe most people do not know much about it, so share this article for your reference. I hope you will gain a lot after reading this article. Let's learn about it together.

Both canvas and SVG allow you to draw pictures in a browser, but their fundamentals are different.

SVG

SVG is a language for describing two-dimensional graphics in XML.

SVG is based on XML, which means that every element is available within SVG DOM. You can add JS event handlers to each element.

In SVG, each graphic is recorded as an object. If the properties of a SVG object change, the browser can automatically regenerate the drawing.

Canvas

Canvas can draw 2D graphics on fly (using JS)

Canvas can be regenerated by pixel.

In Canvas, once the graphic is finished, it will be forgotten by the browser. If the location of the drawing is going to change, the entire screen needs to be redrawn, including the objects covered by the drawing.

Comparison between Canvas and SVG

The following table shows the main differences between canvas and SVG:

CanvasSVG is resolution independent and does not support event handlers for weak text rendering. It is most suitable for applications with large rendering area (Google Maps) to save the final image as a PNG or JPG complex image. Redrawing slows down (any situation that uses DOM slows down a lot) graphics games that are most suitable for frequent redrawing of many objects are not suitable for game applications. The above is "what is the difference between Canvas and SVG drawing principles in HTML5?" all the contents of this article, thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to follow the industry information channel!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.