基于XML的可升级矢量图像(SVG)浅析

基于XML的可升级矢量图像(SVG)浅析吴高峰上海大学计算机系2001年8月SVG是基于XML的专门为网络而设计的图像格式。本文给出了SVG的几个简单例子，并与其它矢量图形格式VML、PDF、SWF进行比较，展示了SVG的优点和美好前景。什么是SVGSVG(ScableVectorGraphics，可升级矢量图像)是一种基于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都有哪些优点1.基于XML标准XML是公认的下一代网络标记语言，拥有无穷的生命力。SVG在最开始设计的时候就基于XML，这使得它具有一种先天的优势，并且同HTML、CSS、DOM、XSL、JavaScript、CGI一样，成为新的标准。2.高质量的图像由于基于矢量，使得SVG图像的质量得到大大的提高。放大、缩小以及各种特效都比位图的表现要好，在打印的时候，完全可以以印刷质量输出图片。SVG图像在客户端动态绘制，用户可以随意调整图像的一些参数而不会导致图像模糊。SVG图像的大小只与图形的复杂程度有关，而与图形的具体尺寸无关。3.灵活易用的文件格式SVG主要由３个部分组成：矢量图形、位图和文字。由于SVG文件是以文本的形式（XML）存放的，更改起来是非常方便的。也就是说，可以不用任何图像处理工具，仅仅用记事本就可以生成一个SVG图像！在页面运行的过程中，我们也可以对很多部分做修改。而其中的图形描述又可以被任何人重复的使用。4.支持交互和动画SVG支持SMIL（synchronizedmultimediaintegrationlanguage），使得用户可以自由的同SVG中的元素完成一些交互的动作，从而完成既定的目标，这一点在目前单独依靠图片是完成不了的，需要由网页中的Script语句来实现。5.支持字符查找查找图片中的字符，在SVG中成为可能。而这在其它格式的图片文件中则是不可思议的？！6.支持Xlink和Xpointer这意味着我们可以在SVG文档之间制作超链接，这使我们拥有一种能力，可以制作一个完全由SVG构成的WEB站点！这个站点可以包含图片、文本以及拥有与用户进行交互的能力。AndrewWatt就制作了世界上第一个这样的全SVG站点().当然你首先得要安装一个SVG的阅读器，推荐使用Adobe公司的AdobeSVGViewer2.0,但它只能用在MSWindows和MacOS上。使用一个合适的Java虚拟，Apache的Batikviewer可以运行在任何平台上。看到这么多优点，是不是觉得不可思议？好，下面我们从几个小例子着手，揭开SVG的神秘面纱。SVG的几个简单例子任何人可以利用一个记事本来创建和编辑SVG图像，但有时这样做会很复杂。现在有越来越多的工具开始支持SVG编码，可以减轻我们的工作。比如：从AdobeIllustrator9.0和CorelDraw9开始就可以制作极度复杂的SVG图形。虽然SVG的语法和格式仍是XML规范的一部分，但SVG有其自己的一些基本概念、SVG的渲染模型、SVG数据类型与坐标系设置等，详细内容请参照参考资料。一个最简单的例子：例1一个SVG的基本图形例子?xmlversion=1.0encoding=iso-8859-1?!DOCTYPEsvgPUBLIC-//W3C//DTDSVG20000303Stylable//EN:space=preservewidth=5.5inheight=5inrectstyle=fill:#ff13e2;width=250height=100/textstyle=fill:blue;y=15HelloWorld!/textpathd=M5050L25030L20090z//svgSVG文档(通常以后缀.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超级链接的例子......axlink:href==M5050L25030L20090z//a......当鼠标指针移到黑三角上时就变成了手的形状，状态栏上也显示了此链接所指向的URL。例2只是一种常见的情况，实际上SVG中超级链接标志符的定义格式有3种：1.通过SVG元素的id属性对元素进行链接与标识。如somfile.svg#someplace。2.使用与XML兼容的xpointer。如somefile.svg#xpointer(id(someplace))。3.使用SVG的viewBox说明。SVG作为一种适用于网络的图像格式，不仅仅在于它的体积小、易修改、可缩放等与普通矢量图形一样的优点，还在于它添加有针对网络的交互功能。SVG图像可以内嵌交互定义。单独的一个SVG文件和一个客户端的SVG解释器便可以完成网页中链接、动画、交互等大部分功能。与Flash的SWF格式基于帧的二进制数据流不同，SVG是完全基于ASCII字符的文本。例3是一个交互的例子。例3SVG利用script元素进行交互的例子?xmlversion=1.0standalone=no?!DOCTYPEsvgPUBLIC-//W3C//DTDSVG20000303Stylable//EN=6cmheight=5cmviewBox=00600500script![CDATA[functionrect_mousemove(evt){varrect01=evt.target;varcurrentwidth=rect01.getAttribute(width);varcurrentheight=rect01.getAttribute(height);rect01.setAttribute(width,currentwidth*2);rect01.setAttribute(height,currentheight*2);}functionrect_mouseout(evt){//.....}]]/scriptrectx=100y=100height=100width=200onmouseover=rect_mousemove(evt)onmouseout=rect_mouseout(evt)//svgscript元素中定义了两个函数来分别响应鼠标的两个事件。关于SVG中脚本的语句，读者可以参考有关JavaScript的书籍。SVG不但能够实现交互，而且能够实现动画。动画与交互在某些方面是相通的，比如都可以利用脚本语句来执行一些动态效果，都能实现可视化元素的增、删、改等功能。只是交互一般由事件来触发，而动画可以我行我素，不需要外界干涉。SVG中的动画只说明某个属性或样式的值在动画过程中的起止时刻、变化速度等关键参数，动画的中间效果完全靠SVG客户端解释程序来渲染完成，因此其生成的动画文件有着比SWF格式的文件更加短小精悍的优点。关于动画，本文就不举详细的例子了，有兴趣的读者可参见参考文献6。SVG、VML、FLASH、PDF之间的比较过去在XML矢量图形的发展上，有两派人马互相较劲。一派以Adobe为首，提倡PGML，另一派由微软、MacroMedia为代表，鼓吹VML(IE5以上支持VML)，在这两套提案呈递给W3C后，W3C融合各家之长，促成了SVG的诞生。SVG建立于纯文字格式的XML之上，直接继承了XML的特性，简化异质系统间的信息交流，方便数据库的存取。SVG可以直接融入XML和XHTML网页中，可以直接利用浏览器已有的技术，如CSS、DOM、Javascript，达到动画及DHTML般的动态效果，支持单向和多向链接等等。更重要的是SVG是W3C制定的网络标准，不受单一的公司控制。MacroMediaFlash的SWF格式提供矢量和动画功能，但Flash必须要依靠浏览器外挂程序(插件:Plug-ins)，而且因为Flash的格式是二进制的，Flash中的文字内容无法让使用者在浏览器中做字符串搜索，这样的网页也无法让搜索引擎索引来供用户做全文检索。此外，高互动性的多媒体动画，往往需要编程来实现，在这一点上Flash也有先天的不足，Flash和JavaScript之间的互动，只能通过比较狭窄的FSCommand来做桥梁。当然，尽管Flash有上述这些缺陷，但时至今日，它仍是网上矢量动画最好的解决方案。PDF(PortableDocumentFormat，便携文件格式)是由Adobe公司开发而成的一种电子文档格式。它可以将文字、字型、格式、颜色、图形图像、超文本链接、声音、动态图像等信息封装在一个文件当中。