Canvas 和 SVG的区别

68 阅读1分钟

1、Canvas是一个可以使用 JS 等脚本语言向其中绘制图像的 HTML 标签,为解决只能在 Web 页面中显示静态图片的问题,出现了 Canvas 标签。它是一个绘图表面,包含一组丰富的 JS API,这些 API 使你能够动态创建和操作图像及动画。

2、SVG(Scalable Vector Graphics,可缩放矢量图形)是基于 XML 用于描述二维矢量图形的一种图形格式。SVG 可以用来定义 XML 格式的矢量图形。其本质是 XML 文件,所以 SVG 是使用 XML 文档描述来绘图的。

3、相同点: 都是用来画 2D 图形的。

4、不同点:SVG 创建的每一个元素都是一个独立的 DOM 元素,而Canvas 只是一个 HTML 元素,其中的图形不会单独创建 DOM 元素。SVG 主要是矢量图,而Canvas是位图。SVG 节点过多时渲染慢一些,Canvas 性能更好一些,但写起来更复杂。