SVG精髓（第2版）

《SVG精髓（第2版）》详尽介绍了可缩放矢量图形（SVG）技术。SVG是一种标记语言，为大多数矢量绘图程序和交互式Web图形工具所使用。本书将带你详细了解SVG的功能，首先学习简单的SVG应用，如绘制线条，然后逐步探索复杂的特性，比如滤镜、变换、渐变和图案等。
本书第2版扩展了动画、交互式图形以及SVG编程等内容。交互式的在线示例让你很容易在Web浏览器中实验SVG的特性。本书还为经验丰富的设计师准备了6个附录，解释了XML标记和CSS样式等基本概念，因此即使你没有网页设计的经验，也可以开始学习SVG。
通过阅读本书，你将能够：
为网页创建高质量、高分辨率的图形；
创建通过搜索引擎或辅助技术易于访问的图表和装饰性标题；
用SVG蒙版、滤镜以及变换给图形、文本和照片添加艺术效果；
用SVG标记动画绘制图形，使用CSS和JavaScript添加交互；
根据现有的矢量数据或XML数据使用编程语言或XSLT创建SVG。

《SVG精髓（第2版）》通过实例透彻讲解了SVG（可缩放矢量图形）这种标记语言的规范及应用。作者从简单的SVG应用开始，带领读者逐步探索了SVG的复杂功能，包括滤镜、变换、渐变和模式。从应用层面看，本书涵盖了动画、交互图形和动态SVG编程等技术，不仅能为有经验的开发人员提供重要参考，同时通过讲解基本的XML和CSS技术，为没有Web开发经验的读者提供了入门捷径。

J. David Eisenberg，是一名程序员和教师。他开发了CSS、JavaScript、CGI、XML和Perl等多门编程课程，并在加州圣何塞常青谷学院教授计算机信息技术课程。他还著有études for Erlang、Let's Read Hiragana以及本书第1版。

Amelia Bellamy-Royds，是一位专门从事科学和技术交流的自由撰稿人。她通过参与Web Platform Docs、Stack Exchange和Codepen等在线社区，帮助推动Web标准和设计。

“早在2002年，我就通过本书的第1版初次了解了SVG，它对我帮助很大。真的很高兴，如今本书针对现代浏览器以及新时代的开发者和设计者进行了更新升级。”
——Doug Schepers，万维网联盟SVG工作组成员

