SVG中国

来源：SVG中国(ChinaSVG.COM)

　　Mobile SVG是针对手机、PDA、SmartPhone等移动设备所开发的移动矢量图形规范。移动设备的计算能力和内存容量是有限的,Mobile SVG的出现可最小化绘制时间及获得最大化浏览效果。

摘要

　　Mobile SVG是由W3C组织的SVG工作组专门针对PDA,SmartPhone这类移动设备基于XML技术规范所开发的一种开放标准的移动矢量图形技术规范。典型移动设备的计算能力和内存容量是有限的,创建了Mobile SVG文档时最小化绘制时间所采用的方法,设计并实现了一个模块化和有一定移植性的Mobile SVG浏览器。

引言

　　可升级矢量图形(scalable vector graphics,SVG)是由W3C组织提出的一项用于Web上的开放性矢量图形标准。SVG是一种面向网络应用,基于XML技术规范,用来描述二维矢量图形和矢量/点阵混合图形的标记语言。在SVG的技术规范中,它描述了3种类型的图形对象:矢量图形、图像、文本。SVG的技术特点如下。
　　(1)无极缩放。由于SVG是矢量图形格式的,用户可以任意放大或缩小图形显示,在任何分辨率的显示设备上显示其图像质量都不会受到影响。
　　(2)节省空间。由于SVG是纯文本格式的,因此具有很高的压缩比率,同时SVG标准本身支持SVGZ压缩格式。采用SVGZ压缩格式,可减少文件的下载时间和增加文件传输的数据量。相同的文件内容,采用SVGZ格式的文件大小比传统光栅图形格式小30%～50%,因此可节省更多的磁盘空间和内存空间,同时在网络上传输时上、下载速度更快。
　　(3)编辑方便。SVG基于XML,采用文本方式描述图像格式。图像对象的编辑和修改可采用任何文本编辑工具来完成,而不需单独的图像处理工具。
　　Mobile SVG是由SVG工作组专门针对PDA、SmartPhone这类移动设备所定制的一种移动版)。SVG Basic是专门针对个人数字助理PDA所开发的SVG版本,SVG Tiny是针对蜂窝移动电话所开发的非常简单的SVG版本。SVG Basic是SVG 1.1规范的子集,SVG Tiny是SVG Basic规范的子集。因此,SVG 1.1和SVG Basic浏览器能显示SVG Tiny文件内容,SVG 1.1浏览器能显示SVG Basic文件内容。
　　Mobile SVG是图形、图像和文字的有机统一。根据功能不同,Mobile SVG的主要对象可以分为基本要素对象和页面描述功能对象两大类。

1 创建Mobile SVG文档

　　创建显示在移动设备上的SVG文档时应该考虑移动设备有限的计算能力和内存容量。主要介绍了能使SVG文档正确显示并最小化绘制时间的一些方法。

1.1 使用required Features属性

　　当在文档中使用required Features属性和switch元素时,可以使文档在移动设备上绘制时只显示较简单的图形效果。例如

<switch>
<circle requiredFeatures="http://www.w3.org/TR/SVG11/feature#BasicFilter"
cx="50" cy="50" r="40" fill="red" filter="url(#blur)"/>
<circle cx="50" cy="50" r="40" fill="pink"/>
</switch>

　　如果该文档在桌面计算机上具有BasicFilter功能的浏览器中显示的时候,滤镜效果被应用到圆形中以增强显示效果。在计算能力有限的移动设备上显示该文档时,该圆形以粉色加以填充而不添加滤镜效果以减少绘制时间。
　　Switch元素按序评估其孩子元素的requiredFeatures属性,并绘制第一个requiredFeatures属性为真的孩子节点,其他的节点都被忽略。

1.2 使用Server产生Mobile SVG文档

　　使用基于服务端的SVG应用程序侦测移动设备客户端是否发出请求数据的要求。这样能够减少无线网络中的传输时间和图形的绘制时间,产生出来的SVG数据应该适合与移动设备的显示。其中主要的工作包括移除不需要的元素和简化文档内容。在SVG规范的开发过程中,做出了相当多的努力使SVG文件尽可能的小。例如提出在服务端与客户端传输SVG文档时用gzip进行数据压缩。在服务端的压缩时间、在PDA客户端的解压时间以及压缩文件在网络传输的时间总和比原始文件传输所需的时间要少。
　　以下ASP代码显示如何侦测数据请求是来自于WinCE设备还是其他设备

