本书将向你介绍“可缩放矢量图形”（Scalable Vector Graphics）技术，即SVG。SVG 是万维网联盟（W3C）的一项推荐标准，它使用XML 来描述由直线、曲线、文本等组成的图形。这段干巴巴的定义并不能体现出SVG 的作用和它的强大之处。
你可以将SVG 图形加到XSL-FO（Extensible Stylesheet Language Formatting Objects）1 文档中，然后将文档转换为Adobe PDF 格式来获得更高的印刷质量。地图和气象领域的工作者可以使用SVG 来创建高精度、高质量、可移植的图形。Web 开发者将SVG 嵌入网页来创建高分辨率的响应式图形，且可以使文件尺寸很小。本书中的所有图表最初都是由SVG创建的。在学习和使用SVG 时，你一定能想到这项新技术的一些新的、有趣的使用场景。
本书读者
如果你想做以下事情，就应该读一读这本书：
• 在文本编辑器或者XML 编辑器中创建SVG 文件
• 从已有的矢量数据创建SVG 文件
• 将其他XML 数据转换为SVG
• 使用JavaScript 操作SVG 文档对象树
选错书的读者
如果你只是想查看SVG 文件，只需要安装一个阅读器或者Web 插件，然后下载SVG 文件查看就可以了。这种情况下你并不需要知道背后的原理，除非你想满足自己强烈的好奇心。
如果你想使用带有SVG 导出功能的图像处理软件来创建SVG 文件，那么只需要阅读相关软件的文档来学习如何使用软件的功能就可以了。
如果你打算继续阅读……
如果你确实适合阅读这本书，那么你应该了解，本书的大部分读者都是高级用户，他们很可能有技术背景，而不是图形设计背景。所以我们不打算在前面讲很多非常基础的东西，但我们希望没有XML 或者程序设计背景的人也能阅读本书，因此也准备了一些介绍性的章节，并将它们放到本书最后的附录中。如果你没有使用过XML 或者样式表（这可能包括一些技术人员），也没有编写过程序，可能需要先翻到附录部分。稍后，我们会概述各章和附录的主要内容。
如果你是技术工作者，也需要知道，本书并不能将你变成一位艺术家，就像一本讲字处理算法的书并不能让你把文章写得更好一样。本书将展示SVG 的很多技术细节，而如果要成为艺术家，你还需要学习观察。除了本书之外，你还应该读读Betty Edwards 博士的TheNew Drawing on the Right Side of the Brain2。
本书只会给出SVG 的一些基本信息，如果你想了解所有信息，请参考万维网联盟的SVG规范（http://www.w3.org/Graphics/SVG/Overview.htm8）。
关于示例
本书中的所有示例，除了涉及HTML 页面的之外，全部在运行在GNU/Linux 系统上的Batik SVG viewer 软件中测试通过。Batik SVG viewer 是由Apache 软件基金会下的Batik项目开发的一款软件。这款软件使用Java 开发，跨平台，并遵循Apache 软件协议开源，可以从http://xmlgraphics.apache.org/batik 下载。
书中的所有例子（ 包括第2、13 和14 章中涉及JavaScript 和HTML 的例子） 通过在Firefox 和Chrome 浏览器中加载的方式进行了测试。对SVG 高级特性的支持程度取决于
浏览器。
你在看本书中的示例的时候，会发现它们完全没有任何艺术价值。这是有原因的。首先，每个示例都是为了展示SVG 的一个方面，那么它就应该只展示这一个方面，而不应该有其他的视觉干扰。其次，本书作者David 在看其他书中那些漂亮得不可思议的图形时感到很沮丧，他心想：“我永远也画不出这么漂亮的图。”为了不让你产生同样的沮丧情绪，我们有意简化了这些示例。当你看到它们的时候，你的第一反应会是：“我可以用SVG 画出比这漂亮得多的东西！”你当然可以，然后你就会动手去画。
本书结构
• 第1 章 入门指南
本章简要介绍了SVG 的历史，比较了栅格图形系统与矢量图形系统，最后用一个简单的教程介绍了SVG 的主要概念。
• 第2 章 在网页中使用SVG
本章展示了在HTML5 文档中使用SVG 的各种方法。
• 第3 章 坐标系统
如何在画图时确定一个点的位置？哪个方向是“上”？本章解答了这些问题，并展示了如何切换图形中的坐标系统。
• 第4 章 基本形状
本章展示了如何使用SVG 中的基本形状来构成一个图形，这些基本形状有：线、长方形、多边形、圆、椭圆。本章也讨论了如何指定形状的轮廓和内部颜色。
• 第5 章 文档结构
在复杂的图形中，会有一些元素被复用或者是重复出现。本章会教你如何将对象组合成一个整体，使它们变成一个实体，可以复用。本章也讨论了如何使用外部的矢量图形或者栅格图形。
• 第6 章 坐标系统变换
如果你在一种可伸缩的材料上画一个正方形，然后水平拉伸材料，就会得到一个长方形。将材料的两个对边分别往不同的方向斜切，你会得到一个平行四边形。再将这个材料旋转45 度，你会得到一个菱形。在本章中，你将学到如何对坐标系统进行移动、旋转、缩放、斜切，以改变画布上图形的形状。
• 第7 章 路径
所有的基本形状都是“路径”这个一般概念的特殊实例。本章将展示如何使用线、圆弧和复杂的曲线来描述形状的一般轮廓。
• 第8 章 图案和渐变
本章在第4 章的基础上增加了关于颜色的讨论，比如如何创建渐变色或者如何创建填充模式。
• 第9 章 文本
一张图并不只有线和形状，文本也是海报或者示意图的重要组成部分。本章展示了如何添加文字，包括沿直线分布的文字和沿指定路径分布的文字。
• 第10 章 裁剪和蒙版
本章展示了如何使用裁剪路径（clipping path），让图形变得好像是从圆形镜头、锁孔或者其他形状中观察到的一样。本章还会展示如何使用遮罩来改变对象的透明度，使得对象的边缘呈现出“淡出”效果。
• 第11 章 滤镜
尽管SVG 文件是用来描述矢量图形的，但文档最终还是在栅格设备上被渲染的。在本章中，你会学到如何应用面向栅格图形的滤镜，来使图形变得模糊，改变它的颜色，或者产生一些灯光效果。
• 第12 章 SVG 动画
本章展示了如何使用SVG 内置的动画能力。
• 第13 章 添加交互
除了使用SVG 内置的动画，你还可以使用CSS 和JavaScript 来动态控制图形的属性。
• 第14 章 使用SVG DOM
本章进一步深入讨论了使用JavaScript 操作文档对象模型。还简要介绍了为使用SVG而设计的一个JavaScript 库。
• 第15 章 生成SVG
尽管可以从零开始创建一个SVG 文件，但很多人希望将已有的矢量数据或者XML 数据以图表的形式展现出来。本章将讨论使用编程语言和XSLT 来从已有数据创建SVG的方法。
• 附录A SVG 中需要的XML 知识
SVG 是XML（Extensible Markup Language，可扩展标记语言）的一种应用。如果你没有使用过XML，应该读一下本附录，以熟悉这项用来组织数据和文档的异常强大和灵活的技术。
• 附录B 样式表介绍
你可以使用样式表来为SVG 文档中的特定元素指定一些视觉属性。它们和HTML 文档使用的样式表几乎完全一样。如果你没有使用过样式表，应该看看这部分对样式表的简要介绍和解析。
• 附录C 编程概念
如果你是图形设计工作者，没有太多编程经验，应该读一下这部分，以便了解程序员说的“对象模型”和“函数”是什么。
• 附录D 矩阵代数
尽管不是很有必要，但是要完全理解SVG 中的坐标变换和滤镜效果的话，理解矩阵代数是很有帮助的。矩阵代数就是用来计算坐标和像素的数学知识。本附录重点关注矩阵代数的基础部分。
• 附录E 创建字体
TrueType 字体会以矢量图形（字符）来展示文字。本附录展示了如何使用你最喜欢的字体并将它们转换为SVG 文档中可以使用的路径。
• 附录F 将圆弧转换为不同的格式
很多软件中的圆弧使用的是“中心+ 角度”的格式。本附录提供了将这种格式与SVG格式互相转换的代码。
排版约定
本书使用了下列排版约定。
• 楷体
表示新术语或强调的内容。
• 等宽字体（Constant width）
表示程序片段，以及正文中出现的变量、函数名、数据库、数据类型、环境变量、语句和关键字等。
• 加粗等宽字体（Constant width bold）
表示应该由用户输入的命令或其他文本。
该图标表示提示、建议或一般注记。
该图标表示警告或警示。
本书使用编号来表示代码清单中有趣的点。编号采用实心圆加数字的形式。代码清单的下
方给出了相应的解释。这里有一个例子：
Roses are red,
Voilets are blue. ➊
Some poems rhyme;
This one doesn't. ➋
➊ 紫罗兰的实际颜色值为#9933cc。
➋ 这首诗使用的文学手法叫作意外的结局。
许多示例都可以在线测试，并且文中都给出了URL。有些在线示例还包含可以编辑的标记；点击刷新按钮可以查看改变后的结果。也可以点击重置按钮回到示例的原始状态。
Safari® Books Online
Safari Books Online（http://www.safaribooksonline.com）是应运而生的数字图书馆。它同时以图书和视频的形式出版世界顶级技术和商务作家的专业作品。技术专家、软件开发人员、Web设计师、商务人士和创意专家等，在开展调研、解决问题、学习和认证培训时，都将Safari Books Online 视作获取资料的首选渠道。
对于组织团体、政府机构和个人，Safari Books Online 提供各种产品组合和灵活的定价策略。用户可通过一个功能完备的数据库检索系统访问O’Reilly Media、PrenticeHall Professional、Addison-Wesley Professional、Microsoft Press、Sams、Que、Peachpit Press、Focal Press、Cisco Press、John Wiley & Sons、Syngress、Morgan Kaufmann、IBMRedbooks、Packt、Adobe Press、FT Press、Apress、Manning、New Riders、McGraw-Hill、Jones & Bartlett、Course Technology 以及其他几十家出版社的上千种图书、培训视频和正式出版之前的书稿。要了解Safari Books Online 的更多信息，我们网上见。
联系我们
请把对本书的评价和问题发给出版社。
美国：
O’Reilly Media, Inc.
1005 Gravenstein Highway North
Sebastopol, CA 95472
中国：
北京市西城区西直门南大街2 号成铭大厦C 座807 室（100035）
奥莱利技术咨询（北京）有限公司
O’Reilly 的每一本书都有专属网页，你可以在那儿找到本书的相关信息，包括勘误表、示例代码以及其他信息。本书的网站地址是：
http://shop.oreilly.com/product/0636920032335.do
对于本书的评论和技术性问题，请发送电子邮件到：bookquestions@oreilly.com。
要了解更多O’Reilly 图书、培训课程、会议和新闻的信息，请访问以下网站：
http://www.oreilly.com
我们在Facebook 的地址如下：http://facebook.com/oreilly
请关注我们的Twitter 动态：http://twitter.com/oreillymedia
我们的YouTube 视频地址如下：http://www.youtube.com/oreillymedia
第1版致谢
感谢本书编辑Simon St. Laurent，他总是能给出非常中肯的指导和意见。他还在电子邮件中告诉我“我们相信你知道该如何写”，这是我听到的最美妙的话语之一。
感谢Edd Dumbill，我略微地改动了一下他编写的文档，就形成了附录A。当然，该附录中的任何错误都是因为我的修改而造成的。
感谢本书的技术审阅人： Antoine Quint、David Klaphaak 以及Adobe 的SVG 质量工程团队，他们对初稿做了技术审阅。他们的意见从许多方面提升了本书的质量。
Jeffrey Zeldman 是第一个让我脑海中产生写书想法的人，真诚地感谢他。
感谢所有人，尤其是我的哥哥Steven。当我告诉他我正在写一本书时，他十分信任我，并对我说：“哇，太棒了！”
第2版致谢
感谢Shelly Powers 进行了出色的技术审阅。还要感谢Simon St. Laurent 和Meghan Blanchette出色的编辑工作。尽管挑剔的作者尽了最大的努力，但还是由Matthew Hacker 和O’Reilly的工具和产品团队做了一切收尾工作，感谢他们。
David 的致谢：特别感谢Amelia Bellamy-Royds。她一开始对本书进行了技术审阅，她的点评清晰易懂，写得非常好，以至于我一字不差地照搬了，所以她应该是一位合著者。她的修正和补充让本书变得更好，远远超出我的想象。
Amelia 的致谢：感谢David 对我所做的额外的工作给予了充分的认可和赞誉。本书第1 版就是非常受欢迎的介绍SVG 的图书。作为一个曾经对浏览器实现的各种怪异行为感到困惑不解的过来人，我真的希望这一版能将我在学习SVG 时的困惑一一解释清楚。
我还要特别感谢我的丈夫Chris，他给了我极大的支持，但也时常提醒我暂停工作，去吃饭、睡觉或者去呼吸些新鲜空气。
