万诗新,张雪松

摘要：SVG是W3C推出的用于描述二维矢量图形基于XML的一种开放图形格式，本文对SVG的概念，基于SVG的WEB化监控系统技术及实现架构进行了详细剖析，提及的相关技术、设计理念在实际项目上均得到了很好的应用。

关键词：SVG WEB化矢量图形监控系统

监控系统软件是一套集数据采集、监测、控制于一体，通过丰富的流程画面、曲线、报警等手段对数据进行展现的软件包，其应用领域很广，它可以应用于电力系统、给水系统、石油、化工等领域的数据采集与监视控制以及过程控制等诸多领域。在Internet 技术飞速发展的今天，基于Web瘦客户机的B/S构架已成为监控系统信息发布的重要方式。当前主流通用监控系统软件均支持流程图画面WEB化发布功能，其中以ActiveX控件技术、Flash技术、Java技术为主。三项技术的本质比较类似，都是在客户端浏览器中，通过下载、安装或运行控件/插件的方式，来实现图形的再现以及静态、动态效果。其技术优点在于控件/插件以二进制方式在客户端浏览器中运行，效率较高，但缺点很明显，一是数据不开放，尤其是图形数据，基本无法重用；二是下载、安装由于浏览器的安全性，常常会出现兼容性的问题。

可缩放矢量图形（SVG）是基于可扩展标记语言（标准通用标记语言的子集），用于描述二维矢量图形的一种图形格式，它由万维网联盟制定，是一个开放标准。它的出现为监控系统软件流程图WEB化实现提供了新的思路。

SVG可缩放矢量图形（Scalable Vector Graphics）是基于可扩展标记语言（XML），用于描述二维矢量图形的一种图形格式。SVG严格遵从XML语法，并用文本格式的描述性语言来描述图像内容，因此是一种和图像分辨率无关的矢量图形格式。其格式优点有：

①基于可扩展标记语言（外语缩写：XML）。SVG是完全基于可扩展标记语言，并能和由W3C开发的DOM1，DOM2，CSS，XML，XPointer，XSLT，XSL，SMIL，HTML，XHTML等各项技术相融会的新一代的网络图像格式，继承了XML的跨平台性和可扩展性，从而在图形可重用性上迈出了一大步。

②采用文本来描述对象。SVG包括3种类型的对象：矢量图形（包括直线、曲线在内的图形边）、点阵图像和文本。各种图像对象能够组合、变换，并且修改其样式，也能够定义成预处理对象。

③具有交互性和动态性。SVG是基于XML的，它提供无可匹敌的动态交互性。你可以在SVG文件中嵌入动画元素（如运动路径、渐现或渐隐效果、生长的物体、收缩、快速旋转、改变颜色等），或通过脚本定义来达到高亮显示、声音、动画等效果。

④完全支持DOM。由于SVG完全支持DOM，因而SVG文档可以通过一致的接口规范与外界的程序打交道。SVG以及SVG中的物件元素完全可以通过脚本语言接受外部事件的驱动，例如鼠标动作，实现自身或对其他物件、图像的控制等。

SVG是一个XML文件，用于XML编程的两种模型DOM和SAX也适用于它。因为SVG是被设计用于互联网，所以通过Javascript和DOM访问它就是最重要的应用模式。通过Javascript和DOM可以动态地修改HTML，同样也可以在浏览器中动态地创建、修改和删除图片。

以下面SVG文件为例。SVG文件必须使用.svg后缀来保存：

各行含义描述：

行1：标准XML头，标识XML版本，每个XML文件（SVG文件属于XML）都必须有此XML头。

行2，3：

行4：绘制一个文本，属性x，属性y表示文本的左上角坐标，font-family表示字体，font-size表示字体大小，fill表示文本显示颜色。

行5：绘制一个矩形，属性x，属性y表示矩形框的左上角坐标，width表示矩形的显示宽度，height表示高度，fill表示矩形框填充色，stroke表示矩形框边框色，stroke-width表示矩形框边框宽度。

行6：关闭标签的作用是关闭SVG元素和文档本身。

WEB化监控系统就是通过互联网技术，在浏览器上实现被控对象的监视与控制。其实现方法：将流程图Web文件，通过IIS平台发布到Intranet/Internet，WEB服务器实现与后台数据采集系统的双向数据交换，WEB客户端（浏览器）实时向WEB服务器请求数据，在WEB客户端（浏览器）上实现监控过程。

监控系统软件通常都有一个强大流程图制作工具，用来完成流程图画面的制作。流程图画面包括静态、动态图形信息。静态信息包括图形位置、颜色、风格等；基本图形对象包括直线、矩形、圆角矩形、椭圆、多边形、折线、曲线、扇形、弧、弦、文本、时间、按钮、开关以及导入资源等；动态信息则要包括各静态图形的动态变化详尽信息，包括显示/隐藏、前/背景色、渐变换色、水平移动、垂直移动、比例填充、缩放、旋转以及闪烁等。诸多而又复杂的图形信息想在WEB上发布难度很大。

SVG支持矩形、圆形、拆线等基本图元绘制；通过path可以绘制出丰富的曲线效果；通过matrix几何矩阵实现对图元的移动、缩放、旋转控制；通过style等属性实现对图元的颜色、字体等的控制。这样可以在基于SVG技术的流程图Web文件中构建与监控系统软件流程图中元素相对应的标签节点，以保存监控系统软件流程图中与元素相关的静态和动态属性，结合JavaScript脚本，在WEB客户端（浏览器）上实现WEB流程图静态和动态展示。

如表1为画面基本图元与SVG标签节点的转换关系：

如表2为画面图元动态属性与SVG属性节点的转换关系：

在自主开发的监控系统软件中，可开发流程图到WEB页面导出指令和流程图批量转换工具，来实现监控流程图的快速转换发布。对SVG矢量画面图像格式的概念、特性及其与JavaScript相结合实现的流程图监控的WEB技术进行详细剖析研究，开发人员可以基于此方案完成实时监控系统的“一键式”发布，为同类技术的研究及开发提供了一种新的思路和方法。

参考文献：

[1]钟萍.基于SVG技术人物动画课件生成系统的设计与应用[D].南昌大学，2010年.

[2]杨清林.SVG在变电站系统自动化中的应用研究[D].山东大学，2010年.

[3]黄凯伟.SVG开发实践[M].电子工业出版社.

[4]陈晖，孟凡顺，郭树祥.实时数据Web发布技术研究[J].中国科技信息，2010（02）.

作者简介：万诗新（1963-），男，湖北武汉人，硕士，高级工程师， 硕士研究生导师，国家国防科技工业局特聘技术专家，现任国核自仪系统工程有限公司研发中心主任，长期从事工业自动化产品研发及管理工作；张雪松（1973-），男，山西神池人，本科，中煤集团平朔集团公司动力中心高级工程师，主要研究方向：变电站综合自动化。