基于XML的网络矢量图像SVG的实现与应用研究
黄晓文
（杭州铁路分局杭州水电段，浙江杭州 310009）
摘 要：SVG作为基于XML的文本化网络矢量图像格式，具有其他图像格式所不可比拟的优势和发展前景．基于点位图与矢量图的比较，介绍SVG的基本概念和主要特点，描述SVG的主要矢量图像生成功能，分析目前国际上基于SVG的网络矢量图像实现技术研究情况．最后介绍SVG在杭州铁路水电段信息管理系统中的应用情况．
关键词：矢量图像；SVG；XML；按需表现
引 言
图像是WWW中一个非常基本的元素．在这里，我们将一般意义上的图像即静态图像和动态图像即动画统称为图像．人们早已熟悉并掌握制作JPEG，GIF，Flash等常用图像格式．虽然这些图像格式目前在WWW中占着统治地位，但其固有的缺陷使它们无法真正实现基于内容的图像搜索，也无法实现动态按需图像表现．SVG（ScalableVector Graphics可伸缩矢量图像）的出现为WWW提供了一个全新的网络图像格式，由于其先进的基于XML特性使其在WWW应用中具有其他网络图像格式所不可比拟的优越性和发展前景．
1 点位图与矢量图的比较
计算机生成数字化图像一般分为两种方法：点位图法和矢量图法．点位图法是把一幅图分成许许多多的像素，每个像素用若干个二进制位来指定该像素的颜色、亮度和属性．矢量图法是用一系列计算机指令来表示一幅图，如画点、画线、画圆、画矩形等．目前，Web页面中大多数图像格式都为点位图格式，比较常用的如GIF和JPEG格式等．点位图具有很多优越性，它能忠实再现摄影图像，其编辑、开发工具种类繁多且简单易用，其图像构造原理直观易懂．但点位图也存在一些固有缺陷，主要表现为：其显示受分辨率影响，Web浏览器须为那些在原始图像中不存在的像素插入或猜测数值；点位图的二进制特性使其难以基于数据库信息动态创建图像；点位图的动画实现也仅限于采用快速连续显示单独图像的方法；点位图需要的存储空间要比矢量图多．
矢量图的图像构造原理与点位图完全不同，矢量图利用点和线等矢量化的数据描述图像，并在图像中包含色彩和位置信息，它有效地克服了点位图的固有缺陷．当显示或输出图像时，图像的品质不受设备分辨率影响，能够提供高清晰的画面，放大和缩小矢量图不会影响图像品质．另外，Web浏览器接收的指令可以与外部信息源（如应用程序和数据库）进行绑定，当要制作动画时，Web浏览器只要接收有关如何操纵属性（如半径或颜色）指令即可．
2 可伸缩矢量图像SVG
2．1 SVG基本概念
由于矢量图具有点位图所不可比拟的优越性，它越来越受到人们的重视．在WWW领域，最为成功的矢量图像当属VRML（Virtual RealityModeling Language，虚拟现实建模语言）图像和Flash电影．前者主要用于3D造型，但它太过复杂．后者可创建复杂动画，并可将动画与声音和交互性绑定．但它仍是二进制文件，动态创建比较困难．
SVG是一种开放标准的矢量图像描述语言，其标准是由W3C组织众多厂商（如IBM，
等）共同制定的，其目的就是要在网络上创建一种可扩展的、开放的图像格式．它是一个全新的矢量图像和动画格式．不同于传统的二元（平面）图像，SVG使用简单的一元（文本）语句完成矢量图像，以及诸如色彩变化、对象运动、滤镜和遮照、音效添加等各式动画效果．
2．2 基于XML标准
SVG的语法和结构基于XML（eXtensibleMarkup Language，可扩展标记语言）．XML是下一代网络开发语言，其功能远远超过了目前流行的HTML．以下为一个简单SVG文档代码示例，该文档指示浏览器创建一个矩形，并提供属性信息．
由该示例可知，SVG文档本质上就是规范的XML文档，其语法和结构完全基于XML．因此，同XML一样，作为W3C的推荐标准，SVG与现有的W3C其他开放标准有很好的兼容性．这些标准包括DOM，CSS，XSL，XLink，SMIL，HTML，XHTML等．同时，SVG与其他组织的标准化技术也能很好地协同工作，如ICC，URI，UNICODE，sRGB，ECMAS－cript／JavaScript，Java等．通过与这些开放标准的兼容和与其他组织标准化技术的协同工作，除了能绘出矢量图像外，我们还能基于SVG开发更多新功能以提供更多网络服务．例如，制作智能化数据图像，图像中的数据可以根据需要，由应用程序读取、修改和统计并最终在图像中显示，这些应用是目前HTML及相关图像技术远不可及的．
SVG作为一种XML文档，它是一元（文本）格式，因此，SVG图像具备以下特点：
1 不同于目前常规的图像，SVG图像中的文字是文本格式．因此，SVG中的文字可以被网络搜索引擎做为关键词搜寻，可以真正实现基于内容的图像搜索引擎．
2 SVG图像可以方便地由JavaScript，perl，Java等程序语言动态生成，从而可以开发在线图像和动画生成系统．
3 SVG完全支持DOM，因而SVG以及SVG中的对象可以通过脚本语言接受外部事件的驱动，实现对自身或对其他物件、图像的控制，制作交互式的图像和动画．
4 SVG可跨平台工作，还可解决相关的外部输出、色彩模式、网络带宽等问题．
简言之，文本格式使得SVG能与其他技术标准更好地交互和融合．
2．3 SVG的主要矢量图像生成功能
SVG作为一种新兴的矢量图像格式，目前还无法与Flash等传统矢量图像的绘图功能相比拟，但其先进的XML特征使它具有天生的优越性，在Web多媒体领域里前景广阔．按照W3C的SVG推荐标准，SVG除了几何矢量图像生成功能外，还具有许多先进的矢量图像生成功能，以下是目前SVG所具有的主要矢量图像生成功能：
1 定义可重用部件 在SVG图像构建中，可在文档定义部分内，对某些部分指定以后，调用在图像主体中的标识来创建可重用部件．
2 渐变和滤镜 SVG代码可指定沿渐变向量颜色“停止”或颜色点．滤镜是SVG最强大的功能之一，它不仅可实现位图所具有的滤镜效果，而且由于其基于XML的文本化特征，其滤镜效果可任意修改、替换和删除．
3 坐标变换 默认的坐标系统以用户代理（通常为Web浏览器）左上角的点（0，0）为原点，其正的x轴向右，正的y轴向下．在SVG中，还可通过某些变换操作创建新的坐标系统．
4 路径和曲线 利用路径命令可创建作为图像一部分精确定义的形状，动画或文本也可被设定为沿某一特定路径前进．目前，SVG中路径命令可以创建3种曲线，即椭圆曲线、三次贝塞尔曲线、二次贝塞尔曲线．
5 动画和交互性 动画一般通过更改对象属性值来实现，SVG也不例外．SVG定义了专用于动画的5种元素，即animate，animateMotion，animateColor，animateTransform，set．SVG可以通过捕获某些事件来启动脚本以实现交互性，最常用的
以下是作者编辑的一个完整的SVG文档示例，其中使用了上述主要矢量生成功能．
3 基于SVG的网络矢量图像实现技术
W3C的任务主要是制定WWW通用协议，以促进WWW发展并确保整个WWW领域能协同工作，但对于W3C制定的通用协议的实现，还需企业或软件开发商来提供．由于SVG所具有的强大诱惑力，不少软件企业正进行其实现技术的开发研究，比较成功的技术主要有以下几种．
3．1 SVG创作工具
目前SVG创作工具还处于开发和研制阶段，还没有一款非常成熟的包含SVG静态、动态、交互功能的创作工具．以下是目前较为流行的SVG创作工具．
1 Adobe Illustator 9．0 Adobe Illustrator 9．0是目前较为成功的一款结合SVG功能的矢量创作软件．它可进行SVG静态图像创作并可通过JavaScript实现部分交互功能，但还无法实现SVG动画功能．
2 Web Draw Web Draw是Jasc Software研制的SVG专业创作工具．通过直接画布拖拽及滤镜效果模块化组合，Web Draw可以避免手写源代码．目前Web Draw在功能上还比不上AdobeIllustrator，但作为SVG专业创作工具，它必将大有作为．
3 IMS Web Engine IMS Web Engine是Virtural Mechanics开发的网页创作软件，主要用于创作HTML，DHTML，SVG页面，其精灵（numen）向导可以定义简单的SVG动态交互动作．WebEngine目前最大的不足是没有提供源代码视图，因而无法直接进行源代码的修改和编辑．
除此以外，能够生成SVG文档的还有W3C的Amaya，Beatware的e－Picture，Causeway GraphicalSystems的GraPL，Corel的CorelDraw！等．
综上所述，目前现成的SVG创作工具还只能实现SVG静态图像和简单交互功能．因此，用户为了实现功能强大的SVG矢量动画功能，还需通过手工编辑SVG文档来实现．
3．2 SVG播放工具
SVG播放工具一般都以Web浏览器插件的形式存在．目前，最为成功、应用最为广泛的SVG播放工具当属Adobe SVGViewer．除此之外，目前已在W3C网站上作为产品发布的SVG播放工具还有Apache的Batik SVG browser，CSIRO的PocketSVG Viewer，IONIC的IONICSVGRenderer，X－Smiles organization的X－Smiles XMLbrowser等．
4 SVG在杭州铁路水电段信息管理系统中的应用
“杭州铁路水电段信息管理系统”是2000年由杭州铁路分局杭州水电段提出，报请杭州铁路分局总师室批准立项的开发项目，其目的是结合本企业的实际情况，实现办公无纸化、自动化，从真正意义上实现信息资源共享．目前，该项目已开始试运行．作为一个铁路水电运行基层单位，如果能通过计算机网络合理、有效、及时地实现数量繁多的水电报表图表化按需表现，必将有助于节省人力、物力．为此，我们充分利用SVG的XML特性，使水电报表能够按需统计、按需管理，使其具有一定的智能化．其实现框架见图1所示．
其实现方法为：
1 水电原始数据的输入 用户通过水电报表SVG文档自动生成系统在网络浏览器中输入水电原始数据．
2 水电报表SVG文档生成 水电报表SVG文档自动生成系统将用户输入的水电原始数据直接组织成SVG文档，通过WWW服务器和文档上载服务器，可以将水电报表SVG文档保存于后台水电报表SVG文档数据库中．
3 水电报表按需表现样式文档库的定义 如前所述，SVG文档作为一种规范的XML文档，能够很好地与W3C其他开放标准如DOM，CSS，XSL，XLink，Xpointer，SMIL，HTML，XHTML等进行协同工作．因此，我们根据本企业对水电报表按需表现的要求，能够任意地按照报表不同统计精度（如按月统计、按季统计、按年统计等）表现为不同细分方式的柱形图表，采用XSL（eXtensible StyleLanguage，可扩展样式语言）技术定义各种统计精度的报表表现样式文档库．
4 水电报表的按需表现 用户通过水电报表图表播放器（即Web浏览器），按照某一统计精度（如按月统计、按季统计、按年统计等）点播某一类报表，点播服务器自动导入相应的报表表现样式文档对该报表SVG数据进行格式化，从而使报表最终在客户端浏览器中表现为相应统计精度的柱形图表．
以前，我们针对水电报表的图表表现一般都使用传统的图表生成方法进行一次性成形，因而无法满足用户对报表按需表现的需求．在这里，通过采用先进的基于XML的SVG技术和XML相关的衍生技术如XSL技术等，我们有效地实现报表的按需表现，有助于对生产、经营等进行优化管理．
5 结束语
对于杭州铁路水电段水电报表按需表现模型，我们将水电报表数据组织成SVG文档，使其能够方便地结合XSL技术实现按需表现，但目前仍处于试验阶段，投入正式运行为时尚早，其中主要难度就是水电报表SVG文档自动生成系统的研制．下一步工作我们将重点开发水电报表SVG文档自动生成系统，对其进行进一步优化，使其更具人性化，简单易用．
SVG作为网络多媒体领域中的新兴技术还处于发展阶段．如何充分发挥SVG的优势和潜力，使其真正实现大众化应用，还需要进一步的扩展和完善，以及XML相关技术的不断成熟．随着SVG及其相关技术的不断发展和成熟，它必将大大地丰富人们的“网络”虚拟生活．
参考文献：
［1］ 林福宗．多媒体技术基础［M］．北京：清华大学出版社，2000．73－74．
［2］ Scalable Vector Graphics（SVG）1．0 Specification［EB/OL］．http：//www．w3．org/TR/2001/REC－SVG－20010904/
［3］ Scalable Vector Graphics（SVG）1．1 Specification［EB/OL］．http：//www．w3．org/TR／2002/CR－SVG11－20020430/
［4］ IntroductiontoScalable Vector Graphics［EB/OL］．http：//www－900．ibm．com/developerWorks/cn/education/xml/x－svg/tutorial－eng/index.html，2002．8．
［5］ 工业标准的矢量图像格式--SVG[EB/OL].http://www.5dmedia.com/5dmedia/web/soft/20010515/00000992.asp.
http://www.bjx.com.cn/files/wx/shdlxyxb/2003-1/4.htm
[返回] 中文XML论坛 - 专业的XML技术讨论区 →
XML.ORG.CN讨论区 - 高级XML应用 → 『 SVG/GML/VRML/X3D/XAML 』 → [转帖]基于XML的网络矢量图像SVG的实现与应用研究
(订阅本版)
2005/2/19 18:12:00
新浪微博
[转帖]基于XML的网络矢量图像SVG的实现与应用研究
