编辑推荐

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

内容简介

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

作者简介

　　J.DavidEisenberg，是一名程序员和教师。他开发了CSS、JavaScript、CGI、XML和Perl等多门编程课程，并在加州圣何塞常青谷学院教授计算机信息技术课程。他还著有étudesforErlang、Let'sReadHiragana以及《SVG精髓（第2版）》第1版。

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

精彩书评

　　“早在2002年，我就通过《SVG精髓（第2版）》的第1版初次了解了SVG，它对我帮助很大。真的很高兴，如今《SVG精髓（第2版）》针对现代浏览器以及新时代的开发者和设计者进行了更新升级。”
　　——DougSchepers，万维网联盟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．3　SVG的作用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章　在网页中使用SVG12
2．1　将SVG作为图像12
2．1．1　在元素内包含SVG13
2．1．2　在CSS中包含SVG14
2．2　将SVG作为应用程序15
2．3　混合文档中的SVG标记16
2．3．1　SVG中的foreignobject16
2．3．2　在XHTML或者HTML5中内联SVG18
2．3．3　其他XML应用程序中的SVG20
第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．1　stroke-width33
4．2．2　笔画颜色34
4．2．3　stroke-opacity35
4．2．4　stroke-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．1　translate变换58
6．2　scale变换60
6．3　变换序列63
6．4　技巧：笛卡儿坐标系统转换65
6．5　rotate变换67
6．6　技巧：围绕中心点缩放69
6．7　skewX和skewY变换69
6．8　变换总结70
6．9　CSS变换和SVG71
第7章　路径72
7．1　moveto、lineto和closepath72
7．2　相对moveto和lineto75
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．1　patternUnits91
8．1．2　patternContentUnits92
8．1．3　图案嵌套94
8．2　渐变95
8．2．1　linearGradient元素95
8．2．2　radialGradient元素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．1　Unicode和双向语言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．3　CSS中的动画运动176
第13章　添加交互177
13．1　在SVG中使用链接177
13．2　控制CSS动画179
13．3　用户触发的SMIL动画180
13．4　使用脚本控制SVG181
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章　使用SVGDOM198
14．1　确定元素的属性值198
14．2　SVG接口方法203
14．3　使用ECMAScript/JavaScript创建SVG207
14．4　使用脚本控制动画210
14．5　使用JavaScript库214
14．6　Snap中的事件处理219
14．6．1　点击对象220
14．6．2　拖拽对象220
第15章　生成SVG222
15．1　将自定义数据转换为SVG223
15．2　使用XSLT将XML数据转换为SVG226
15．2．1　定义任务226
15．2．2　XSLT的工作方式228
15．2．3　编写XSL样式表230
附录A　SVG中需要的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值。也就是SMILfill属性，它会告诉动画引擎如何填补剩下的时间。不要把它跟SVG的fill属性混淆了，该属性用于告诉SVG如何描绘对象。如果我们移除这一行，会使用默认值（remove），5秒的动画完成之后width属性会返回它的原始值200。
　　图12—1和图12—2展示了动画的开始和结束阶段。它们并不能很好地展示实际效果，因此我们强烈建议你在浏览器中试试。
　　……

前言/序言

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


其他推荐