1.SVG简介

1.Getting Started

计算机中有两种系统代表图像信息，分别是网格图像(raster)和矢量(vector)图像。

网格图像 Raster Graphics

在网格图像中，一个图片用一个矩形数组的图片元素或者像素表示。每个像素的通过它本身的RGB颜色值表示，或者是指向一系列颜色值的索引(index)表示。者一系列的像素, 也称之为位图(bitmap), 通常以压缩格式存储。由于绝大多数现代显示设备都是网格设备，显示一张图像要求一个查看程序，除了解压这个位图之外，还需要做一些额外的工作，以将图像传输到屏幕上。

矢量图像 Vector Graphics

在矢量图像系统中，一个图像被描述为一系列的集合图形(geometric shapes)(如图1-2)。而不是接收一系列已经完成了的一组像素集，一个矢量图查看程序接收命令，在特定的一组坐标系上绘制图形(shapes)。

你想象一下在一张图形纸上生成一个图像，网格图像的工作方式是：通过描述哪些格子需要填充，需要以什么颜色填充来绘制图像。矢量图像的工作方式是：描述一组点位，这些点位用于指导直线或者曲线的绘制位置。一些人描述矢量图象是一组绘制的指令(instructions), 而位图(bitmap graphics),也就是网格点(rasters),是特定地方的一组颜色。矢量图明白它们是什么——一个矩形知道它是一个矩形，一个文本知道它是文本。因为它们是对象，而不是一系列的像素(pixels), 矢量对象(vector objects) 能够改变它们的形状(shape)和颜色(color), 而位图(bitmap graphics)不能。 并且，所有的文本都是可以搜寻的，因为它们真的是文本，无论它们看上去像什么样式，或者它们经历了怎样的旋转或变换。

另外一种想法认为网格图像(raster graphics) 就像在画布打印，而矢量图是线条和图形组成的可拉伸的材料，它们可以在背景上任意移动。

使用网格图像 Use of Raster Graphics

网格图像最适用于照片，几乎不是用线条和曲线组成。扫描图像(Scanned images)通常存储为位图(bitmaps);即使原始图像可能是一幅线条艺术画，你想存储整幅图像而不关心它们的独立成分。例如，一台传真机(fax machine),并不关心你绘制的是什么；它只是简单的以网格的形式将像素从一个地方传递到另一个地方。

以网格格式(raster format)创建图像的工具得到了广泛的使用，通常以矢量格式创建图像的工具更容易使用。有许多不同的方法来压缩和存储一张网格图像，这些格式的内部表示是公开的。有大量用于读取和输出诸如 JPEG, GIF，和PNG等压缩格式的程序库。这些是网络浏览器在 SVG 到来之前一直只支持网格图像的原因。

使用矢量图像 Uses of Vector Graphics

矢量图像在下面的一些领域得到运用：

• 计算机辅助绘图(CAD: Computer Assisted Drafting), 其中精确的测量和放大图像以查看详细信息的能力至关重要。

• 设计图像的程序，设计出来的图像将要在高分辨率的打印机上打印(例如：Adobe Illustrator)。

• Adobe PostScript 打印和图像语言； 你所打印的每一个字符都是通过一组线条和曲线描述的。

• 基于矢量的 Macromedia Flash system。 用于设计动画(animations),演示稿(presentations),和网站(websites)。

因为所有的这些文件都是以二进制格式(binary format)编码的，或作为紧密包装的位流(bitstreams), 浏览器或者其他用户代理程序很难解析出嵌入的文本，服务器也很难基于外部的数据动态创建矢量图。因为矢量图的大部分内部表示是专有的，通常无法编码实现查看或创建它们。

缩放能力 Scalability

虽然没有像网格图像那么流行，矢量图的一个特性使得它们在许多程序中无可替代——它们能够在不损失图像质量的情况下进行缩放。举个例子，这里有一只猫的两种绘制版本。图1-3使用网格图像绘制，图1-4使用矢量图像绘制。它们都显示在每英寸 72 像素的屏幕上。

