SVG与Canvas的区别与优缺点对比

Canvas 是一个非常简单易用的图形系统，可以通过一组简单的绘图指令，方便快捷地绘制出复杂的几何图形。
Canvas 元素上的 width 和 height 属性不等同于 Canvas 元素的 CSS 样式的属性。因为CSS 属性中的宽高影响 Canvas 在页面上呈现的大小，而 HTML 属性中的宽高则决定了 Canvas 的坐标系。为了区分它们，我们称 Canvas 的 HTML 属性宽高为画布宽高，CSS 样式宽高为样式宽高。
Canvas 渲染起来相当高效。 Canvas 更偏向于渲染层，能够提供底层的图形渲染 API 。在实际实现可视化业务的时候，出色的渲染能力正是它的优势所在。
因 Canvas 在 HTML 层面上是一个独立的画布元素，所以所有的绘制内容都是在内部通过绘图指令来完成的，绘制出的图形对于浏览器来说，只是 Canvas 中的一个个像素点，我们很难直接抽取其中的图形对象进行操作。
Canvas 的坐标系和浏览器窗口的坐标系类似，它们都默认左上角为坐标原点，x 轴水平向右，y 轴垂直向下。
canvas输出标量画布，就像一张图片一样，放大会失真或者锯齿（可以使用抗锯齿属性或将画布的分辨率加大后再进行缩放）

SVG 的全称是 Scalable Vector Graphics，可缩放矢量图，它是浏览器支持的一种基于 XML 语法的图像格式。既可以作为 HTML 内嵌元素使用，也可以作为图像通过 img 元素加载，或者绘制到 Canvas 内。

写法上的不同

SVG 是以创建图形元素绘图的“声明式”绘图系统。通过创建标签来表示图形元素，circle 表示圆，g 表示分组，text 表示文字。然后SVG 通过元素的 setAttribute 给图形元素赋属性值，与操作 HTML 元素类似。
Canvas 是执行绘图指令绘图的“指令式”绘图系统。通过上下文执行绘图指令来绘制图形，画圆是调用 context.arc 指令，然后再调用 context.fill 绘制，画文字是调用 context.fillText 指令。此外，Canvas 还通过上下文设置状态属性，context.fillStyle 设置填充颜色，conext.font 设置元素的字体。设置的这些状态，在绘图指令执行时才会生效。
从写法上来看，因SVG类似于HTML，写法友好。但SVG需要由浏览器渲染和管理，将元素节点维护在DOM树中，在复杂动态场景（频繁地增加、删除图形元素）中，SVG 与一般的 HTML 元素一样会带来DOM 操作的开销，所以 SVG 的渲染性能相对比较低（可使用虚拟 DOM 方案来尽可能地减少重绘，从而达到优化 SVG 的渲染问题。但也只能解决一部分问题，当节点数太多时，此方法也无能为力）。
用户交互实现上的不同
SVG 的一个图形对应一个元素，所以我们可以像处理 DOM 元素一样，很容易地给 SVG 图形元素添加对应的鼠标事件，这也是SVG相较于Canvas的一个非常大的优点可以让图形的用户交互非常简单。

最后编辑于：2021.02.25 09:01:52