# 14.Canvas 和 SVG 的异同
# SVG
SVG 是 Scalable Vector Graphics 的缩写，意为可缩放矢量图形。
# 什么是 SVG
- SVG 是一个基于文本的开放网络标准，用来定义用于网络的矢量图形
- SVG 图像在放大或改变尺寸的情况下其图形质量不会有所损失，因此能够优雅而简洁地渲染不同大小的图形，并和 CSS，DOM，JavaScript 和 SMIL 等其他网络标准无缝衔接
- SVG 使用 XML 格式定义图形
- SVG 是万维网联盟的标准与诸如 DOM 和 XSL 之类的 W3C 标准是一个整体
# SVG 的优点
- SVG 与 JPEG 和 GIF 图像比起来，尺寸更小，且可压缩性更强。
- SVG 图像中的文本是可选的，同时也是可搜索的，且可以与 JavaScript 技术一起运行
- SVG 可在图像质量不下降的情况下被放大和缩小
- SVG 可被非常多的工具读取和修改（比如文本编辑器）
- SVG 图像不依赖分辨率，可在任何的分辨率下被高质量地打印
- SVG 文件是纯粹的 XML
- SVG 是开放的标准
# SVG 的缺点
- SVG 复杂度越高渲染速度就会越慢（任何过度使用 DOM 的应用都不快）
- SVG 不适合游戏应用，只能结合 Canvas 来实现
- SVG 不能动态的修改动画内容
# Canvas
# Canvas 的优点
- 内存占用恒定，就是像素点个数
# Canvas 的缺点
# Canvas 和 SVG 的不同点
# Canvas
- 通过 js 来绘制 2D 图形。
- canvas 图像单位是像素，依赖于分辨率，放大绘制的图形会失真
- canvas 不支持事件处理器
- canvas 图像绘制完毕之后，浏览器将不再关注它，如果位置发生变换，就需要重新绘制。
- canvas 的文本渲染能力弱。
- canvas 适合图像密集型的游戏，频繁地重绘图像。
- canvas 绘制的图形可以多种格式 (jpg、png) 保存图片。
- canvas 适合开发游戏
- canvas 是基于位图的图像，它不能够改变大小，只能缩放显示；
# SVG
- svg 使用 XML 描述的 2D 图像。
- svg 是一种矢量图，svg 放大不会失真。
- svg 支持事件处理器
- svg 绘制的图像是一个对象，如果对象的属性发生改变，浏览器将重新绘制图形。
- svg 中的文字独立于图像，文字可保留，可编辑和可搜索
- svg 绘制的复杂度高时减慢渲染的速度。
- svg 绘制的只能以 .svg 格式保存，使用时可以引入 html 文件。
- svg 不适合游戏应用
- svg 是基于矢量的，所有它能够很好的处理图形大小的改变。
# 功能方面
- canvas 是一个画布，绘制出来的图形是位图，因此 canvas 可以绘制图片，在实际应用中，由于渲染性能高，所以大型游戏开发都用的 canvas 。
- 除此之外，还有统计中常见的柱状图、饼图、雷达图等也使用的 canvas 。而 svg 绘制的是矢量图，放大后不会失真，所以很适合做地图。
# 操作方面
- canvas 绘制的图形，只能给 canvas 整个画布添加事件，而不能给某个图形或文件添加事件处理器
- 但是 svg 支持事件绑定，如果需要添加带有事件的动画效果时，就需要选择 svg。
# canvas 为什么绘制比普通 DOM 快、
- JavaScript 同步操作的限制。所有的 DOM 操作都是同步的，会堵塞浏览器。JavaScript 操作 DOM 时，必须等前一个操作结束，才能执行后一个操作。只要一个操作有卡顿，整个网页就会短暂失去响应。浏览器重绘网页的频率是 60FPS（即 16 毫秒/帧），JavaScript 做不到在 16 毫秒内完成 DOM 操作，因此产生了跳帧。用户体验上的不流畅、不连贯就源于此。
- 网页是单线程的。所有工作都在这一个线程上完成，包括布局、渲染、JavaScript 执行、图像解码等等
- 网页没有硬件加速。网页都是由 CPU 处理的，没用 GPU 进行图形加速，canvas 可以被硬件加速
← 13.如何理解盒模型 15.Flex 进阶 →