SVG 和 Canvas

Canvas 和 SVG 的区别

（1）SVG： SVG 可缩放矢量图形（Scalable Vector Graphics）是基于可扩展标记语言 XML 描述的 2D 图形的语言，SVG 基于 XML 就意味着 SVG DOM 中的每个元素都是可用的，可以为某个元素附加 Javascript 事件处理器。在 SVG 中，每个被绘制的图形均被视为对象。如果 SVG 对象的属性发生变化，那么浏览器能够自动重现图形。

其特点如下：

• 不依赖分辨率
• 支持事件处理器
• 最适合带有大型渲染区域的应用程序（比如谷歌地图）
• 复杂度高会减慢渲染速度（任何过度使用 DOM 的应用都不快）
• 不适合游戏应用

（2）Canvas ：Canvas 是画布，通过 Javascript 来绘制 2D 图形，是逐像素进行渲染的。其位置发生改变，就会重新进行绘制。

其特点如下：

• 依赖分辨率
• 不支持事件处理器
• 弱的文本渲染能力
• 能够以 .png 或 .jpg 格式保存结果图像
• 最适合图像密集型的游戏，其中的许多对象会被频繁重绘

注：矢量图，也称为面向对象的图像或绘图图像，在数学上定义为一系列由线连接的点。矢量文件中的图形元素称为对象。每个对象都是一个自成一体的实体，它具有颜色、形状、轮廓、大小和屏幕位置等属性。

svg 可缩放矢量图形 Scalable Vector Grapics，基于可扩展标记语言 xml,用于描述二维矢量模型的一种图片格式。

svg 有以下几个特点：

任意缩放：任意缩放图像，而不破坏图像的清晰度、细节等，在屏幕上总是边缘清晰，适合任何屏幕分辨率和打印分辨率，属于矢量图

文本独立：svg 中的文字独立于图像，文字保留可编辑和可搜索的状态。而且没有字体限制，即使系统没有安装这种字体，所有人看到的都是一样的画面

较小文件：比起 GIF 和 JPEG 轻很多，下载快

颜色丰富：提供 1600 万色调色板，支持 ICC 颜色描述文件标准，RGB，线性填充，渐变和蒙版

现代浏览器都支持 svg，IE8 前需安装插件

canvas 是 html5 新增的一个标签

简单说就是一块画布，通过脚本(通常为 JavaScript)来绘制图形

实际上他的用途十分广泛，可以用来制作 web 端游戏，数据可视化(Echarts)，一些动效……可以用来制作照片集或者制作简单(也不是那么简单)的动画，甚至可以进行实时视频处理和渲染。它最初由苹果内部使用自己 MacOS X WebKit 推出，供应用程序使用像仪表盘的构件和 Safari 浏览器使用。 后来，有人通过 Gecko 内核的浏览器 (尤其是 Mozilla 和 Firefox)，Opera 和 Chrome 和超文本网络应用技术工作组建议为下一代的网络技术使用该元素。canvas 看起来和 img 标签一样，只是 canvas 只有两个可选的属性 width、heigth 属性，而没有 src、alt 属性。 如果不给 canvas 设置 widht、height 属性时，则默认 width 为 300、height 为 150,单位都是 px。也可以使用 css 属性来设置宽高，但是如宽高属性和初始比例不一致，他会出现扭曲。所以，建议永远不要使用 css 属性来设置 canvas 的宽高。

canvas 绘出的图形或传入的图片都依赖分辨率，能以.png 和.jpg 保存图像，属于位图

canvas 是逐像素渲染的，一旦图形绘制完成，就不会继续被浏览器关注。而 svg 是通过 DOM 操作来显示的，所以 canvas 的文本渲染能力弱，而 svg 最适合带有大型渲染区域的应用程序，比如地图。而 Canvas 最适合有许多对象要被频繁重绘的图形密集型游戏。而 SVG 由于 DOM 操作，在复杂度高的游戏应用中会减慢渲染速度。所以不适合在游戏应用。