html - SVG 和 HTML5 Canvas 有什么区别？

Question

SVG 和 HTML5 Canvas 之间有什么区别？他们似乎都对我做同样的事情。基本上，它们都是使用坐标点绘制矢量图。

我错过了什么？ SVG 和 HTML5 Canvas 之间的主要区别是什么？为什么我应该选择一个而不是另一个？

Answer 1

SVG 就像一个“绘图”程序。绘图指定为每个形状的绘图说明，并且可以更改任何形状的任何部分。绘图是面向形状的。

Canvas 就像一个“绘画”程序。一旦像素到达屏幕，这就是您的绘图。您不能更改形状，除非用其他像素覆盖它们。绘画是面向像素的。

能够更改绘图对于某些程序来说非常重要；例如起草应用程序、图表工具等。因此 SVG 在这方面具有优势。

能够控制单个像素对于某些艺术程序很重要。

使用 Canvas 比 SVG 更容易通过鼠标拖动为用户操作获得出色的动画性能。

计算机屏幕上的单个像素通常会消耗 4 个字节的信息，而现在的计算机屏幕需要几兆字节。因此，如果您想让用户编辑图像然后再次上传，Canvas 可能会很不方便。

相比之下，使用 SVG 绘制一些覆盖整个屏幕的形状占用的字节数很少，下载速度很快，并且可以轻松地再次上传，并且在这个方向上的优势与在另一个方向上的优势相同。所以 SVG 可以比 Canvas 更快。

Google 使用 SVG 实现了 Google map 。这为网络应用程序带来了活泼的性能和流畅的滚动。