The difference between SVG and canvas

svg Definition

1. Scalable vector graphics
2. Is based on xml Make a drawing
3.svg In case of enlargement or change of size, the graphic quality will not be damaged .
4.svg Every one of them is drawn ⼀ The elements of each figure are unique ⽴ Of DOM node ,

canvas Definition

1.h5 New properties
2. be based on js Make a drawing

Difference between them

1、svg Each graph can be regarded as an object , If the object properties change , The browser automatically reproduces the drawing . Change the change part automatically according to the change .canvas If the drawing is finished , Will no longer get the attention of the browser . If the position of the graph changes , The browser needs to be redrawn .
2、canvas Depending on resolution ,svg Independent of resolution .
3、canvas Event handler is not supported ,svg Support .Canvas The image drawn All in Canvas Inside this canvas , yes Canvas Part of , Out-of-service js Get the drawn graphic elements .
SVG A graph of corresponds to an element , So we can deal with DOM The elements are the same , Easy to give SVG Add the corresponding mouse event to the graphic element , This is also SVG Compare with Canvas A very big advantage of is that it can make the user interaction of graphics very simple .
4、canvas For large render area programs （ Like Google Maps ）,svg Suitable for image intensive games .