文中将SVG图形显示技术和Web页面动态刷新技术相结合,实现了Web复杂图形的实时更新。Web页面动态刷新是指当服务器端数据发生变化或者事件发生时,可以将信息或数据通知客户端,实现客户端Web页面现实内容的改变。
前言
随着Internet应用的日益深入,各种各样的Web应用对图形及其动态更新提出了越来越多的要求。而SVG作为一种矢量图形标准,以其丰富的图形显示能力,为Web页面提供了复杂图形显示的支持。页面动态刷新与其相结合为Web应用提供了一种新的实现架构,可以应用到许多领域,如实时监控系统或者界面较为复杂的应用系统。这样不仅可以实现大量复杂的图形的显示(如仪表、设备、报表等),同时又可使这些图形可以随着后台数据库的变更或者仪表设备运行状态的改变而实时反映出来。
1 SVG
1. 1 概述
SVG(Scalable Vector Graphics,可升级矢量图形)是由W3C在2000年8月制定的一种新的矢量图形格式,与传统的图像格式不同的是:SVG是采用XML(扩展标记语言)来描述二维矢量图形的语言,这使得SVG图像文件可以像HTML网页一样有着很好的可读性。同时由于SVG基于XML,所以可扩展性很强,并能够描述任意复杂的图形。SVG支持3种类型的图形元素:矢量绘图形状、图像和文字。
1.2 SVG的特点
(1) 基于XML标准。
XML是公认的下一代网络标记语言,拥有无穷的生命力。SVG在最开始设计的时候就基于XML,这使得它具有一种先天的优势,并且同HTML,CSS,DOM,XSL,ECMAScript,CGI一样,成为新的标准。
(2)矢量图形和高质量的图像。
由于基于矢量,使得SVG图像的质量得到大大的提高。放大、缩小以及各种特效都比位图的表现要好,在打印的时候,完全可以以印刷质量输出图片。SVG图像在客户端动态绘制,用户可以随意调整图像的一些参数而不会导致图像模糊。SVG图像的大小只与图形的复杂程度有关,而与图形的具体尺寸无关。
(3)由文本构成的图像。
(4)灵活易用的文件格式。
SVG主要由3个部分组成:矢量图形、位图和文字。由于SVG文件是以文本的形式(XML)存放的,因此更改起来非常方便。也就是说,可以不用任何图像处理工具,仅仅用记事本就可以生成一个SVG图像!在页面运行的过程中,也可以对很多部分做修改。而其中的图形描述又可以被任何人重复使用。
(5)支持交互性。
SVG支持SMIL(Synchronized Multimedia IntegrationLanguage),使用户可以自由地同SVG中的元素完成一些交互动作,从而完成既定的目标,这一点在目前单独依靠图片是完成不了的,需要由网页中的Script语句来实现。
(6)支持字符查找。
(7)内嵌字型数据。
SVG采用了内嵌图像中所出现的文字字型数据的方法来解决动态字体问题,用户不需要下载。
(8)支持Xlink和Xpointer。
这意味着可以在SVG文档之间制作超链接,这使人们拥有一种能力,可以制作一个完全由SVG构成的Web站点。这个站点可以包含图片、文本以及拥有与用户进行交互的能力。
(9)更好的扩展性。
作为未来的图形,真正使SVG不同于其它的Web格式的是SVG在一开始设计的时候就是完全遵从XML———下一代万维网的标记语言。SVG是纯粹的XML,但是它同样保证将无缝整合现有的标准,比如:HTML,CSS,DOM(文档对象模块),XSL,JavaScript和CGI等等。另外,因为SVG遵从DOM,其脚本将类似于DHTML。给一个脚本同时应用HTML和SVG,交互和动态效果可能在HTML和SVG上使用同一套脚本,这样Web设计师和开发者打算在设计中融入SVG,将不必花费精力学习新的软件或者放弃现有的工具和技术了。
(10)独立性。
因为SVG包含一个DOM,SVG图像可以改变它们自身的填充、边框、尺寸等等,或者它们也能够对包含HTML的Web页面上的其它部分产生影响。DOM协议允许开发者使用Name属性来控制每个标签对象。这意味着所有的子对象会继承父对象的所有属性。本质上说来,SVG把图像进行实时变化的权利放在了那些掌握了JavaScript的Web开发者的手中。因为SVG是基于XML的,所以SVG图像可对用户的动作进行实时响应,所以外观、数据可以根据高亮显示的文本、鼠标移动、时间和点击数等事件反应-反作用于不同的用户。
(11)开放性。
因为SVG是一种开放格式,它可以实现和CSS,JavaScript,CGI,以及其它的一些基于Web的通用的技术的无缝整合。此外,SVG是基于Unicode编码的,就像一个标准的HTML文档中的文本一样,这意味着它可以轻易地被搜索引擎搜索到。
2 Web页面动态刷新技术
对页面数据动态刷新做了探索性的研究之后,发现有很多技术可以实现页面数据的动态刷新,但不外乎两种方式(基于Java平台):客户端由单纯的HTML和JSP页面构成,通过DHTML特性、JavaScript等技术来达到动态刷新页面，这方面的方法可以阅读"AJAX和SVG结合实现实时监控图表"一文来了解;另外一种方式则是在客户端页面上内嵌一个Applet,由这个Applet通过socket,http tunnel,JMS,RMI,CORBA等技术和服务端保持持久通讯,并由Applet和页面交互来达到页面数据的动态刷新，“客户端与服务器端的SVG“一文正是利用客户端技术解决动态刷新。
