2015-09-22

SVG 入门指南

svg

SVG 是可缩放矢量图形（Scalable Vector Graphics，SVG），是一种描述二位矢量图形的 XML 标记语言。

百科中对 SVG 的说明：

SVG 指可伸缩矢量图形 (Scalable Vector Graphics)

SVG 用来定义用于网络的基于矢量的图形

SVG 使用 XML 格式定义图形

SVG 图像在放大或改变尺寸的情况下其图形质量不会有所损失

SVG 是万维网联盟的标准

SVG 与诸如 DOM 和 XSL 之类的 W3C 标准是一个整体

SVG 和 Canvas 是 HTML5 中主要的 2D 图形相关技术。一方面，在 HTML5 发展的大环境下，SVG 有很好的机遇。另一方面，它的主要对手是 flash，同 flash 相比，它与很多标准（如 XSL 和 DOM 等）相兼容，而 flash 是非开源的私有技术。所以，如此看来，SVG 在未来的图形开发中必将占据重要的一席之地。

到底选择 Canvas 还是 SVG ？

既然两者都是 HTML5 中的图形技术，那么到底该选择哪个来解决问题呢？

解决问题应该注意实际场景，然后根据技术特点来进行选型。所以，我们先来比较下两者的主要特点：

Canvas VS SVG 1

Canvas VS SVG 2

根据它们的不同特点，我们可以分析出各自的适用场景：

Canvas 适合像素处理、动态渲染和大数据量绘制的场景。

SVG 适合静态图片展示、高保真文档查看和打印的场景。

所以，选择哪种技术，可以具体分析下业务场景。

基本知识

这篇文章是入门指南，非入门教程，不会对 SVG 的基础知识做详细介绍，只会对涉及的功能做简单描述。如果想了解具体的基础知识点，可以参考 MDN 上的文章：SVG。

SVG 形状：提供了矩形（rect）、圆形（circle）、椭圆（ellipse）、线条（line）、多边形（polygon）、折线（polyline）、文本（text）等绘图接口。还有一个非常重要的功能：路径（path），后面会重点介绍。

SVG 滤镜：

feBlend
feColorMatrix
feComponentTransfer
feComposite
feConvolveMatrix
feDiffuseLighting
feDisplacementMap
feFlood
feGaussianBlur
feImage
feMerge
feMorphology
feOffset
feSpecularLighting
feTile
feTurbulence
feDistantLight
fePointLight
feSpotLight

SVG 渐变：线性渐变（linearGradient）、放射性渐变（radialGradient）

路径（path）

路径（path）在 SVG 中是非常重要的概念，有人曾这样说，了解了 path 也就基本学会了 SVG 80%的知识。

路径包含了下面一些命令：

M = move to 移动到
L = line to 当前节点到指定(x,y)节点，直线连接
H = horizontal line to 保持当前点的y坐标不变，x轴移动到x，形成水平线
V = vertical line to 保持当前点的x坐标不变，y轴移动到y，形成垂直线
C = curve to 三次贝塞尔曲线
S = smooth curve to 平滑三次贝塞尔曲线
Q = quadratic Bézier curve 二次贝塞尔曲线
T = smooth quadratic Bézier curveto 平滑二次贝塞尔曲线
A = elliptical Arc 弧形
Z = close path 将路径的开始和结束点用直线连接

使用这些命令可以创建出各种复杂的图形。具体每个命令的用法可以参考 MDN 中的相关介绍。

SVG 生成工具

从上面介绍可以看出，简单的图形通过 SVG 的接口方便创建，但是遇到复杂的图形，工作将会变得非常复杂，各种命令的使用也会严重降低开发效率。所以，我们可以通过工具来生成复杂的 SVG 图像。

Google 的 SVG 编辑器 或者也可以使用张鑫旭自己网站上的在线编辑器。

另一个工具是，专业的图形设计软件、矢量绘制软件 — Adobe Illustrator。

SVG 类库与框架

写过 SVG 都会发现，直接使用各种命令在创建复杂的图形和交互的时候非常麻烦，所以各种类库和框架就应运而生，旨在提高开发效率。

Snap.svg

Snap.svg 是为高级浏览器设计的类库，它号称：

And the Snap.svg JavaScript library makes working with your SVG assets as easy as jQuery makes working with the DOM.

上文是说，使用 Snap.svg 来操作 SVG 就像使用 jQuery 操作 DOM 一样简单高效。

Github项目主页，已经有 7000 多个 star。

Snap 的中文 API 文档可以参考这里：Snap.svg API中文文档。

Raphael

Raphael 是另一个可选择的 SVG 库。

Raphael.js

可以这么理解 Raphael ，它和 Snap.svg 是同一个作者写的，只是兼容性降低到了 IE6，同时做的兼容性工作导致文件也比较大，未压缩版本 299Kb，压缩版本也有 91Kb。使用时需要特别注意。

Raphael的相关 API 可以参考这里：Raphael 文档参考。

实例

针对上一篇文章中的圆形进度条，这里做了一个 Snap.js 版本的 Demo:

可参考相关源码，用后感觉确实非常简单方便，需要兼容低版本浏览器的可以参考修改为 Raphael 的版本，这里不再赘述。