当一个显示程序放大网格图像时，它必须寻找一些方法去扩展每个像素。最简单的方法是放大倍数是因数4的倍数，以使得每个像素扩大四倍。而结果，如图1-5所示，不是特别的令人满意。

即使有可能使用诸如边缘检测(edge detection) 和反走样(anti-aliasing) 的技术让放大的图片变得让人满意，这些技术有时间开销(time-consuming)。此外，由于网格图像中的所有像素都是相同的结构，无法保证一个算法能正确无误第检测出所有图形的边缘。反走样处理后的结果有时候像图1-6：

另一方面，将一个矢量图像(Vector image)放大四倍，只需要显示程序将所有图形(shapes)的坐标系乘以4，以显示设备的全分辨率重新绘制它们。因此，图1-7，也是从72点/英寸(DPI)屏幕的截图。显示清晰，清晰的线条边缘，显著地减少了扩展网格图像的锯齿效果。

SVG的角色 SVG’s Role

在 1998 年，万维网联盟成立了一个工作组，以开发矢量图形的 XML 应用表示。因为 SVG 使一个 XML 应用，图像的信息得用普通文本(plain text)存储，它带来了 XML 开放性，可移植性，互通性的优点。

CAD 和 图形设计程序通常以专有的二进制格式存储绘图。通过添加绘图的SVG格式的导入和到处能力，应用程序获得了交换信息的公共标准格式。

因为它是 XML 的应用， SVG 可以和其他 XML 引用合作。比如，一本数学文本树，可以使用 XSL 格式对象来说明文本， MathML 来描述方程， SVG 来生成这个方程的图像。

SVG 工作组的规范使一个官方的万维网协会推荐。诸如 Adobe Illustrator 和 Inkscape 能够导入和导出 SVG 格式的绘图。 在 Web 中， SVG 得到了许多浏览器的原生支持，并且具有许多与 CSS 样式的 HTML 相同的变换和动画功能。因为 SVG 文件是 XML, SVG 中显示的文本对于任何能够解析 XML 的用户代理程序是可用的。

创建一个 SVG 图像 Creating an SVG Graphic

在这节中，你将看到一个 SVG 文件 生成一幅猫的图像，而这个猫就是你在本章前面看到的那只。这个例子介绍了许多概念，而这些概念你想在剩下的章节中有更深入的了解。这个文件是一个如何编写一个样例文件的好的例子，这并不一定是您编写将成为完成项目一部分的 SVG 文件的方式。

文档结构 Document Structure

样例1-1 以标准的 XML 处理指令 和 DOCTYPE 声明开始。

Example 1-1. Basic structure of an SVG document

<?xml version="1.0"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="140" height="170"
xmlns="http://www.w3.org/2000/svg">
<title>Cat</title>
<desc>Stick Figure of a Cat</desc>
<!-- the drawing will go here -->
</svg>

Basic Shapes

通过添加 元素来绘制猫的脸。这个元素的属性指定了中心点的 x 坐标， y 坐标，和半径。 点(0,0) 是图像的左上角。x 坐标随着你往右移动而增长， y 坐标随着你往下移动而增长。

圆的位置和大小是绘制结构的一部分。它被绘制的颜色是其呈现的一部分。作为 XML 应用程序的一个习惯，你应当将结构(structure)和外观(presentation)分开，以得到最大的灵活性。外观信息包含在 style 属性中。 他的只将是一系列外观属性和值，就像 Appendix B 中描述的那样， 分析样式的风格。使用了黑色作为轮廓的颜色，填充色设置为 none,使得猫的脸是透明的。 SVG 的内容如图1-2， 它的结果如图1-8。

Example 1-2. Basic shapes — circle

<?xml version="1.0"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="140" height="170"
xmlns="http://www.w3.org/2000/svg">
<title>Cat</title>
<desc>Stick Figure of a Cat</desc>
<circle cx="70" cy="95" r="50" style="stroke: black; fill: none"/>
</svg>

将样式指定为属性 Specifying Styles as Attributes

