SVG和Canvas绘图（一）

栅格图形 & 矢量图形

栅格图形，也叫做点阵图，位图(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)有什么区别？

$\color{#FFFFFF}{字体图标是用svg文件转换成font文件，使用的时候可以改变颜色、大小、text-shadow属性；}$
$\color{#FFFFFF}{svg图标在样式上更加灵活，可以通过css配置多个颜色、实现一些动画效果}$