• 我应该学习这个教程吗？

　　本教程辅助开发人员理解可伸缩向量图形（SVG）背后的概念以将它们作为静态文档或动态生成的内容创建。

　　XML 经验不是必需的，但熟悉至少一种标记语言（如 HTML）是有用的。有关基本的 XML 信息，请参阅教程 Introduction to XML 。在本教程的结束部分的单个脚本编制示例中用到了 JavaScript，不过相当简单。

• 本教程的内容

　　可伸缩向量图形（SVG）使得用文本指定出现在页面上的图像成为可能。例如，传统图形需要指定矩形的每一个像素，而 SVG 只要说明矩形存在，并指出它的大小、位置和其它属性即可。

　　它的好处有很多，包括轻松地从数据库信息生成图形（如图或图表）的能力，以及向图形添加动画和交互性的能力。

　　本教程演示了构建 SVG 文档必需的概念，如基本形状、路径、文本和绘制模型，还有动画和脚本编制。

• 关于作者

　　Nicholas Chase 曾参与了 Lucent Technologies、Sun Microsystems、Oracle 和 Tampa Bay Buccaneers 等公司的网站开发。Nick 曾经当过高中物理教师、低级放射性废物设施经理、在线科幻杂志编辑、多媒体工程师以及 Oracle 讲师。最近，他担任过位于美国佛罗里达州 Clearwater 的 Site Dynamics Interactive Communications 的首席技术官，他还写了三本有关 Web 开发的书，包括 Java and XML From Scratch（Que）。他喜欢倾听读者的意见，可以通过 nicholas@nicholaschase.com This email address is being protected from spam bots, you need Javascript enabled to view it 与他联系。

-----------------------------------------

SVG是什么?

• 向量图形与光栅图形的比较

　　在万维网历史的大部分时间里，浏览器显示的图形都是光栅格式的。在光栅图像（如 GIF 或 JPEG 图像）中，文件包含图像中每个像素的颜色值。浏览器读取这些值并做出相应行动。它仅认识到单独的部分，而没有整体概念。

　　总的说来，这一系统有其优势，例如忠实再现摄影图像的能力，但它在某些情形下显得不足。例如，尽管浏览器能以不同大小显示一个图像，通常会产生锯齿边缘，在这些地方，浏览器不得不为那些在原始图像中不存在的像素插入或猜测数值。此外，光栅文件格式的二进制性质使得难以（尽管不是不可能）基于数据库信息动态地创建图像，并且动画最多也仅限于“翻动书本”类型的动画，即快速连续地显示单独图像。

　　向量图形，通过指定为确定每个像素的值所需的指令而不是指定这些值本身，克服了这些困难中的一部分。例如，向量图形不再为一个直径一英寸的圆提供像素值，而是告诉浏览器创建一个直径一英寸的圆，然后让浏览器（或插件）做其余事情。

　　这消除了光栅图形的许多限制；使用向量图形，浏览器只要知道它必须画一个圆。如果图像需要以正常大小的三倍来显示，那么浏览器只要按正确的大小画圆而不必执行光栅图像通常的插入法。类似地，浏览器接收的指令可以更容易地与外部信息源（如应用程序和数据库）绑定，要对图像制作动画，浏览器只要接收有关如何操纵属性（如半径或颜色）的指令即可。

• Web 上的向量图像

　　Web 上的第一个向量图像可能是虚拟现实标记语言（VRML）图像。VRML 寻求将 HTML 的简易性带到图像创建中来，然而尽管有一些示例给人以深刻的印象，但它的本来目的是为了 3D 造型，而且它太过复杂以至于从未真正流行起来。

　　接着是 Macromedia Flash 的介入。Flash 电影是用 Macromedia 的 Flash 应用程序所创建，它允许创建相当复杂的动画，并且将动画与声音和交互性绑定在一起。因为 Flash 文件主要包含有关如何创建图像的指令，所以它们比传统的 Web 电影小得多（例如 QuickTime 电影）— 而且它们可以缩放。

　　但是，Flash 文件仍然是二进制文件，这使得动态创建它们比较困难（尽管不是不可能）。而且对从浏览器可以进行的脚本编制有所限制。

• 使用文本定义图像

　　可伸缩向量图形通过使用 XML 定义图像、动画和交互性解决了这些问题中的许多问题。浏览器读取（或者更准确地说，浏览器的插件读取）这些基于文本的指令，然后执行这些指令。例如，一个简单的 SVG 矩形图像可能看起来如下：

<?xml version="1.0" standalone="no" ?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN"
"http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">

<svg width="300" height="100" xmlns="http://www.w3.org/2000/svg">

<rect x="25" y="10" width="280" height="50"
fill="red" stroke="blue" stroke-width="3"/>

</svg>

　　这个文档指示浏览器创建一个矩形，并提供属性信息，如位置（x, y）、大小（height, width）、颜色（fill, stroke）和线宽（stroke-width）。（全部文档在基本 SVG 文档中讨论。）

• 动画和交互性

　　因为这一结构，SVG 非常适合于动画和交互性。要更改图形元素的大小、位置或颜色，脚本只要调整相应的属性即可。