如图1-3所示，现在添加两个圆作为眼睛。尽管它们的填充和描边颜色是外观的一部分， SVG 确实允许将它们指定为单独的属性。在这个例子当中，fill 和 stroke 颜色作为两个分来的属性，而不是联在一起作为 style 属性的值。你可能不会经常使用这个方法；它将在第 5 章中阐述， 在外观属性(Presentation Attributes)中。我们把他放到这里只是为了证明这样也可以起作用。结果如图 1-9 所示。

Example 1-3. Basic shapes — filled circles

<?xml version="1.0"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="140" height="170"
xmlns="http://www.w3.org/2000/svg">
<title>Cat</title>
<desc>Stick Figure of a Cat</desc>
<circle cx="70" cy="95" r="50" style="stroke: black; fill: none"/>
<circle cx="55" cy="80" r="5" stroke="black" fill="#339933"/>
<circle cx="85" cy="80" r="5" stroke="black" fill="#339933"/
</svg>

分组图形对象 Grouping Graphic Objects

图1-4通过两个 元素给猫脸的右边添加了胡须。你像将这些胡须作为一个单元看待，然后以 元素包括它们，并给它一个 id。 你通过 x 坐标和 y 坐标执行线的开始点(x1 and y1) 和结束点(x2 and y2)。

Example 1-4. Basic shapes — lines

<?xml version="1.0"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="140" height="170"
xmlns="http://www.w3.org/2000/svg">
<title>Cat</title>
<desc>Stick Figure of a Cat</desc>
<circle cx="70" cy="95" r="50" style="stroke: black; fill: none;"/>
<circle cx="55" cy="80" r="5" stroke="black" fill="#339933"/>
<circle cx="85" cy="80" r="5" stroke="black" fill="#339933"/>
<g id="whiskers">
<line x1="75" y1="95" x2="135" y2="85" style="stroke: black;"/>
<line x1="75" y1="95" x2="135" y2="105" style="stroke: black;"/>
</g>
</svg>

变换坐标系 Transforming the Coordinate System

现在你将通过 元素使用 whiskers 组，并将它变换为左边的胡须。样例1-5 首先通过在 scale 变换中给 x 坐标乘以一个负1。这意味着这个点 (75, 95) 现在所在的位置将会是最初坐标系统中的 (-75, 95)。在新的缩放系统中，由于你往左移动了，所以需要增加坐标值。着意味着你需要将坐标系统向右移动 140 像素。负方向， 把它们带到你想要的地方，如图1-11所示。

Example 1-5. Transforming the coordinate system

<?xml version="1.0"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="140" height="170"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
<title>Cat</title>
<desc>Stick Figure of a Cat</desc>
<circle cx="70" cy="95" r="50" style="stroke: black; fill: none;"/>
<circle cx="55" cy="80" r="5" stroke="black" fill="#339933"/>
<circle cx="85" cy="80" r="5" stroke="black" fill="#339933"/>
<g id="whiskers">
<line x1="75" y1="95" x2="135" y2="85" style="stroke: black;"/>
<line x1="75" y1="95" x2="135" y2="105" style="stroke: black;"/>
</g>
<use xlink:href="#whiskers" transform="scale(-1 1) translate(-140 0)"/>
</svg>

元素中的 xlink:href 属性使用了一个不同的命名空间(namespace)(参阅Appendix A 了解更多)。为了确保你的 SVG 文档在所有的 SVG 查看程序中正常工作，你必须在开发的

transform 属性的值罗列了所有的变换，一个接着另一个，以空白字符分隔。

其他基本图形 Other Basic Shapes

样例1-6通过 元素构造了耳朵和嘴吧，使用了成对的 x 坐标和 y 坐标作为points的属性。你可以根据你的喜好通过空格或者逗号分隔数字，结果如图1-12所示。

Example 1-6. Basic shapes — polylines