Var userAgent=newString(Request.ServerVariables("HTT
P_USER_AGENT"));
if (userAgent.indexOf("WinCE")>=0){
//mobile WinCE device
}else{
//assume standard browser
}

1.3 减少绘制时间的其它方法

　　避免或尽量少的使用某些属性能够很大程度的减少绘制时间。
　　(1)避免使用笔画。笔画比简单的填充要消耗更多的时间,因此在非必要的情况下应尽量避免使用。耗时多的原因在于笔画模式首先计算笔画的轮廓,然后对该轮廓进行填充。多了一个计算笔画轮廓的耗时。特别是在绘制文本元素的时候,对应每个字的轮廓的笔画轮廓被计算,而有些字的轮廓相当复杂,这样耗时将更多。如表1所示圆形和文字的笔画耗时大约是填充耗时的2.5倍和6倍。

表1 填充和笔画绘制时间的比较(单位毫秒)

　　(2) 避免使用笔画属性的round值。如图1所示的linecap和linejoin操作,应避免使用round属性值。因为在笔画轮廓路径添加圆弧所涉及的计算非常复杂,而且会涉及到很多执行速度较慢的浮点数操作。如表2和表3所示,round属性的绘制时间是最长的。

表2 linecap和linejoin操作不同属性绘制时间的比较(单位毫秒)

　　(3)避免大量的字体。由于SVG是矢量图形并不使用位图字体,因此每个字的轮廓都相当于路径需要被定位和绘制。由于字轮廓的路径非常复杂,大量字体的绘制将会很慢。

2 Mobile SVG浏览器的设计与实现

2.1 系统结构

　　软件主要基于WinCE操作系统,其系统结构如图2所示。该软件能够构建成单独的浏览器或ActiveX控件。在图形显示方面它们既包括基本的用户接口功能又包括高级的SVG绘制屏幕缓冲,当SVG文档内容是基于动画的时候,它们能够控制动画的重绘,当ActiveX控件集成在Web浏览器一类的应用的时候,ActiveX模块包含用户能够与之互动的COM接口对象。
　　浏览器的2个主要设计原则是模块化与可移植性。软件要有足够灵活性以方便增加和删除功能,在转移到资源有限的其他移动设备或处理能力较强的桌面计算机应用环境时要易于移植。
　　CPU处理能力的主要影响来自于动画。系统支持静态和动态的SVG显示。通常软件的图形绘制来自于操作系统对图形的支持,移除这种依赖性将增强软件的可移植性,同时对于未来增加第3方图形库提供方便。如图2所示的基于WinCE平台的图形模块主要依靠操作系统提供的GDI(图形设备接口)和模块自己的绘制功能,较少依赖于系统函数的直接调用。

　　XML解析模块负责解析SVG文档和构建SVG DOM树。它使用factory类来创建SVG静态或动态元素。Utils模块包括以下几个有用的功能:基于64位的解码器,椭圆,圆弧,贝塞尔曲线路径计算,颜色解码器和真彩色字体读取。这些功能SVG和Graphics模块都有可能用到。

2.2 XML解析

　　SVG浏览器的第2个设计需求应该尽可能的设计成轻量级的。因此在文档解析方面应该实现轻量级的解析器,以读取纯文本的XML文档并且构建只包含元素、属性和文本节点的DOM树,而不要采用完整的DOM或SAX解析器。解析器被扩展以处理用户定义或标准实体的使用,例如CDATA部件,Unicode字符和UTF8/UTF16编码。

2.3 图形库

　　WinCE平台提供的窗口GDI(图形设备接口)支持相当快的图形绘制功能,但也有很多限制,例如不支持抗锯齿(antialiasin),alpha合成(alpha com positing)和转换。圆、矩形等图形能够被手动转换,但是笔画外形却不能被正确转换。缺乏抗锯齿,alpha合成功能是GDI最主要的缺陷,因为它们是实现高质量图形的基本要求。伴随着Pocket PC处理器能力的不断增强(400MHz ARM),在软件中实现以上功能是可能的。
　　已经有许多开源的图形库移植到WinCE,例如Libart和Zodius。这些库提供抗锯齿、alpha合成、转换功能等,但是并没有完全满足SVG的绘制需求,并且执行速度比Windows GDI调用慢。使用这些图形库没有软件许可方面的限制,但是需要适当修改以满足SVG绘制的需求,并消除出现的众多Bug.

2.4 ActiveX控件和DOM支持

　　Mobile SVG究竟应该如何使用?单独的浏览应用程序已经不能满足使用需求,基于组件的构建方法(对于Windows应用环境就是ActiveX控件)使开发者能够快速、有效地在他们的移动应用程序中添加对SVG的支持。控件还拥有被嵌入到IE浏览器HTML网页中的优点,这样JavaScripe等脚本语言还可以与之交互。
　　开发基于Windows桌面应用环境控件的技术已经比较成熟了,但是由于缺乏相应的技术文档,基于WinCE移动设备的控件开发相当困难。目前该控件只提供了最小的接口,它允许用户设置和获取当前SVG的URL,设置或刷新视图,设置缩放模式和面板模式。下面主要考虑与SVG文档的交互,将添加对DOM的最小接口,包括元素的创建,插入和删除,设置和获取属性值。

2.5 SVG特性的实现

　　目前SVG简单和常用的元素和属性已基本实现。包括基本的图形形状、路径,简单的填充模式和笔画模式。SVG Tiny和SVG Basic移动规范的推出将指导在WinCE平台哪些特性应该支持,哪些应该排除。

2.6 性能与效果

　　由于内存资源有限,WinCE平台实现SVG浏览器的执行性能非常重要。有限的处理能力和内存资源意味着性能瓶颈或内存泄露将很快显现出来。内存泄露比较容易排除,但是解决性能瓶颈会非常困难。表3显示了加载SVG文档是系统各部分的执行时间对比。

表3 系统各部分执行时间对比

　　最费时的部分是初始化绘制DOM树到显示缓冲区,因为在此阶段众多图形对象需要被计算和创建。这些对象会为以后的重绘调用而被缓存起来,这也是图形的缩放占用较少时间的原因。代码压缩意味着浮点数操作,内存的分配和释放是Pocket PC设备系统的主要瓶颈。
　　Pocket PC中的浮点数操作并不是由硬件加速实现的,因此执行速度比较慢。应尽量减少涉及到浮点数操作的函数例如sqrt(),cos(),sin()以提高性能。图3是Mobile SVG浏览器显示SVG地图文件的效果图。

3 结论

　　Mobile SVG技术是一种具有很大发展潜力的新兴技术,在未来的3G网络中会得到进一步的发展和应用。对SVG和Mobile SVG的技术规范进行了概述,介绍创建Mobile SVG文档时最小化绘制时间所采用的方法,然后设计并实现了一个模块化和有一定移植性的Mobile SVG浏览器。
　　未来还有以下几个方面需要作进一步的工作:
　　①在动画处理过程中占用CPU资源过大,占用内存多,效率相对低,需要在此模块提供更优的算法来减小代码尺寸,提高效率;②脚本功能支持不够,需进一步加强;③Mobile SVG技术规范中的某些功能还没有完全实现,需要进一步的补充。

参考文献

　　[1]　W3C.Scalable Vector Graphics SVG1.1 Specification[EB/OL].(20030217)[20051223].http://www.w3.org/TR/SVG11/,2003.
　　[2]　W3C.Mobile SVG Profiles[EB/OL].(20030217)[20051223].http://www.w3.org/TR/SVGMobile/index.html.
　　[3]　WU Binzhuo,XIA Bin.Mobile phone GIS based on mobile SVG[EB/OL].(20030229)[20051223].http://ieeexplore.ieee.org/xpl/
tocresult.jsp?isnumber=32596&isYear=2005&count=210&page=2&ResultStart=50.
　　[4]　TRIPPLEB,BINDER Kate.SVG设计在下一代Web站点中使用可缩放矢量图形[M].高伟,英宇,译.北京:机械工业出版社,2003.
　　[5]　谢智颖,李清泉,左小清,等.基于SVG的开放式LBS系统设计与实现[J].武汉大学学报(信息科学版),2003,28(1):7478.
　　[6]　刘啸,毕永年.基于XML的SVG应用指南[M].北京:北京科海集团公司,2001.
　　[7]　BIRBECTM.XML高级编程[M].高伟,徐继伟,译.北京:机械工业出版社,2002.
　　[8]　杜文才,韩勇.SVG技术规范及无线网络应用[C]//第六届全国计算机应用联合学术议论文集.北京:中国通信学会主编出版,2002.
　　[9]　WALDéN M.Towards the Integration of Vector Map Graphics in Mobile Environments[EB/OL].(20031114)[20051223].http://serg.telecom.lth.se/education/master_theses/thesis.php?main!filter!MasterTheses:ID=44.

关于作者

　　邱志云,张林,邹永贵
　　重庆邮电大学GIS研究所,重庆,400065
　　邱志云(1980~),男,湖北人,硕士研究生,主要研究方向为LBS应用,空间移动定位,空间移动信息移动服务,空间信息集成应用,E-mail: 这个 E-mail 地址已经被防止灌水恶意程序保护，您需要激活 Java Script 才能观看

(THE END)