　　事实上，SVG 有为事件处理而专门设计的属性（很象 HTML），甚至还有特别适合于动画的元素。例如，下面这一文档创建一个在 8 秒期间沿一条特定路线来回移动并无限重复的棍状图形：

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN"
"http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg width="500" height="300" xmlns="http://www.w3.org/2000/svg">

<!-- Box around the image -->
<rect x="1" y="1" width="498" height="298"
fill="none" stroke="blue" stroke-width="2" />

<!-- Visible path -->
<path d="M0,300 S150,100 200,200 S400,400 500,0"
fill="none" stroke="red" stroke-width="2" />

<!-- Group of elements to animate -->
<g stroke-width="5" stroke="black">

<!-- Stick figure pieces -->
<circle cx="0" cy="-45" r="10" fill="black"/>
<line x1="-20" y1="-30" x2="0" y2="-25"/>
<line x1="20" y1="-30" x2="0" y2="-25"/>
<line x1="-20" y1="0" x2="0" y2="-10"/>
<line x1="20" y1="0" x2="0" y2="-10"/>
<line x1="0" y1="-10" x2="0" y2="-45"/>

<!-- Animation controls -->
<animateMotion path="M0,300 S150,100 200,200 S400,400 500,0"
dur="8s" repeatCount="indefinite"
rotate="auto" />
</g>
</svg>

　　因为这完全基于指令，所以一个不是艺术家的人（象本教程的作者）即使不能创造真正的艺术，也可以创建基本的图形和动画。

• 动态创建图形

　　SVG 基于文本的性质也允许轻松地“实时”创建图形，因为生成图形只不过是将正确的值输出到页面而已。例如，正象 Java servlet、ASP 页面或 CGI 脚本能从数据库输出数值一样，SVG 可以输出图表或图。下面的图像显示了一个既含有 HTML 表中的纯文本数据又含有 SVG 版本数据的 HTML 页面：



　　创建这个 SVG 的服务器端应用程序和创建 HTML 表的一样，而且使用相同数据（缩放 1000 倍以适应页面）：

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN"
"http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg width="500" height="300" xmlns="http://www.w3.org/2000/svg">

<!-- Box around the image -->
<rect x="0" y="25" width="450" height="120"
fill="none" stroke="blue" stroke-width="2" />

<!-- Headers -->
<text x="15" y="50">Home page</text>
<text x="15" y="75">Product info</text>
<text x="15" y="100">Contact us</text>
<text x="15" y="125">Technical support</text>

<!-- Chart elements -->
<g fill="yellow" stroke="red" stroke-width="3">
<rect x="150" y="40" height="15" width="273.993"/>
<rect x="150" y="65" height="15" width="99.932"/>
<rect x="150" y="90" height="15" width="3.228"/>
<rect x="150" y="115" height="15" width="25.242"/>
</g>

</svg>

　　这只是 SVG 能力的一个示例而已。SVG 使创建动态图像就象创建动态 HTML 一样简单。另外，因为 SVG 基于 XML，所以可以用可扩展样式表语言（XSL）变换轻松地创建它。

-----------------------------------------

基本形状

• 基本 SVG 文档

　　从本质上来说，SVG 文档是 XML 文档。这就是说 SVG 文档有某些基本属性：

*所以的标记都有开始标记和结束标记，否则必须注明为空标记。空标记用反斜杠结束，如<rect />。
*标记必须正确嵌套。 如果一个标记在另一个标记中开始，那么它也必须在那个标记中结束。例如，<g><text>Hello there!</text></g> 是正确的，但 <g><text>Hello there!</g></text> 不正确。
*文档必须只有一个根。正如一个 <html></html> 元素包含了一个 HTML 页面的所有内容一样，一个 <svg></svg> 元素也包含一个 SVG 文档的所有内容。
*文档应该以 XML 声明 <?xml version="1.0"?> 开始。
*文档应该包含一个 DOCTYPE 声明， 该声明指向一个允许元素的列表。SVG 1.0 文档的 DOCTYPE 声明是：

<?xml version="1.0"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN"
"http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">

<desc>All SVG documents should have a description</desc>

<defs>
<!-- Items can be defined for later use -->
</defs>

<g>
<circle cx="100" cy="100" r="75" fill="green"/>
</g>
</svg>

• 在HTML页面上包含SVG

　　SVG 文档本身就非常有用，但在目前（目前它仍处于开发阶段）将它们添加到 Web 页面会发挥它们最大的作用。将它们添加到 Web 页面也使得在浏览器中显示它们变得更容易；根据用户系统的文件名关联的设置情况，有些浏览器会拒绝打开一个 *.svg 文件，但显示作为 Web 页面一部分的 SVG 图像将不会有问题。

　　将 SVG 图像添加到 HTML 页面很简单：只要添加一个具有适当属性的 <object></object> 元素即可：

<html>
<head><title>SVG Demonstration</title></head>
<body>

<h2 style="text-align: center">SVG Demonstration</h2>

<p>A page may have other code besides the SVG image.</p>

