1、什么是 Canvas？
canvas是HTML5中新增一个HTML5标签与操作canvas的javascript API，它可以实现在网页中完成动态的2D与3D图像技术。
画布是一个矩形区域，您可以控制其每一像素。
canvas可以完成动画、游戏、图表、图像处理等原来需要Flash完成的一些功能。
canvas 元素本身是没有绘图能力的。所有的绘制工作必须在 JavaScript 内部完成。
使用canvas标签，即可在页面中开辟一格区域，可以设置其width和height设置该区域的尺寸。
canvas的默认宽高为 300和150。不要使用CSS的方式设置宽高，应该使用HTML属性。如果使用css样式给canvas设置尺寸，会有拉伸的效果。
如果浏览器不支持canvas标签，那么就会将其解析为div标签，因此常在canvas中嵌入文本，以提示用户浏览器的能力。
canvas的兼容性非常强，只要支持该标签的，基本功能都一样，因此不用考虑兼容性问题。
2、什么是SVG？
svg并不是html5专有的标签，最初svg是用xml技术（超文本扩展语言，可以自定义标签或属性）描述二维图形的语言。
SVG 指可伸缩矢量图形，用于描述二维矢量图形的一种图形格式。SVG严格遵从XML语法，并用文本格式的描述性语言来描述图像内容，因此是一种和图像分辨率无关的矢量图形格式。
SVG是基于矢量的，它能够很好的处理图形大小的改变。图像在放大或改变尺寸的情况下其图形质量不会有损失
在SVG中，每个被绘制的图形均被视为对象，如果SVG对象的属性发生变化，那么浏览器能够自动重现图形。也就是说，SVG绘图很容易编辑，只需要增加或移除相应的元素就可以了。
特点：
1、任意放缩：用户可以任意缩放图像显示，而不会破坏图像的清晰度、细节等。
2、文本独立：SVG图像中的文字独立于图像，文字保留可编辑和可搜寻的状态。也不会再有字体的限制，用户系统即使没有安装某一字体，也会看到和他们制作时完全相同的画面。
3、较小文件：总体来讲，SVG文件比那些GIF和JPEG格式的文件要小很多，因而下载也很快。
4、超强显示效果：SVG图像在屏幕上总是边缘清晰，它的清晰度适合任何屏幕分辨率和打印分辨率。
5、超级颜色控制：SVG图像提供一个1600万种颜色的调色板，支持ICC颜色描述文件标准、RGB、线X填充、渐变和蒙版。
6、交互X和智能化：SVG面临的主要问题一个是如何和已经占有重要市场份额的矢量图形格式Flash竞争的问题，另一个问题就是SVG的本地运行环境下的厂家支持程度。
（浏览器支持：Internet Explorer 9、Firefox、Opera、Chrome 以及 Safari 支持内联 SVG。）
3、canvas 与 SVG的比较：
（1）功能方面：
canvas可以看做是一个画布。，其绘制出来的图形为标量图，因此，可以在canvas中引入jpg或png这类格式的图片，在实际开发中，大型的网络游戏都是用canvas画布做出来
的，并且canvas的技术现在已经相当的成熟。另外，我们喜欢用canvas来做一些统计用的图表，如柱状图曲线图或饼状图等。
svg，所绘制的图形为矢量图，所以其用法上受到了限制。因为只能绘制矢量图，所以svg中不能引入普通的图片，因为矢量图的不会失真的效果，在项目中我们会用来做一些动态
的小图标。但是由于其本质为矢量图，可以被无限放大而不会失真，这很适合被用来做地图，而百度地图就是用svg技术做出来的。
（2）影响图片质量：
canvas不能改变大小，只能缩放显示，放大或缩小图形质量会有损失。
svg能够很好的处理图形大小的改变，放大或缩小时图形质量不会有损失。
（3）支持事件处理器：
canvas不支持事件处理器，里面绘制的图形不能被引擎抓取,canvas输出的是一整幅画布，能够以.png或jpg格式保存结果。
svg支持事件处理器，里面的图形可以被引擎抓取，支持事件的绑定。它绘制出的每个图形元素都是独立的DOM节点，能够方便地绑定事件。SVG基于XML，意味着SVG DOM中的 每个元素都是可用的，可以为某个元素附加 JavaScript 事件处理器。
（4）实现方式：
canvas中我们绘制图形通常是通过javascript来实现
<canvas width="480px" height="650px" id="myCanvas"></canvas>
<script>
var myCanvas = document.getElementById("myCanvas");
var ctx = myCanvas.getContext("2d");
ctx.beginPath();
ctxt.rect(10,10,100,100);
ctx.fill()
</script>
svg更多的是通过标签来来实现：
<svg width="100%" height="100%" version="1.1"xmlns="http://www.w3.org/2000/svg"> <circle cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="red"/> </svg>
（5）位置或属性发生改变：
canvas：如果图形位置发生改变，整个场景需要重新绘制，包括任何或许已经被图形覆盖的对象
svg：如果对象属性发生变化，浏览器能自动重现图形。
（6）游戏的应用：
canvas适合像素处理，动态渲染和大数据绘制，最适合图像密集型的游戏，其中的许多对象会被频繁重绘。
svg不适合游戏应用，适合静态图片显示，高保真文档查看和打印的应用场景。
4、相关库推荐：
canvas库： chart.js 、 echarts.js 、 three.js 、flot 、 webGL（canvas3D） 、RGraph 、kinetic.js 、progress.js 、dataV.js 、
svg库： highcharts.js 、 raphael.js 、 D3.js 、