What is the difference between css3 animation effect attribute canvas and svg

Difference: 1. Canvas draws bitmaps, while svg draws vector images; 2. Canvas renders faster when there are many nodes, while svg renders slowly when there are many svg nodes; 3. svg supports layering and events , but canvas does not support it; 4. Canvas depends on resolution, but svg does not depend on resolution.

The operating environment of this tutorial: Windows 10 system, CSS3&&HTML5 version, Dell G3 computer.

What is the difference between canvas and svg of css3 animation effect attribute

Canvas mainly uses brushes to dynamically draw 2D pictures

SVG mainly uses labels to draw irregular shapes Vector graphics

Both are mainly used to draw 2D graphics

The difference:

• Canvas draws bitmaps, but SVG draws It is a vector image

• SVG renders slowly when there are many nodes, Canvas has better performance, but it is more complicated to write

• SVG supports layering and events , Canvas does not support it, but you can use the library to implement it

• Canvas depends on resolution, SVG does not depend on resolution

• Graphics drawn by Canvas It will not appear in the DOM, but the SVG drawn will appear in the DOM

Advantages of Canvas:

Suitable for games and other places, and graphics drawn by Canvas can be exported

Advantages of SVG:

Because it is a vector image, it will not be distorted after zooming in, supports event processing, independent text, and can be edited and searched

(Learning video sharing :css video tutorial)

The above is the detailed content of What is the difference between css3 animation effect attribute canvas and svg. For more information, please follow other related articles on the PHP Chinese website!