栅格图形 & 矢量图形
栅格图形，也叫做点阵图，位图(bitmap)，像素图，图像是由像素构成的，像素的多少将决定图像的显示质量和文件大小，图像的分辨率越高，其显示越清晰，文件所占的空间也就越大。图像放大时会失真，可以看到整个图像是由很多像素组合而成的。
矢量图形使用 XML 来描述二维图形和绘图程序，矢量图像在放大或改变尺寸的情况下其图形质量不会有所损失。
Canvas vs SVG
<canvas>和<svg>都是HTML5推荐使用的图形技术，Canvas基于像素，提供2D绘制函数，是一种HTML元素类型，依赖于HTML，只能通过脚本绘制图形；SVG为矢量，提供一系列图形元素（Rect, Path, Circle, Line …），还有完整的动画，事件机制，本身就能独立使用，也可以嵌入到HTML中，SVG很早就成为了国际标准，目前的稳定版本是1.1 – Scalable Vector Graphics (SVG) 1.1 (Second Edition)，两者的主要特点见下面的表格：
Canvas & SVG 性能对比图(来源microsoft开发社区)
使用场景
SVG
- 静态图形（Icons、Logo）
- 高保真文档(用于展示&打印)
Canvas
- 处理视频
- 复杂场景、实时复杂数学动画
图形和图表
svg和Canvas都可以表现图表(如柱状图, 散点图, 饼图等等)，常用的图形图表库中，百度的echarts是基于Canvas实现的，D3是基于svg实现的。
SVG
SVG 文档基本结构
<svg width='140' height='170' xmlns='http://www.w3.org/2000/svg'>
<title>Cat</title>
<desc>Stick Figure of Cat</desc>
<!-- 在这里绘制图像 -->
</svg>
xmlns属性可定义SVG 命名空间（如果将SVG内嵌在HTML页面中并作为该页面提供，则不需要xmlns属性）。
基础图形
<rect>、<circle>、<ellipse>、<line>、<polyline>、<polygon>
矩形 圆 椭圆 线条 折线 多边形
基础属性
fill、stroke、stroke-width、transform
使用 <g> 元素，可以对多个元素进行分组
路径<path>
path元素是SVG基本形状中功能最强大的一个，它不仅能创建其他基本形状，还能创建更多其他形状。你可以用path元素绘制矩形（直角矩形或者圆角矩形）、圆形、椭圆、折线形、多边形，以及一些其他的形状，例如贝塞尔曲线、2次曲线等。
path元素的形状是通过属性d来定义的，属性d的值是一个“命令+参数”的序列。
下面的命令可用于路径数据：（命令详情可查看https://segmentfault.com/a/1190000005053782）
- M = moveto 两个参数 画笔起始位置
- L = lineto 两个参数，画直线（x ,y）坐标 ，在当前位置和新位置（L前面画笔所在的点）之间画一条线段
- H = horizontal lineto 一个参数，绘制水平直线
- V = vertical lineto 一个参数，绘制垂直线
- C = curveto 三次贝塞尔曲线 命令参数：C x1 y1, x2 y2, x y 起点控制点，终点控制点，终点
- S = smooth curveto 简写的贝塞尔曲线命令 命令参数：S x2 y2, x y
- Q = quadratic Belzier curve 二次贝塞尔曲线 命令参数：Q x1 y1, x y 控制点，终点坐标
- T = smooth quadratic Belzier curveto Q命令的简写 T x y
- A = elliptical Arc 椭圆弧线
- Z = closepath 闭合路径，从当前点画一条直线到路径的起点。不区分大小写
SVG坐标系统
viewBox
viewBox的四个参数分别代表：最小X轴数值；最小y轴数值；宽度；高度。
用于svg整体缩放
SVG应用-SVG路径描边动画
stroke-dasharray
表示虚线描边。可选值为：none, <dasharray>, inherit. 其中，none表示不是虚线；<dasharray>为一个逗号或空格分隔的数值列表。表示各个虚线段的长度。可以是固定的长度值，也可以是百分比值；inherit表继承。
stroke-dashoffset
表示虚线的起始偏移。可选值为：<percentage>, <length>, inherit. 百分比值，长度值，继承。
如果stroke-dasharray值很大，超过了描边路径的总长度，加以css动画改变stroke-dashoffset值，就会出现一段时间内描边显示从无到有。
path {
stroke-dasharray: 1000;
stroke-dashoffset: 1000;
animation: dash 5s linear infinite;
}
@keyframes dash {
to {
stroke-dashoffset: 0;
}
}
svg图标和字体图标(IconFont)有什么区别？
