SVG及基于XML+XSL的动态生成

SVG及基于XML+XSL的动态生成　　介绍了一种新的网络图形格式SVG及其优点。根据SVG的特点,研究了利用XML和XSL动态生成SVG图形的技术,为动态生成WEB图像提供了一种参考模型。

1 引言

　　以Web的形式实现高质量的图表一直是目前急需解决的难点问题。大多数此类编程技术都是在服务器端进行,首先在内存中产生图表的图像,然后转换为位图再传送给浏览器显示,大多采用位图方式或Java Applet的方式。位图方式无论在文件大小和文件内容上都是固定的,难以实现动态内容的更新。相较之下,Java Applet是一个较好的解决方案,但其在速度、可重用性方面也存在缺点。当SVG格式的倡议书公布之后,引起了业界的强烈反响。使用SVG,可以在WEB上显示各种各样高质量的、占用空间小的矢量图形,包括几何图形、动画、渐变效果、滤镜等效果,并且SVG图形可以方便的动态产生,以展示所需的动态图形。

2 SVG

2.1　什么是SVG

　　SVG是可升级矢量图形(Scalable Vector Graphics)的简称,是一种基于XML的用来描述二维矢量图形和矢量/点阵混合图形的置标语言,SVG格式的文件也由元素和属性等标记标注的纯文本组成,SVG图像是与XML 1.0兼容的文档,SVG元素是指示如何绘制图像的一些指令,由浏览器解释执行这些指令,把SVG图像显示出来。使用SVG可以在网页上显示出各种各样的高质量的矢量图形:几何图形、动画、渐变色、滤镜效果等。是一种全新的专门为网络而设计的开放标准的矢量图形规范。与传统的图形格式特别是JPEG,GIF相比,具有许多优势。

2.2 SVG相对于位图文件的优势

　　纯文本格式:许多文本工具都可编写、修改,且与GIG、GPEG相比,文件更小。
　　基于XML技术:具有XML格式的所有优点,国际性开放标准,可通过标准API(如DOM API)轻松操作图像。
　　SVG格式的图像可自由缩放:SVG对图像的描绘是通过指定每个像素的值所需的指令而不是指定这些值本身,独立于分辨率,可以随意缩放图像的任何一部分,缩放后,丝毫不影响图像的显示质量,特别适合打印机输出;
　　SVG图形中的文字独立于图像:基于XML技术,SVG文件由元素和属性等标记标注的纯文本组成,便于修改、选择和进行搜索(特别适合于图形文件的搜索);
　　支持滤镜效果:不仅支持多种滤镜效果,而且可通过几个滤镜语法语句的修改,完成对滤镜效果的修改;
　　具有交互性:SVG中的对象可以通过脚本语言接受外部事件的驱动,如鼠标、键盘动作,完成用户对其中对象的控制,实现交互性;
　　可由程序语言方便地动态生成:如用Javascript,Perl,Java,JSP等,实现图形数据的实时更新。

3 如何动态生成SVG

　　SVG图像可以由程序动态生成,比如“使用JSP动态生成SVG统计图”，"使用ASP.NET构建灵活、轻量的SVG图像"，以及采用Java、servlet、perl等生态的高效的生成SVG图像，下面就是一个利用JSP动态生成简单的矩形SVG图像的例子：

<%@page contentType="image/svg-xml"%>
<%int width=300,height=200; string strcolor="#eeeeff"%>
<svg width="<%=width%>" height="<%=height%>">
<rect x ="10" y ="20" width ="150" height ="70" fill = "<%=strcolor%>" stroke="red" stroke-width="1"/>
</svg>

　　这种动态生成SVG图像的方式简单实用,但在这种结构的Web文件中,代码、数据和表示相混合,不利于修改和理解。而下面介绍中用XML+XSL生成SVG图像的方法能将图形数据与显示相分离,可更好地描述表示数据,且可以创作出良好视觉效果的XML动态数据,通过改变内容的结果可以改变图像的外观。

4　如何用XML+XSL动态生成SVG

4.1 XSL介绍

　　XSL(Extensible Stylesheet Language)是可扩展样式标语言的缩写,它定义了如何转换和表示XML文档。其中第一个处理过程是转化,定义如何操作文档,第二个处理过程是表示,定义如何在不同的用户代理中显示XML文档。现在XSL包含3个规范文档:

　　XSL一种高级的格式化语言,用于定义如何显示数据。

　　XSLT一种转换语言,用于提供一套规则,把XML文档转换成另一种XML文档、HTML文档或其他格式的文档(如PDF、TXT、SVG、WML等)。

　　Xpath一种表达式语言,它为识别和寻址XML数据提供语法。

4.2 XML+XSL动态生成SVG图形

