Canvas和svg的区别

一、引言

　　在复习面试的过程中，偶然看到一个问题，请说一说canvas和svg的区别。脑子里想了半天，所知甚少。所以查阅了很多文章找了一下两者的区别。canvas和svg的特点在W3school的HTML 5 Canvas vs. SVG 里有详细的介绍。在此，我将网上收集的一些对自己有用的资料总结下来。

二、Canvas的特点：

　　1.canvas通过javascript绘制图形（2D）例如：

<script type="text/javascript">
var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
cxt.fillStyle="#FF0000";
cxt.fillRect(0,0,150,75);
</script>

由上述代码可以看出Canvas的另一个特点。它是逐像素进行渲染的。
　　3. canvas无法对已绘制的图像进行操作、修改，也就是说获取不到canvas中的某一个图像。一旦图形被绘制完成，它就不会继续得到浏览器的关注。如果其位置发生变化，那么整个场景也需要重新绘制，包括任何或许已被图形覆盖的对象。

三、SVG的特点：

　　1.SVG是一种使用XML描述2D图形的语言，canvas需要在js中绘制，而SVG只需要在html里面通过标签绘制即可。例如：

<svg width=“500px” height=“500px”></svg>
<line x1=”10″ y1=”10″ x2=”20″ y2=“20”></line>

　　2.SVG的全称叫做Scalable Vector Graphics，可缩放矢量图形，也就是说SVG是矢量图，和canvas的位图不同，SVG 图像在放大或改变尺寸的情况下其图形质量不会有所损失。
　　３.由于SVG基于XML，所绘制的各个图形都是单独的一个元素，是DOM的一部分。所以SVG DOM 中的每个元素都是可用的。我们可以为某个元素附加 JavaScript 事件处理器(例如：绑定onclick事件等)。

四、Canvas和SVG的比较

	Canvas	SVG
功能	简便，2D绘图API	功能丰富，各种图形，动画
特点	像素，脚本驱动，不可操作	矢量，XML，可操作
性能	适合小面积，大数量应用场景（>10k）	大面积，小数量应用场景（<10k）
支持	主流浏览器，ie9+	主流浏览器，ie9+，其他svg阅读器
事件交互	用户交互到像素点（x,y）	用户交互到图形元素（path,rect）
文件格式	.png　　.jpg	.svg
分辨率	依赖分辨率	不依赖分辨率
事件处理	不支持	支持
游戏应用	最适合图像密集型的游戏，其中的许多对象会被频繁重绘	不适合游戏应用

感谢

　　特别感谢知乎SVG 与 HTML5 的 canvas 各有什么优点，哪个更有前途？文章的帮助。文章表格想法来源于知乎用户sand no，特别感谢您提供的知识。