SVG参考文档.docVIP

我应该学习这个教程吗？ 第 1 页（共3 页） 本教程辅助开发人员理解可伸缩向量图形（SVG）背后的概念以将它们作为静态文档或动态生成的内容创建。 XML 经验不是必需的，但熟悉至少一种标记语言（如 HTML）是有用的。有关基本的 XML 信息，请参阅教程 Introduction to XML 。在本教程的结束部分的单个脚本编制示例中用到了 JavaScript，不过相当简单。 本教程的内容 第 2 页（共3 页） 可伸缩向量图形（SVG）使得用文本指定出现在页面上的图像成为可能。例如，传统图形需要指定矩形的每一个像素，而 SVG 只要说明矩形存在，并指出它的大小、位置和其它属性即可。 它的好处有很多，包括轻松地从数据库信息生成图形（如图或图表）的能力，以及向图形添加动画和交互性的能力。 本教程演示了构建 SVG 文档必需的概念，如基本形状、路径、文本和绘制模型，还有动画和脚本编制。 关于作者 第 3 页（共3 页） 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@ 与他联系。 向量图形与光栅图形的比较 第 1 页（共5 页） 在万维网历史的大部分时间里，浏览器显示的图形都是光栅格式的。在光栅图像（如 GIF 或 JPEG 图像）中，文件包含图像中每个像素的颜色值。浏览器读取这些值并做出相应行动。它仅认识到单独的部分，而没有整体概念。 总的说来，这一系统有其优势，例如忠实再现摄影图像的能力，但它在某些情形下显得不足。例如，尽管浏览器能以不同大小显示一个图像，通常会产生锯齿边缘，在这些地方，浏览器不得不为那些在原始图像中不存在的像素插入或猜测数值。此外，光栅文件格式的二进制性质使得难以（尽管不是不可能）基于数据库信息动态地创建图像，并且动画最多也仅限于“翻动书本”类型的动画，即快速连续地显示单独图像。 向量图形，通过指定为确定每个像素的值所需的指令而不是指定这些值本身，克服了这些困难中的一部分。例如，向量图形不再为一个直径一英寸的圆提供像素值，而是告诉浏览器创建一个直径一英寸的圆，然后让浏览器（或插件）做其余事情。 这消除了光栅图形的许多限制；使用向量图形，浏览器只要知道它必须画一个圆。如果图像需要以正常大小的三倍来显示，那么浏览器只要按正确的大小画圆而不必执行光栅图像通常的插入法。类似地，浏览器接收的指令可以更容易地与外部信息源（如应用程序和数据库）绑定，要对图像制作动画，浏览器只要接收有关如何操纵属性（如半径或颜色）的指令即可。 Web 上的向量图像 第 2 页（共5 页） Web 上的第一个向量图像可能是虚拟现实标记语言（VRML）图像。VRML 寻求将 HTML 的简易性带到图像创建中来，然而尽管有一些示例给人以深刻的印象，但它的本来目的是为了 3D 造型，而且它太过复杂以至于从未真正流行起来。 接着是 Macromedia Flash 的介入。Flash 电影是用 Macromedia 的 Flash 应用程序所创建，它允许创建相当复杂的动画，并且将动画与声音和交互性绑定在一起。因为 Flash 文件主要包含有关如何创建图像的指令，所以它们比传统的 Web 电影小得多（例如 QuickTime 电影）— 而且它们可以缩放。 但是，Flash 文件仍然是二进制文件，这使得动态创建它们比较困难（尽管不是不可能）。而且对从浏览器可以进行的脚本编制有所限制。 使用文本定义图像 第 3 页（共5 页） 可伸缩向量图形通过使用 XML 定义图像、动画和交互性解决了这些问题中的许多问题。浏览器读取（或者更准确地说，浏览器的插件读取）这些基于文本的指令，然后执行这些指令。例如，一个简单的 SVG 矩形图像可能看起来如下： ?xml version=1.0 standalone=no ? !DOCTYPE svg PUBLIC -//W3C//DTD SVG 1.0//EN /TR/2001/REC-SVGDTD/svg10.dtdsvg width=300 height=100 xmlns=/2000/svg rect x=25 y