一、Canvas
只是图形容器，必须使用脚本来绘制图形
描述：
通过Javascript来绘制2D图形。
是逐像素进行渲染的。
其位置发生改变，会重新进行绘制。
Canvas 对象表示一个 HTML 画布元素 -<canvas>。它没有自己的行为，但是定义了一个 API 支持脚本化客户端绘图操作。
二、SVG
全称为可伸缩矢量图形 (Scalable Vector Graphics)，意为可缩放的矢量图形。
描述：
一种使用XML描述的2D图形的语言。用来描述二维矢量及矢量/栅格图形。
SVG提供了3种类型的图形对象：矢量图形（vectorgraphicshape例如：由直线和曲线组成的路径）、图像(image)、文本(text)。
SVG图形是可交互的和动态的，可以在SVG文件中嵌入动画元素或通过脚本来定义动画。
SVG基于XML意味着，SVG DOM中的每个元素都是可用的，可以为某个元素附加Javascript事件处理器。
在 SVG 中，每个被绘制的图形均被视为对象。如果 SVG 对象的属性发生变化，那么浏览器能够自动重现图形。
三、二者异同点
相同点：
都可以用来制作2D图形
不同点：
Canvas：
- 依赖分辨率
- 弱的文本渲染能力
- canvas可以很好的绘制像素，能够以 .png 、.jpg或 .gif 格式保存结果图像，可做为API容器。
- 最适合图像密集型的游戏，其中的许多对象会被频繁重绘
- 更适合渲染较小的区域
SVG：
- 不依赖分辨率
- 支持事件处理器
- SVG中属性改变时，浏览器可以重新呈现它，适用于矢量图
- 最适合带有大型渲染区域的应用程序（比如谷歌地图）
- 具有更好的文本渲染能力
- 复杂度高会减慢渲染速度（任何过度使用 DOM 的应用都不快）
- 不适合游戏应用
一句话总结：都是2D做图，SVG是矢量图，canvas是位图。Canvas 是逐像素进行渲染的，适合游戏。
四、用途
1、SVG为什么适合做google地图？
因为是矢量图，缩放不影响显示
2、SVG如何使用？
用svg标签，里面可以是circle标签
<svg width="100%" height="100%" >
<circle cx="300" cy="60" r="50" stroke="#ff0" stroke-width="3" fill="red" />
</svg>