第1 章入门指南 1
1．1图形系统 1
1．1．1栅格图形 1
1．1．2矢量图形 2
1．1．3栅格图形的用途 2
1．1．4矢量图形的用途 2
1．2可缩放 3
1．3SVG 的作用 5
1．4创建一个SVG 图像 5
1．4．1文档结构 5
1．4．2基本形状 6
1．4．3指定样式属性 6
1．4．4图形对象分组 7
1．4．5变换坐标系统 8
1．4．6其他基本图形 8
1．4．7路径 9
1．4．8文本 10
第2 章在网页中使用SVG 12
2．1将SVG 作为图像 12
2．1．1在 元素内包含SVG 13
2．1．2在CSS 中包含SVG 14
2．2将SVG 作为应用程序 15
2．3混合文档中的SVG 标记 16
2．3．1SVG 中的foreign object 16
2．3．2在XHTML 或者HTML5 中内联SVG 18
2．3．3其他XML 应用程序中的SVG 20
第3 章坐标系统 21
3．1视口 21
3．2使用默认用户坐标 22
3．3为视口指定用户坐标 24
3．4保留宽高比 25
3．4．1为preserveAspectRatio 指定对齐方式 26
3．4．2使用meet 说明符 27
3．4．3使用slice 说明符 28
3．4．4使用none 说明符 29
3．5嵌套坐标系统 29
第4 章基本形状 32
4．1线段 32
4．2笔画特性 33
4．2．1stroke-width 33
4．2．2笔画颜色 34
4．2．3stroke-opacity 35
4．2．4stroke-dasharray 属性 36
4．3矩形 37
4．4圆和椭圆 39
4．5多边形 40
4．6折线 42
4．7线帽和线连接 43
4．8基本形状总结 44
4．8．1形状元素 45
4．8．2指定颜色 45
4．8．3笔画和填充特性 46
第5 章文档结构 47
5．1结构和表现 47
5．2在SVG 中使用样式 48
5．2．1内联样式 48
5．2．2内部样式表 48
5．2．3外部样式表 49
5．2．4表现属性 50
5．3分组和引用对象 51
5．3．1
元素 51
5．3．2元素 52
5．3．3元素 53
5．3．4元素 55
5．3．5 元素 56
第6 章坐标系统变换 58
6．1translate 变换 58
6．2scale 变换 60
6．3变换序列 63
6．4技巧：笛卡儿坐标系统转换 65
6．5rotate 变换 67
6．6技巧：围绕中心点缩放 69
6．7skewX 和skewY 变换 69
6．8变换总结 70
6．9CSS 变换和SVG 71
第7 章路径 72
7．1moveto、lineto 和closepath 72
7．2相对moveto 和lineto 75
7．3路径的快捷方式 75
7．3．1水平和垂直lineto 命令 75
7．3．2路径快捷方式表示法 76
7．4椭圆弧 76
7．5从其他弧线格式转换 79
7．6贝塞尔曲线 79
7．6．1二次贝塞尔曲线 80
7．6．2三次贝塞尔曲线 82
7．7路径总结 84
7．8路径和填充 84
7．9元素 85
7．10标记记录 88
第8 章图案和渐变 90
8．1图案 90
8．1．1patternUnits 91
8．1．2patternContentUnits 92
8．1．3图案嵌套 94
8．2渐变 95
8．2．1linearGradient 元素 95
8．2．2radialGradient 元素 99
8．2．3渐变总结 102
8．3变换图案和渐变 103
第9 章文本 105
9．1文本的相关术语 105
9．2元素的基本属性 106
9．3文本对齐 108
9．4元素 109
9．5设置文本长度 111
9．6纵向文本 112
9．7国际化和文本 113
9．7．1Unicode 和双向语言 113
9．7．2元素 114
9．7．3使用自定义字体 115
9．8文本路径 117
9．9空白和文本 119
9．10案例学习：为图形添加文本 120
第10 章裁剪和蒙版 122
10．1裁剪路径 122
10．2蒙版 125
10．3案例学习：为图形应用蒙版 129
第11 章滤镜 131
11．1滤镜的工作原理 131
11．2创建投影效果 132
11．2．1建立滤镜的边界 132
11．2．2投影133
11．2．3存储、链接以及合并滤镜结果 134
11．3创建发光式投影 135
11．3．1元素 135
11．3．2详解 136
11．4滤镜 138
11．5滤镜 139
11．6滤镜 143
11．7滤镜 146
11．8和滤镜 147
11．9光照效果 148
11．9．1漫反射照明 149
11．9．2镜面反射照明 150
11．10访问背景 152
11．11元素 153
11．12元素 154
11．13元素 156
11．14元素 158
11．15滤镜总结 159
第12 章SVG 动画 161
12．1动画基础 162
12．2动画时间详解164
12．3同步动画 164
12．4重复动作 165
12．5对复杂的属性应用动画 166
12．6指定多个值 167
12．7多级动画时间 168
12．8元素 169
12．9元素 169
12．10元素 171
12．11为运动指定关键点和时间 173
12．12使用CSS 处理SVG 动画 174
12．12．1动画属性 174
12．12．2设置动画关键帧 175
12．12．3CSS 中的动画运动 176
第13 章添加交互 177
13．1在SVG 中使用链接 177
13．2控制CSS 动画 179
13．3用户触发的SMIL 动画 180
13．4使用脚本控制SVG 181
13．4．1事件概览 183
13．4．2监听和响应事件 184
13．4．3修改多个对象的属性 185
13．4．4拖拽对象 188
13．4．5与HTML 页面交互 191
13．4．6创建新元素 195
第14 章使用SVG DOM 198
14．1确定元素的属性值 198
14．2SVG 接口方法 203
14．3使用ECMAScript/JavaScript 创建SVG 207
14．4使用脚本控制动画 210
14．5使用JavaScript 库 214
14．6Snap 中的事件处理 219
14．6．1点击对象 220
14．6．2拖拽对象 220
第15 章生成SVG 222
15．1将自定义数据转换为SVG 223
15．2使用XSLT 将XML 数据转换为SVG 226
15．2．1定义任务 226
15．2．2XSLT 的工作方式 228
15．2．3编写XSL 样式表 230
附录ASVG 中需要的XML 知识 238
附录B样式表介绍 249
附录C编程概念 255
附录D矩阵代数 263
附录E创建字体 270
附录

首先需要注意的是 rect 元素不再是一个空元素，它里面包含了动画元素。
animate 元素指定了下列信息。
attributeNane，动画中应该持续改变的值；在这里就是width。
attribukType。width属性是一个XML属性。另一个常用的attributeType值是CSS，表示我们想要改变的属性是一个CSS属性。如果忽略这一属性，它的默认值是auto，它首先会搜索CSS属性，然后才是XML属性。
属性的起始（from）和结束（to）值。在这个例子中，起始值是200，结束值是20。from值是可选的；如果不指定，则会使用父元素的值。此外，还有一个by属性，可以代替to，它是一个从from值开始的偏移量；动画结束时属性的值为结束值。
动画的开始时间和持续时间。在这个例子中，时间以秒为单位，通过在数字后面使用s指定。定义时间的其他方式会在12.2节中描述。
动画结束时做什么。在这个例子中，持续5秒之后，属性会“冻结”（freeze）为to值。也就是SMIL fill属性，它会告诉动画引擎如何填补剩下的时间。不要把它跟SVG的fill属性混淆了，该属性用于告诉SVG如何描绘对象。如果我们移除这一行，会使用默认值（remove），5秒的动画完成之后width属性会返回它的原始值200。
图12—1和图12—2展示了动画的开始和结束阶段。它们并不能很好地展示实际效果，因此我们强烈建议你在浏览器中试试。
……

