一、基本介绍

Canvas

通过 js 来绘制 2D图形。
canvas 图像单位是像素。
canvas 图像绘制完毕之后，浏览器将不再关注它，如果位置发生变换，就需要重新绘制。

SVG

svg 使用 XML 描述的2D图像。
svg 是基于 xml 的，所以 svg 中绘制图形还是使用的元素，js 给元素任意添加事件。
svg 绘制的图像是一个对象，如果对象的属性发生改变，浏览器将重新绘制图形。

二、SVG与Canvas比较

svg 是一种矢量图，而 canvas 依赖于分辨率。所以 svg 放大不会失真，但是 canvas 绘制的图形会失真。
svg 支持事件处理器，而 canvas 不支持事件处理器。
svg 中的文字独立于图像，文字可保留，可编辑和可搜索，canvas 的文本渲染能力弱。
canvas 适合图像密集型的游戏，频繁地重绘图像，svg 绘制的复杂度高时减慢渲染的速度。
canvas 绘制的图形可以多种格式 (jpg、png) 保存图片，但是 svg 绘制的只能以 .svg 格式保存，使用时可以引入 html 文件。
canvas 适合开发游戏，svg 不适合游戏应用。

二、如何应用

2.1、功能上来说

canvas 是一个画布，绘制出来的图形是位图，因此 canvas 可以绘制图片，在实际应用中，由于渲染性能高，所以大型游戏开发都用的 canvas 。除此之外，还有统计中常见的柱状图、饼图、雷达图等也使用的 canvas 。而 svg 绘制的是矢量图，放大后不会失真，所以很适合做地图。

2.2、操作方面讲

canvas 绘制的图形，只能给 canvas 整个画布添加事件，而不能给某个图形或文件添加事件处理器，但是 svg 支持事件绑定，如果需要添加带有事件的动画效果时，就需要选择 svg。

总结

一句话总结：都是2D作图，SVG是矢量图，Canvas是位图，Canvas是逐像素进行渲染的，适合做游戏。

1.svg全称是什么？

SVG指的是可伸缩矢量图形（Scalable Vector Graphics）

2.svg为什么适合做google地图？

因为是矢量图，缩放不影响显示。

3.svg如何使用？

直接在svg标签里，放入形状的标签，大小和颜色之类的，用svg包裹。
- 下面是代码：

<svg version="1.1"
  baseProfile="full"
  width="300" height="200"
  xmlns="http://www.w3.org/2000/svg">

<rect width="100%" height="100%" fill="red" />

<circle cx="150" cy="100" r="80" fill="green" />

<text x="150" y="125" font-size="60" text-anchor="middle" fill="white">SVG</text>

</svg>

下面是效果图： Canvas 和 SVG 对于我们并不陌生，canvas 是 HTML5 提供的新元素，而 svg 存在的时间要比 canvas 长很多，svg 并不属于 html，最初的 svg 是由 XML 定义的，在 html 5 中 canvas 与 svg 看着相似，其实不同。

Canvas和SVG