<object type="image/svg+xml" data="MySVG.svg"
width="300" height="200">
<img src="NonSVG.gif" mce_src="NonSVG.gif" alt="SVG 图像的静态版本" />
</object>

<p>Using objects allows the browser to decide what to display.</p>

</body>
</html>

　　请特别注意 <object></object> 标记上的 height 和 width 属性。如果没有指定它们，有些浏览器将不会正确显示图像。此外，浏览器在执行某些计算（最特别的是用 viewBox 缩放）会考虑这些值，因此，如果没有正确地指定它们（如简单地用大的数值显示可能出现的任何东西），它们可能会干扰图像的正确显示。

• 基本 SVG 形状

　　SVG 定义了六种基本形状，这些基本形状和路径（在路径是什么？中讨论）一道，可以组合起来形成任何可能的图像。每个基本形状都带有指定其位置和大小的属性。它们的颜色和轮廓分别由 fill 和 stroke 属性确定。这些形状是：

圆（circle）：显示一个圆心在指定点、半径为指定长度的标准的圆。
椭圆（ellipse）：显示中心在指定点、长轴和短轴半径为指定长度的椭圆。
矩形（rect）：显示左上角在指定点并且高度和宽度为指定值的矩形（包括正方形）。也可以通过指定边角圆的 x 和 y 半径画成圆角矩形。
线（line）：显示两个坐标之间的连线。
折线（polyline）：显示顶点在指定点的一组线。
多边形（polygon）：类似于 polyline，但增加了从最末点到第一点的连线，从而创建了一个闭合形状。
下面的示例演示了这些形状：

<?xml version="1.0"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN"
"http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg width="400" height="200" xmlns="http://www.w3.org/2000/svg">

<desc>Basic shapes</desc>

<g>
<circle cx="50" cy="50" r="25" />
<ellipse cx="75" cy="125" rx="50" ry="25" />

<rect x="155" y="5" width="75" height="100"/>
<rect x="250" y="5" width="75" height="100" rx="30" ry="20" />

<line x1="0" y1="150" x2="400" y2="150"
stroke-width="2" stroke="blue"/>

<polyline points="50,175 150,175 150,125 250,200" />
<polygon points="350,75 379,175 355,175 355,200 345,200
345,175 321,175" />

<rect x="0" y="0" width="400" height="200"
fill="none" stroke="red" stroke-width="3" />
</g>
</svg>

• 添加文本

　　除了形状以外，SVG 图像还可以包含文本。SVG 给予设计人员和开发人员对文本的大量控制，可以获得很好的图形效果而不必借助失去真实纹理信息的图像（*.gif 或 *.jpg 图像甚至 Flash 电影常常这么做）。

　　SVG 的文本和字体能力在以添加文本开始的文本部分讨论，而现在重要的是要理解所有在传统 HTML 页面中通过级联样式表（Cascading Style Sheet）可以获得的效果，也都可以在 SVG 图像内的文本元素中得到。例如：

<?xml version="1.0"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN"
"http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg width="400" height="125" xmlns="http://www.w3.org/2000/svg">

<desc>Basic text</desc>

<g>
<rect x="0" y="0" width="400" height="125" fill="none"
stroke="blue" stroke-width="3"/>

<text x="10" y="50" font-size="30">Welcome to the world of</text>
<text x="10" y="100" font-size="40"
font-family="Monotype Corsiva"
fill="yellow" stroke="red">Scalable Vector Graphics!</text>
</g>
</svg>

• 渲染顺序

　　当组合多种不同元素时，正象 SVG 图像一样，重要的是牢记各项在页面上的放置顺序，因为这关系到谁“在上面”出现。在一个 HTML 页面上，使用 z-index 属性来控制这一分层效果，而对于 SVG 图像，则严格按顺序放置各项。每个后继层放置在那些已放置层的上面。

　　如果指定一个元素没有填充色（使用 fill="none"），那么在它下面的各项会显现出来，就象您在这里看到的：

<?xml version="1.0"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN"
"http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg width="400" height="200" xmlns="http://www.w3.org/2000/svg">

<desc>Overlapping shapes</desc>

<g>
<ellipse cx="125" cy="50" rx="50" ry="25"
fill="none" stroke="black" />
<circle cx="125" cy="50" r="25" fill="dodgerblue" />
<circle cx="125" cy="50" r="10" fill="black" />

<ellipse cx="250" cy="50" rx="50" ry="25"
fill="none" stroke="black" />
<circle cx="250" cy="50" r="25" fill="dodgerblue" />
<circle cx="250" cy="50" r="10" fill="black" />

<polygon points="65,50 185,50 185,75, 150,100
100,100 65,75"
fill="none" stroke="purple" stroke-width="4"/>
<polygon points="190,50 310,50 310,75, 275,100
225,100 190,75"
fill="none" stroke="purple" stroke-width="4"/>

<line x1="65" y1="50" x2="310" y2="50"
stroke="plum" stroke-width="2"/>

</g>
</svg>

　　请注意每个元素会覆盖在它之前出现的元素。

------------------------------------------