本书将向你介绍“可缩放矢量图形”（Scalable Vector Graphics）技术，即 SVG。SVG 是万维网联盟（W3C）的一项推荐标准，它使用 XML 来描述由直线、曲线、文本等组成的图形。这段干巴巴的定义并不能体现出 SVG 的作用和它的强大之处。
你可以将 SVG 图形加到 XSL-FO（Extensible Stylesheet Language Formatting Objects）1 文档中，然后将文档转换为 Adobe PDF 格式来获得更高的印刷质量。地图和气象领域的工作者可以使用 SVG 来创建高精度、高质量、可移植的图形。Web 开发者将 SVG 嵌入网页来创建高分辨率的响应式图形，且可以使文件尺寸很小。本书中的所有图表最初都是由 SVG 创建的。在学习和使用 SVG 时，你一定能想到这项新技术的一些新的、有趣的使用场景。
1一种用于文档格式的 XML 标记语言，可参见 https://zh.wikipedia.org/wiki/XSL-FO。——译者
本书读者
如果你想做以下事情，就应该读一读这本书：
在文本编辑器或者 XML 编辑器中创建 SVG 文件
从已有的矢量数据创建 SVG 文件
将其他 XML 数据转换为 SVG
使用 JavaScript 操作 SVG 文档对象树
选错书的读者
如果你只是想查看 SVG 文件，只需要安装一个阅读器或者 Web 插件，然后下载 SVG 文件查看就可以了。这种情况下你并不需要知道背后的原理，除非你想满足自己强烈的好奇心。
如果你想使用带有 SVG 导出功能的图像处理软件来创建 SVG 文件，那么只需要阅读相关软件的文档来学习如何使用软件的功能就可以了。
如果你打算继续阅读……
如果你确实适合阅读这本书，那么你应该了解，本书的大部分读者都是高级用户，他们很可能有技术背景，而不是图形设计背景。所以我们不打算在前面讲很多非常基础的东西，但我们希望没有 XML 或者程序设计背景的人也能阅读本书，因此也准备了一些介绍性的章节，并将它们放到本书最后的附录中。如果你没有使用过 XML 或者样式表（这可能包括一些技术人员），也没有编写过程序，可能需要先翻到附录部分。稍后，我们会概述各章和附录的主要内容。
如果你是技术工作者，也需要知道，本书并不能将你变成一位艺术家，就像一本讲字处理算法的书并不能让你把文章写得更好一样。本书将展示 SVG 的很多技术细节，而如果要成为艺术家，你还需要学习观察。除了本书之外，你还应该读读 Betty Edwards 博士的 The New Drawing on the Right Side of the Brain 2。
2该书中文版《五天学会绘画》已由北方文艺出版社出版。https://book.douban.com/subject/5263615/。——译者注
本书只会给出 SVG 的一些基本信息，如果你想了解所有信息，请参考万维网联盟的 SVG 规范（https://www.w3.org/Graphics/SVG/Overview.htm8）。
关于示例
本书中的所有示例，除了涉及 HTML 页面的之外，全部在运行在 GNU/Linux 系统上的 Batik SVG viewer 软件中测试通过。Batik SVG viewer 是由 Apache 软件基金会下的 Batik 项目开发的一款软件。这款软件使用 Java 开发，跨平台，并遵循 Apache 软件协议开源，可以从https://xmlgraphics.apache.org/batik 下载。
书中的所有例子（包括第 2、13 和 14 章中涉及 JavaScript 和 HTML 的例子）通过在 Firefox 和 Chrome 浏览器中加载的方式进行了测试。对 SVG 高级特性的支持程度取决于浏览器。
你在看本书中的示例的时候，会发现它们完全没有任何艺术价值。这是有原因的。首先，每个示例都是为了展示 SVG 的一个方面，那么它就应该只展示这一个方面，而不应该有其他的视觉干扰。其次，本书作者 David 在看其他书中那些漂亮得不可思议的图形时感到很沮丧，他心想：“我永远也画不出这么漂亮的图。”为了不让你产生同样的沮丧情绪，我们有意简化了这些示例。当你看到它们的时候，你的第一反应会是：“我可以用 SVG 画出比这漂亮得多的东西！”你当然可以，然后你就会动手去画。