What is the scenario of SVG vs. canvas and its strengths and applicability in HTML5

This article introduces the HTML5 SVG vs. canvas and its strengths and applicable scenarios, the content is very detailed, interested friends can refer to, hope to be helpful to you.

So far, the main features of SVG and Canvas have been summarized. They are all 2D graphics display technologies supported in HTML5, and all support vector graphics. Now, let's compare these two technologies and analyze their strengths and applicable scenarios.

First of all, let's analyze the remarkable characteristics of the two technologies and take a look at the following table:

CanvasSVG is pixel-based (dynamic .png) based on shape, single HTML element, multiple graphic elements These elements become part of DOM through scripting modification only through scripting and CSS modification event model / user interaction granulation (XMagy) event model / user interaction abstraction (rect, path) smaller surface, larger number of objects (> 10k) (or both) the number of better objects is smaller (= 0 & r = 74 & g = 0 & b)