可伸缩向量图形介绍

《可伸缩向量图形介绍》由会员上传分享，免费在线阅读，更多相关内容在行业资料-天天文库。

1、第1页（共我应该学习这个教程吗？3页）本教程辅助开发人员理解可伸缩向量图形（SVG）背后的概念以将它们作为静态文档或动态生成的内容创建。XML经验不是必需的，但熟悉至少一种标记语言（如HTML）是有用的。有关基本的XML信息，请参阅教程IntroductiontoXML。在本教程的结束部分的单个脚本编制示例中用到了JavaScript，不过相当简单。第2页（共本教程的内容3页）可伸缩向量图形（SVG）使得用文本指定出现在页面上的图像成为可能。例如，传统图形需要指定矩形的每一个像素，而SVG只要说

2、明矩形存在，并指出它的大小、位置和其它属性即可。它的好处有很多，包括轻松地从数据库信息生成图形（如图或图表）的能力，以及向图形添加动画和交互性的能力。本教程演示了构建SVG文档必需的概念，如基本形状、路径、文本和绘制模型，还有动画和脚本编制。第3页（共关于作者3页）NicholasChase曾参与了LucentTechnologies、SunMicrosystems、Oracle和TampaBayBuccaneers等公司的网站开发。Nick曾经当过高中物理教师、低级放射性废物设施经理、在线科幻

3、杂志编辑、多媒体工程师以及Oracle讲师。最近，他担任过位于美国佛罗里达州Clearwater的SiteDynamicsInteractiveCommunications的首席技术官，他还写了三本有关Web开发的书，包括JavaandXMLFromScratch（Que）。他喜欢倾听读者的意见，可以通过nicholas@nicholaschase.com与他联系。第1页（共向量图形与光栅图形的比较5页）在万维网历史的大部分时间里，浏览器显示的图形都是光栅格式的。在光栅图像（如GIF或JPEG图

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

5、确定每个像素的值所需的指令而不是指定这些值本身，克服了这些困难中的一部分。例如，向量图形不再为一个直径一英寸的圆提供像素值，而是告诉浏览器创建一个直径一英寸的圆，然后让浏览器（或插件）做其余事情。这消除了光栅图形的许多限制；使用向量图形，浏览器只要知道它必须画一个圆。如果图像需要以正常大小的三倍来显示，那么浏览器只要按正确的大小画圆而不必执行光栅图像通常的插入法。类似地，浏览器接收的指令可以更容易地与外部信息源（如应用程序和数据库）绑定，要对图像制作动画，浏览器只要接收有关如何操纵属性（如半径或

6、颜色）的指令即可。第2页（共Web上的向量图像5页）Web上的第一个向量图像可能是虚拟现实标记语言（VRML）图像。VRML寻求将HTML的简易性带到图像创建中来，然而尽管有一些示例给人以深刻的印象，但它的本来目的是为了3D造型，而且它太过复杂以至于从未真正流行起来。接着是MacromediaFlash的介入。Flash电影是用Macromedia的Flash应用程序所创建，它允许创建相当复杂的动画，并且将动画与声音和交互性绑定在一起。因为Flash文件主要包含有关如何创建图像的指令，所以它们比

7、传统的Web电影小得多（例如QuickTime电影）—而且它们可以缩放。但是，Flash文件仍然是二进制文件，这使得动态创建它们比较困难（尽管不是不可能）。而且对从浏览器可以进行的脚本编制有所限制。第3页（共使用文本定义图像5页）可伸缩向量图形通过使用XML定义图像、动画和交互性解决了这些问题中的许多问题。浏览器读取（或者更准确地说，浏览器的插件读取）这些基于文本的指令，然后执行这些指令。例如，一个简单的SVG矩形图像可能看起来如下：

8、o"?>