基于XML的可升级矢量图像(SVG)浅析级别: 初级 吴高峰 (wugfeng@263.net)上海大学计算机系 2001 年 8 月 01 日 SVG是基于XML的专门为网络而设计的图像格式。本文给出了SVG的几个简单例子,并与其它矢量图形格式VML、PDF、SWF进行比较,展示了 SVG的优点和美好前景。 SVG(Scable Vector Graphics,可升级矢量图像)是一种基于XML的开放的矢量图形描述语言。SVG图像是与XML1.0兼容的文档,SVG元素是指示如何绘制图像的 一些指令,阅读器(Viewer)解释这些指令,把SVG图像在指定设备上显示出来。使用SVG可以在网页上显示出各种各样的高质量的矢量图形,支持很多 您想象得出的功能:几何图形、动画、渐变色、滤镜效果等。最关键的是,它是完全用普通文本来描述的!也就是说,这是一种专门为网络而设计的基于文本的图像 格式。 1999年2月,SVG草案出台,经过不断地修改更新,最终形成了第一份实验性的实现规范。2001年7月,W3C 正式发布了SVG图像格式建议书,这就是SVG1.0规范。目前,该规范是被提议的推荐标准,到8月底将成为W3C的正式推荐标准。W3C对SVG的解释 是:SVG是一种使用XML来描述二维图像的语言。它允许3种形式的图像对象存在,分别是矢量图形、点阵图像和文本。各种图像对象能够组合、变换,并且能 修改其样式,也能够定义成预处理对象。文本是XML名字空间中的有效字符,这些字符能被作为SVG图像的关键字而存留在搜索引擎中。SVG的功能包括嵌套 变换、路径剪裁、透明度处理、滤镜效果以及其他扩展,同时,SVG支持动画和交互,也支持完整的XML的DOM接口。任何一种SVG图像元素都能使用脚本 来处理类似于鼠标单击、双击以及键盘输入等事件。因为同Web标准兼容的缘故,SVG还能够在同一个Web页面里凭着继承自XML的名字空间等特性来完成 一系列交互操作。
看到这么多优点,是不是觉得不可思议?好,下面我们从几个小例子着手,揭开SVG的神秘面纱。
任何人可以利用一个记事本来创建和编辑SVG图像,但有时这样做会很复杂。现在有越来越多的工具开始支持SVG编码,可以减轻我们的工作。比如:从 Adobe Illustrator 9.0和CorelDraw9开始就可以制作极度复杂的SVG图形。虽然SVG的语法和格式仍是XML规范的一部分,但SVG有其自己的一些基本概念、 SVG的渲染模型、SVG数据类型与坐标系设置等,详细内容请参照 参考资料。 一个最简单的例子: 例1 一个SVG的基本图形例子
SVG文档(通常以后缀.svg存放)总是以根元素 开始。和标记内是SVG的图像描述语句。我们可以定义一个视口坐标系和用户坐标系,缺省的情况下两者是一致的,度量单位也相同,如果属性值没有带单位,则 使用用户坐标系的长度单位-像素(px)。大多数情况下,用户坐标系的原点处在视口的左上角,X轴的正向朝右,Y轴的正向朝下,即如果不进行坐标变换,一 切渲染都是以初始坐标系为准。例1中的SVG首先画了一个矩形,然后写了一段文字,接着利用路径元素画了一个三角形,最后显示效果如图1所示: 图1 在浏览器中显示例1的结果 ![]() SVG 提供了一种通用的路径式元素(path),可以用来创建庞大复杂的图像对象,像电子设计、流程图、统计绘画等领域有大量固定的符号,SVG不可能全部囊 括。SVG规范允许用户定义自己的符号,可以将自定义的符号创建、重用、发布而不需要其他额外的手段,更不需要一个什么委员会来批准注册,这种自由灵活的 风格更加扩展了SVG的功能。 SVG提供的另一个很重要的功能是超级链接。在HTML网页中,图像和链接是分离的,图像作 为外部文件而存在,链接则在HTML中说明,这样虽然有灵活和可重用的优点,却不易管理。而Flash的SWF矢量格式则相反,图像中内嵌链接,两者成为 一个整体,虽然方便,但却不能重用。SVG则综合了两者的优点,其超级链接以明文的形式内嵌于文档内部,在形式上是一个整体,而且也有利于修改。由于 SVG是基于XML的,象"xlink" 和 "xpointer"等都是XML特有的,所以SVG就自然而然获得了XML所定义的链接的好处和功能。 把例1稍做修改,对那个黑三角加上一个超级链接,如例2所示: 例2 超级链接的例子
当鼠标指针移到黑三角上时就变成了手的形状,状态栏上也显示了此链接所指向的URL。例2只是一种常见的情况,实际上SVG中超级链接标志符的定义格式有3种:
SVG 作为一种适用于网络的图像格式,不仅仅在于它的体积小、易修改、可缩放等与普通矢量图形一样的优点,还在于它添加有针对网络的交互功能。SVG图像可以内 嵌交互定义。单独的一个SVG文件和一个客户端的SVG解释器便可以完成网页中链接、动画、交互等大部分功能。与Flash的SWF格式基于"帧"的二进 制数据流不同,SVG是完全基于ASCII字符的文本。例3是一个交互的例子。 例3 SVG利用<script>元素进行交互的例子
<script>元素中定义了两个函数来分别响应鼠标的两个事件。关于SVG中脚本的语句,读者可以参考有关JavaScript的书籍。 SVG 不但能够实现交互,而且能够实现动画。动画与交互在某些方面是相通的,比如都可以利用脚本语句来执行一些动态效果,都能实现可视化元素的增、删、改等功 能。只是交互一般由事件来触发,而动画可以"我行我素",不需要外界干涉。SVG中的动画只说明某个属性或样式的值在动画过程中的起止时刻、变化速度等关 键参数,动画的中间效果完全靠SVG客户端解释程序来渲染完成,因此其生成的动画文件有着比SWF格式的文件更加短小精悍的优点。关于动画,本文就不举详 细的例子了,有兴趣的读者可参见参考文献6。
过去在XML矢量图形的发展上,有两派人马互相较劲。一派以Adobe为首,提倡PGML,另一派由微软、MacroMedia为代表,鼓吹VML(IE5以上支持VML),在这两套提案呈递给W3C后,W3C融合各家之长,促成了SVG的诞生。 SVG 建立于纯文字格式的XML之上,直接继承了XML的特性,简化异质系统间的信息交流,方便数据库的存取。SVG可以直接融入XML和XHTML网页中,可 以直接利用浏览器已有的技术,如CSS、DOM、Javascript,达到动画及DHTML般的动态效果,支持单向和多向链接等等。更重要的是SVG是 W3C制定的网络标准,不受单一的公司控制。 MacroMedia Flash 的SWF格式提供矢量和动画功能,但Flash必须要依靠浏览器外挂程序(插件:Plug-ins),而且因为Flash的格式是二进制的,Flash中 的文字内容无法让使用者在浏览器中做字符串搜索,这样的网页也无法让搜索引擎索引来供用户做全文检索。此外,高互动性的多媒体动画,往往需要编程来实现, 在这一点上Flash也有先天的不足,Flash和JavaScript之间的互动,只能通过比较狭窄的FSCommand来做桥梁。当然,尽管 Flash有上述这些缺陷,但时至今日,它仍是网上矢量动画最好的解决方案。 PDF(Portable Document Format,便携文件格式)是由Adobe公司开发而成的一种电子文档格式。它可以将文字、字型、格式、颜色、图形图像、超文本链接、声音、动态图像等 信息封装在一个文件当中。PDF从页面描述语言PS(PostScript)发展而来,具有与PS几乎相同的页面描述能力和相似的描述方法。但与PS不同 的是,PDF除了能描述复杂版面外,还具有交互功能(如超链接、交互表单等)、页面随机存取及字体仿真描述等特性。因此,PDF不仅适合印刷出版,而且也 适合电子出版。PDF文件特别适合打印以及在屏幕上阅览,具有加密功能以及能够跨平台创建和阅览,支持全文检索。但是,由于PDF不是基于XML格式的, 因此也就丧失了XML所能带来的所有好处和优点,例如我们可以仅用一个记事本就可以创建或修改一个SVG文档,而制作一个PDF文档呢,主要途径不外乎有 3个:用专门的PDF制作工具软件进行制作;将包含有Postscript页面描述语言的文件转换成PDF文档;利用转换工具把其他格式文件(如DOC、 HTML等)转换成PDF文档。相比之下,优劣立现。另外PDF不能制作动画,所以PDF的流行范围也仅限于电子文档的发布。
统 一的标准和开放性是SVG的强大生命力所在。我们可以想象SVG流行起来以后的景象:由于XML的Parser是可以免费得到的,而且标准也是公开的,所 以除了将SVG应用在网页上或作为独立应用程序执行外,它应该可以跑在任何标准设备上。会有那么一天,你在出差前在Illustrator里面制作一张图 片,然后作为附件发送给公司的同事。公司的同事在收到以后,如果需要在图片的文字上作一些改动,她就会直接用写字板程序打开你的图片文件,改正需要改动的 文字,再保存起来。由于你已经到达外地,而又不能马上接入互联网,所以你的同事会直接把图片发送到你的手提电话上。你的支持SVG的手提电话会直接在屏幕 上显示你想要看到的图片,这时你发现你画的圆的比例不太正确,不过没有问题,你并不需要一个大型的制图软件,你需要的只是手提电话里面内置的一个文本编辑 器就能够完成修改了。 相信我,有一天(这一天可能不远的,因为今天我们已经有了SVG,我们还会不断的有新的标准),你可能会煞有介事的从手提电话向你的冰箱传送图片,仅仅是为了更改你已经看的不耐烦了的液晶操作面板。 由于SVG使用XML语法,我们可以使用XSLT从XML数据中生成SVG。我们还可以很容易地对以XML格式存放的数据制作一个图形表示。例如,对于一个包含玩具生产商所占市场份额的XML文档,我们可以用SVG创建一个饼图来方便比较! 记住,这一切的前提就是:公开的,标准化的,跨平台的时代的到来。
|
基于XML的可升级矢量图像(SVG)浅析
最新推荐文章于 2024-07-12 03:56:40 发布