1.历史：
canvas是html5提供的新元素。
而svg存在的历史要比canvas久远，已经有十几年了。svg并不是html5专有的标签，最初svg是用xml技术（超文本扩展语言，可以自定义标签或属性）描述二维图形的语言。
2.功能：
canvas可以看做是一个画布，其绘制出来的图形为标量图。可以在canvas中引入jpg或png这类格式的图片。在实际开发中，大型的网络游戏都是用canvas画布做出来的，并且canvas的技术现在已经相当的成熟。另外，我们喜欢用canvas来做一些统计用的图表，如柱状图曲线图或饼状图等。
而svg，所绘制的图形为矢量图，不能引入普通的图片，因为矢量图的不会失真的特点，在项目中我们会用来做一些动态的小图标。这个特点也很适合被用来做地图，百度地图就是用svg技术做出来的。
3.技术：
canvas里面绘制的图形不能被引擎抓取，canvas中我们绘制图形通常是通过javascript来实现。
而svg里面的图形可以被引擎抓取，支持事件的绑定，svg更多的是通过标签来实现。我再来介绍一个svg的js库：TWO.JS。其中包含two.js和three.js前者用于绘制二维图形，后者用于绘制三维图形。TWO.JS可以支持三种格式，svg（默认）、canvas、和WEBGL。当然也可以在普通div中引入。
区别
1）SVG是矢量图，放大不失真，而Canvas是位图，由像素点组成，放大会失真
2）Canvas相较于SVG，支持的颜色数更多，更便于绘制色彩丰富的图像
3）Canvas基于HTML，而SVG基于XML
兼容性
SVG和Canvas都只能在IE8（不包含IE8）以上运行
SVG的引入方式
1）以单个文件的形式独立存在，后缀名为.svg，可以在html文件中以img标签的src，元素背景，框架等引入
2）直接在html文件中引入SVG标签