Canvas和SVG的区别是什么

引言

现在的前端业务中数据可视化的需求越来越多，大家常用的类库一个是echarts；另外一个就是D3.js 。两者看着都很酷炫，但依赖的底层是不一样的。echarts基于canvas，而D3.js以SVG为主。
Canvas 和 SVG 都允许您在浏览器中创建图形，但是它们在根本上是不同的。

Canvas

是 HTML5 新增的，一个可以使用脚本(通常为 JavaScript) 在其中绘制图像的 HTML 元素。
​Canvas 是由 HTML 代码配合高度和宽度属性而定义出的可绘制区域。JavaScript 代码可以访问该区域，类似于其他通用的二维 API，通过一套完整的绘图函数来动态生成图形。
看起来和 标签一样，只是 只有两个可选的属性 width、heigth 属性，而没有 src、alt 属性。
​ 会创建一个固定大小的画布，会公开一个或多个渲染上下文(画笔)，使用渲染上下文来绘制和处理要展示的内容。

SVG

SVG 指可伸缩矢量图形 (Scalable Vector Graphics)
SVG 用于定义用于网络的基于矢量的图形
SVG 使用 XML 格式定义图形
SVG 图像在放大或改变尺寸的情况下其图形质量不会有损失

区别

canvas

1.它是通过JavaScript来绘制的
2.只要它的位置发生改变，就需要重新绘制
3.它是逐像素的进行渲染
4.依赖屏幕的分辨率
5.弱的文本渲染能力
6.不支持事件处理
7.能够jpg、png图像保存
8.适合图像密集的游戏，能够重复渲染

svg

1.使用XML的2d语言
2.不依赖屏幕的分辨率
3.支持事件处理
4.适合带有大型渲染区域的应用程序
5.不适合游戏
6.复杂度越高渲染速度会越慢

适用范围

Canvas是逐像素进行渲染的，一旦图形绘制完成，就不会继续被浏览器关注。而SVG是通过DOM操作来显示的。
所以Canvas的文本渲染能力弱，而SVG最适合带有大型渲染区域的应用程序，比如地图。
而Canvas 最适合有许多对象要被频繁重绘的图形密集型游戏。
而SVG由于DOM操作 在复杂度高的游戏应用中 会减慢渲染速度。所以不适合在游戏应用。