自定义将矢量图形转换为SVG格式

将矢量图形转换为SVG格式　　提出了将工业控制中自定义的矢量图形格式转换到SVG标准格式的思路，并介绍了转换的实现方法；为保证图形数据的一致性，制订了相应的转换流程；通过工程中的实施应用，给出了在具体转换过程中相应技术属性的添加和实现方法。

来源：SVG中国(ChinaSVG.COM)

0 概述

　　互联网的普遍应用，为现代企业生产监控提供了一种崭新的可能，就是把采集到的生产数据,通过Internet/Intranet发布出去,使用户无论在任何地方,只需使用标准的浏览器就可查看工业现场的图形显示、历史曲线、报警信息,甚至根据权限进行参数调控和设备操作。现有的工业控制软件往往依靠专业图形处理模块提供的图形化支持，如工业控制常使用CGI程序根据用户参数的选择实时生成图像。这种方法生成的往往是自定义的ASCⅡ码图形格式，限制了软件的灵活性和开放性。也有的采用类似CAD及GIS等现有图形平台来产生矢量图形文件，但均不兼具易用性和互操作能力。20世纪90年代末，W3C组织开发了一种开放标准的文本式矢量描述语言SVG(Scalable Vector Graphics)，采用纯文本来描述，是为网络而设计的图像格式，具有许多适于网络应用的功能特点，非常适于二维矢量图形、图像文件的Web发布。

1 SVG的突出特点

　　SVG一种基于XML标准的纯文本图形格式，具有矢量图的诸多优点：图像的显示质量不会因为拖移或缩放等操作受损，放大、缩小及各种特效的表现效果好；SVG采用简单高效的矢量指令来描述图形，大大缩减了图像文件的大小；SVG图像具有高度的可维护性，易于修改、编辑几何元素及属性信息；SVG是文本格式，可以很好地跨平台工作；SVG是基于XML的，具有设计完善的DOM接口，使各种编程语言和脚本语言可以动态地存储和上传文件的内容、结构或脚本，而且大量的事件句柄，如OnMouseOver、Onclick也都可以指派给任何一个SVG对象；同时SVG内置了对Javascript的支持，这大大提高了SVG图像的交互。

2 将其他矢量图形格式转换为SVG格式的思路

　　在C/S方式的图形软件中，矢量图形都采用自定义并考虑了专业需求的格式，而SVG是一个能描述几乎所有类型空间数据的标准格式。实现一个能够定义并解释该标准中所有元素的图形软件包是一项复杂繁重的工作，因此，目前未将SVG标准作为现有图形软件系统中矢量数据的持久化标准格式。这里考虑到专业应用的需要，充分利用现有图形软件的开发成果，将数据库中自定义格式的图形数据转换为SVG标准格式的文件，以提高图形支持的网络化和互操作性。

2.1 转换思路和方法

　　对于工业控制领域内具有图形支持系统的应用软件来说，图元信息的描述方法是决定图形监控效率的关键因素之一。采用基于SVG的图元信息描述法，既可以灵活简单地描述复杂的图元，又能方便地支持交互。SVG在发布时预定义了一批简单的图像对象，像rect、circle、ellipse、line、polyline和polygon，对于复杂的图形对象，如Bezier曲线、椭圆弧等，SVG提供了一个重要的元素——path来描述。而对于图形中的块参数，SVG也提供了具有图形重用与对象组合功能的defs和g等元素来表示。再者，用户定义图元往往与某一设备类型有关，而在画面中出现的图元则代表一个完整的、具体的设备。因此，在转换为SVG格式后，应该保持这一特性，而不能将图元拆散为单独的线和圆，变为无意义的几何描述。

2.2 自定义矢量图形的图元定义

　　电力系统对图形监控的实时性要求较高，现以将一自定义的电气化接线图转换为SVG标准格式，来具体说明实现方法。因为专业需要，原PTS是一个内容较多的接口文件，考虑到图形转换的方便性，现只读取转换时有用的图形信息。

TShape{
X1	坐标X1；	Y1	坐标Y1；
X2	坐标X2；	Y2	坐标Y2；
PenSize	画笔尺寸；	PenStyle	画笔线型；
Color	画笔颜色；	BrushColor	画刷颜色；
DeviceID	图元设备的标识；	ShapeID	图元的形状类型；
GroupID	图元组名；	Layer	图元所在层；
}Shape

2.3 转换过程中的关键技术

　　工业控制图形虽然应用场合和开发环境各不相同，但其图形界面上的图元都代表实际设备，所以图元与图元之间，以及图元与数据库之间都有属性关联，如何确保转换为标准的SVG后依然保持这种关联是转换技术的关键。

　　2.3.1 块参照的处理

　　在许多自定义的图形文件中，某些设备可能需要一些基本图元共同组成复合图形对象，像电力图形软件中的隔离开关、变压器等，这些即为块参照的图形。这类图形对象在转换过程中，先把块以基本图元为单位进行分解，对其中的每个图元对象进行操作，再将分解后的图元重新组织在一起。对于图形对象中相同的块参数只需要分解一次。最后将块参数用SVG中的defs来定义，赋予每个defs元素一个唯一的ID，参数相同的块只要引用相同的defs元素的ID即可。三绕组变压器的表示为：