　　XSL在对XML进行数据格式转换的重要思想是要把XML文档视为一种树结构,转换的过程就是从源树生成结果树的过程。XSL样式单定义了源树和结果树中对应部分的转换规则,每条规则中包含了一个模板,并对应着一种模式。模板定义了转换的结果,而模式则规定了需要进行转换的元素或属性对象,由XSL处理器根据XSL中的规则来处理输入的XML文档,并产生一个新的输出文档。

　　采用XML+XSL生成SVG图形时,首先,在服务器端,从各种数据源中提取数据,生成XML文件,再通过XSL Processor将包含了SVG中动态数据的XML文档,根据XSL中定义的规则,转换为SVG-XML文档。在客户端由浏览器插件负责解释SVG-XML并在浏览器中具体绘制图形。这类插件之一可以是Adobe公司提供的SVG View如图1所示。图1 用XML+XSL生成SVG图形

　　下面就是一个利用XML+XSL动态生成柱状SVG图像的例子:

　　包含柱状图数据的XML文档 :

<? xml version="1.0" encoding="gb2312" ?>
　<stats>
　　<description>网站访问量统计</description>
　　<time>2001年至2003年</time>
　　<unit>x1次</unit>
　　<stat>
　　　<type>2001年</type>
　　　　　<loadcount>23</loadcount>
　　</stat>
　　<stat>
　　　<type>2002年</type>
　　　<loadcount>42</loadcount>
　　</stat>
　　<stat>
　　　<type>2003年</type>
　　　<loadcount>55</loadcount>
　　</stat>
</stats>

　　转换XML到SVG图像文档的XSL文档:

<? xml version="1.0" encoding="gb2312" ?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:outputindent="yes" />
<!-- 定义全局变量,如柱状图的宽度和长度等 -->......略.........
<xsl:templatematch="/">
<svg viewBox"-100 0 {$width} {$height}">
<!-- 画出x、y轴、x轴的标签,单位及单位子标签 -->............略............
<!-- 根据XML中的数据画柱状图 -->
<xsl:for2eachselect="stats/stat">
　　<xsl:variable name="item-height"select="round(loadcount * $unit-multiplier)"/>
　　<xsl:variable name="xMin"select="$space+(count(preceding-sibling::stat) * ($col-width + $col-gap) )"/>
　　<rect x="{$xMin+($col-gap div 2)}" y="{$height-$space-$item-height}"
 width="{$col-width}" height="{$item-height}" style="fill:blue; stroke:black;"/>
　　<text x="{$xMin+($col-gap div 2)}" y="{$height-$space-$item-height-30}"
textLength="{$col-width}" style="font:宋体;font-size:12">
<xsl:value-ofselect="loadcount"/>
</text>
　　<!-- y轴的目录子标签 -->
<text x="{$xMin+($col-gapdiv 2)}"y ="{ $height - $space div 8}"
textLength ="{ $col - width}"style ="font : 宋体 ;font-size :12"><xsl:value-ofselect="type"/></text>
　</xsl:for-each>
</svg>
</xsl:template>
</xsl:stylesheet>

使用J2SDK 1.4 api接口解析xml的代码如下:

//创建一个类transformer的类厂
TransformerFactory tFactory=TransformerFactory.newInstance();
//用该类厂创建一个transformer的实例
Transformer transformer=tFactory.newTransformer(new StreamSource("xsl/pie1xsl")) ;
/ / 调用 transformer 类的 transform 函数完成转换
transformer1transform(new StreamSource("xml/flow1xml"),
　　　　newStreamResult(new FileOutputStream("svg/flow1svg")));

得到的SVG文档如下:

<? xml version="1.0"encoding="UTF-8"?>
<svg preserveAspectRatio="xMinYMinmeet" viewBox="-200 0 200 450" width="100 %">
　<!-- 画出x、y轴、x轴的标签,单位及单位子标签-->............略............
　<!-- 柱状图 -->
<rect style="fill:blue;stroke:black;" height="85"width="20"y="295"x="35"/>
<text style="font:宋体;font2size:12" textLength="20" y="280" x="35">23</text>
<text style="font:宋体;font2size:12" textLength="20" y="406125" x="35">2001</text>
　</text>
............
</svg>

　　在客户端,浏览器插件负责解释SVG-XML并在浏览器中具体绘制图形。这类插件之一可以是Adobe公司提供的Adobe SVG Viewer。

5　应用

　　在最近开发的信息发布系统项目中,在考虑了多种方法后,采用了由XML+XSL动态生成SVG图像的技术,实现了网站统计信息的图表表示。由于XML、SVG比较新,在很多方面仍有许多工作要做。

6　结束语

　　SVG目前已是W3C的一个标准,统一的标准和开放性是SVG的强大生命力所在,虽然目前主浏览器对它的本地支持仅限于插件,但可预言,所有主浏览器在不久都会提供对它的本地支持。

8　关于作者

杨晴雯,周宇,李晓
杨晴雯:新疆大学信息工程学院计算机系,新疆乌鲁木齐
周宇,李晓:中国科学院新疆理化技术研究所,新疆乌鲁木齐

(THE END)

SVG中国