推荐语

如果你想做以下事情，就应该读一读这本书：

• 在文本编辑器或者 XML 编辑器中创建 SVG 文件

• 从已有的矢量数据创建 SVG 文件

• 将其他 XML 数据转换为 SVG

• 使用 JavaScript 操作 SVG 文档对象树

汇智网已经为这本书匹配了专门的在线学习环境，书中示例代码也已经在线提供，希望能够帮助大家更好的学习。

网址： http://xb.hubwiz.com/

前言

本书将向你介绍“可缩放矢量图形”（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 标记语言，可参见 http://zh.wikipedia.org/wiki/XSL-FO。——译者注

本书结构

• 第 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 格式互相转换的代码。

我们已开通会员服务，希望大家鼎力支持。

Web前端都学点儿啥？

程序员不要烦！

最新书单：

《Flask Web开发》

《PostgreSQL即学即用（第2版）》

《JavaScript设计模式与开发实践》

《30天自制操作系统》

《GitHub入门与实践》

《机器学习实战》

《Bootstrap 实战》

《深入浅出Node.js》

汇智网内容已经覆盖以下编程技术，发送相应的文字会收获相关课程信息：

Node.js、MongoDB、JavaScript、C、C#、PHP、Python、Angularjs、Ionic、React、UML、redis、mySQL、Nginx、CSS、HTML、Bootstrap、Flask、Gulp、Mocha、Git、Meteor、Canvas、zebra、Typescript、Material Design Lite、ECMAScript、Elasticsearch、Mongoose、jQuery、d3.js、django、cheerio、SVG、phoneGap、jQueryMobile、Saas、YAML、Vue.js、webpack、Firebird，jQuery Easy UI，ruby，asp.net，c++，Express......