　　这样处理既维护了图形对象的整体表达意义，同时也为画面的动态刷新打下了基础。

　　2.3.2 图层的处理

　　图层对不同应用场合的图形文件具有不同的实际意义。常用工业控制图形至少有底图和监控实时图2级图层。底图指的是在监控过程中不变的图形（如SCADA系统中配电网的二次接线图的基本布置框架），而控制实时图是在控制过程中，随被控被测设备的工作状态而变化的图形。在SVG中也有类似的概念，可以利用元素g将图形元素分类成组，这样在图元属性的描述中就多了一个layerID的图层属性，转换时读取每个图形对象的图层属性进行比较，将同一图层的对象放在同一g元素中。

　　2.3.3 非几何属性的处理

　　一般图形的非几何属性指的是如线形、线宽、颜色、填充色等属性，但对于具有实际意义的工业控制图形中的图元，还有表示其关联结构的类似设备的标识、图元的技术特性、图元所在的数据库属性等属性。尤其在SCADA系统中，当调度端发出控制信号或设备出现异常时，被控站必须能在第一时间通过监控画面得到开关位置信号、异常设备位置及报警信号。SVG的矢量滤镜功能可以通过改变开关图元的颜色通知调度人员，对于报警信号，SVG可以在实现异常设备高亮度显示提示的同时通过插入外部WAV或MP3等格式的声音文件，提醒调度人员及时作出决策。

3 私有图形格式转换为SVG格式的程序设计

　　整个转换过程是由图形数据服务程序完成的。数据库中的图形数据经转换后，以SVG文件的格式存放在指定的目录下，供Web发布使用。其一般转换流程如图１所示。

图1 一般转换流程

　　程序主模块是SVG文件生成模块。图2为SVG转换程序主界面，以该图为例简要说明文件转换过程、步骤及相应技术属性的添加。

图2 SVG图形转换主界面

3.1 SVG图元滤镜功能

　　在SCADA系统中，当调度端向被控站发出调度命令时，考虑到信息传输的距离及干扰因素，指令到达被控设备需要一定时间，但随之发出的调度图形却能瞬时到达，调度端正是借助SVG的滤镜功能，使被控设备的相应图元在命令已经发出但还未到达被控设备时，处于醒目颜色的闪烁状态，提示工作人员注意确认调度命令。

3.2 SVG图元的报警功能

　　远动系统除要求极高的实时性外，对设备异常的及时提醒要求也很高。由于操作失误或信道传输过程中出现干扰会使得到达设备的操作指令失真，导致设备不能正常工作。此时调度端设备图元能根据预先指定的报警级别及时发出报警声音，通知调度端及时作出决策。该功能的实现是借助于SVG引用外部的WAV或MP3等格式的声音文件，通过设置以下<a:audio>元素的一些属性来实现报警功能。

<a:audio xlink:href="/Highest.mp3" volum="15" begin="1s" repeateCount="indefinite" >
<text x="50" y="20" style="fill:red; text-anchor:middle" >ThisTransformer has promble<text>

　　用xlink:href指明需要播放的外部声音文件的URL，volum指明声音播放的音量强弱程度，一般报警级别越高，声音越大。begin指明声音文件开始播放的时刻，当接收到报警指令时就发出报警声音，报警声音的播放次数由RepeateCount决定，一般设为无限次，直至调度人员点击该设备图元。

3.3 工控图形中其他特性显示的功能

　　SVG的动画效果是通过让各种可视化元素的属性或样式值按照一定的时间规律进行变化来实现的。在调度图像生成时，应用SVG的动画效果将被转换的PTS图形动态变化，以显示其处于工作状态，动画元素以被作用元素的DeviceID属性为索引实现不同设备的动态变化。

　　动画的功能不仅如此，对实时性的要求也可以借助于该功能实现。在某些供电场合，器件的工作时间有严格的限制，可以利用SVG的动画功能在生成的调度图形上加一时钟，根据时钟显示被控继电器等设备的吸合和断开等操作。

3.4 事件响应及图元交互性实现

　　由以上图形数据转换过程可以看到，以往必须在客户端完成的与具有应用紧密相关的各种处理（显示、着色和报警处理等）完全交于服务器端来实现，对于客户操作事件的响应以及与用户的交互，依赖于客户端脚本程序的执行以及向后台服务器的请求来实现。比如当调度人员点击变压器实现电压升高时，以DeviceID为索引相应变压器图元颜色发生变化。

<rect id="Transformer" x="20" y="20" width="25" height="25" rx="5" ry="5" style="fill:lightgrey"/>
//给变压器赋ID：Transformer
<set attributeName="fill" from="black" to="red" begin="Transformer.mouseover" end="Transformer.mouseout"/>
//根据ID改变颜色

　　同理，当实时遥测量或遥信量发生变化时图形中相应图元的颜色及其他属性也会瞬时发生变化，这些功能实现也是通过设备的DeviceID与图元的ID属性向关联实现的。所有这些操作仅仅由服务器端根据实时状态修改其SVG文件中相应元素，并刷新给客户端，大大简化了客户端的任务。

4 关于作者

　　高艳锦,蒋先刚,吴小林：华东交通大学，交通信息工程与控制研究所，江西南昌，330013)

(THE END)

SVG中国