IBM:SVG(可伸缩向量图形)基础教程
简介
•我应该学习这个教程吗？
本教程辅助开发人员理解可伸缩向量图形（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）。他喜欢倾听读者的意见，可以通过 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"
"/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg width="300" height="100" xmlns="/2000/svg">
<rect x="25" y="10" width="280" height="50"
fill="red" stroke="blue" stroke-width="3"/>
</svg>
svg矢量图导入ppt这个文档指示浏览器创建一个矩形，并提供属性信息，如位置（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"
"/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg width="500" height="300" xmlns="/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 页面：

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。