<?xml version="1.0"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="140" height="170"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
<title>Cat</title>
<desc>Stick Figure of a Cat</desc>
<circle cx="70" cy="95" r="50" style="stroke: black; fill: none;"/>
<circle cx="55" cy="80" r="5" stroke="black" fill="#339933"/>
<circle cx="85" cy="80" r="5" stroke="black" fill="#339933"/>
<g id="whiskers">
<line x1="75" y1="95" x2="135" y2="85" style="stroke: black;"/>
<line x1="75" y1="95" x2="135" y2="105" style="stroke: black;"/>
</g>
<use xlink:href="#whiskers" transform="scale(-1 1) translate(-140 0)"/>
<!-- ears -->
<polyline points="108 62, 90 10, 70 45, 50, 10, 32, 62"
style="stroke: black; fill: none;" />
<!-- mouth -->
<polyline points="35 110, 45 120, 95 120, 105, 110"
style="stroke: black; fill: none;" />
</svg>

Paths

所有的基本图形实际上都是通用的 元素的快捷方式，样例1-7 用于添加猫的鼻子。结果如图1-13所示。这个元素的设计是为了使指定的路径或直线和曲线的序列尽可能紧凑。样例1-7 中的 path 转化，换句话说， “移动到坐标点(75,90)，绘制一条线到坐标点(65,90)。绘制一个x轴半径为5， y轴半径为10的椭圆弧，返回坐标(75,90)。

Example 1-7. Using the element

<svg width="140" height="170"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
<title>Cat</title>
<desc>Stick Figure of a Cat</desc>
<circle cx="70" cy="95" r="50" style="stroke: black; fill: none;"/>
<circle cx="55" cy="80" r="5" stroke="black" fill="#339933"/>
<circle cx="85" cy="80" r="5" stroke="black" fill="#339933"/>
<g id="whiskers">
<line x1="75" y1="95" x2="135" y2="85" style="stroke: black;"/>
<line x1="75" y1="95" x2="135" y2="105" style="stroke: black;"/>
</g>
<use xlink:href="#whiskers" transform="scale(-1 1) translate(-140 0)"/>
<!-- ears -->
<polyline points="108 62, 90 10, 70 45, 50, 10, 32, 62"
style="stroke: black; fill: none;" />
<!-- mouth -->
<polyline points="35 110, 45 120, 95 120, 105, 110"
style="stroke: black; fill: none;" />
<!-- nose -->
<path d="M 75 90 L 65 90 A 5 10 0 0 0 75 90"
style="stroke: black; fill: #ffcccc"/>
</svg>

Text

最后，由于这幅图画得太粗糙了，有很大的可能人们不知道它是一只猫。因此，样例1-8在图片中添加了一个文本标签。在元素 元素中， x 和 y 属性指定了文本的位置，作为整体结构的一部分。 字体类型和字体大小是外观的一部分， 因此是 style 属性的一部分。并不像其他你所看到的属性， 是一个容器元素，它的内容就是你想显示的文本。图1-14 显示了最终的结果。

Example 1-8. Adding a label

<svg width="140" height="170"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
<title>Cat</title>
<desc>Stick Figure of a Cat</desc>
<circle cx="70" cy="95" r="50" style="stroke: black; fill: none;"/>
<circle cx="55" cy="80" r="5" stroke="black" fill="#339933"/>
<circle cx="85" cy="80" r="5" stroke="black" fill="#339933"/>
<g id="whiskers">
<line x1="75" y1="95" x2="135" y2="85" style="stroke: black;"/>
<line x1="75" y1="95" x2="135" y2="105" style="stroke: black;"/>
</g>
<use xlink:href="#whiskers" transform="scale(-1 1) translate(-140 0)"/>
<!-- ears -->
<polyline points="108 62, 90 10, 70 45, 50, 10, 32, 62"
style="stroke: black; fill: none;" />
<!-- mouth -->
<polyline points="35 110, 45 120, 95 120, 105, 110"
style="stroke: black; fill: none;" />
<!-- nose -->
<path d="M 75 90 L 65 90 A 5 10 0 0 0 75 90"
style="stroke: black; fill: #ffcccc"/>
<text x="60" y="165" style="font-family: sans-serif; font-size: 14pt;
stroke: none; fill: black;">Cat</text>
</svg>

上面的内容总结了我们对 SVG 的简要概述；在下面的章节中。您将深入研究这些概念。