SCADA图形系统使用SVG技术（scada lts）

当前SVG是一个非常好的技术，可以在Web浏览器中显示基于矢量的图形和动画，这使它成为显示SCADA图形的好选择。

在过去，SVG遭遇了糟糕的、不完整的实现和对专有插件的依赖。今天，SVG已成为HTML5规范的一部分，它受到大多数现代浏览器的支持，更广泛的采用和更好的实现。

主要浏览器支持都已支持当前版本的SVG规范，下图展示了一些SVG布局引擎的详细的SVG特性实现状态。请注意，SVG已经得到了移动浏览器的良好支持，这意味着您也可以在平板电脑和智能手机中查看图形。

图1：SVG的浏览器支持状态

有很多矢量图形软件可以导出SVG文件。Inkscape就是一个出色的跨平台开源软件，它将SVG作为其原生文件格式。

SVG是XML格式文本，通过PHP、Python、Perl等脚本语言来构建和更改文件很容易。

Web浏览器构建并使其Javascript引擎具有SVG DOM模型，使用此模型，您可以动态更改SVG对象的属性，创建和删除节点，添加和控制动画，这就是你制作SCADA图形所需的所有。

SVG文件使用iframe标记或嵌入标记嵌入到html文件中：

• <iframe id=’svgscreen’ name=’svgid’ src=’svg_file.svg’ > </iframe>

• <embed id=’svgscreen’ src=’svg_file.svg’ type=’image/svg+xml’ />

另一个选项是使用对象标签将SVG直接嵌入到html文档中，图像标签支持SVG，但不允许对SVG DOM进行Javascript操作。

要开始JavascriptSVG DOM操作，必须等到SVG文件完全由浏览器加载时，才可以等待SVG对象的onload事件。使用jquery示例:

• $(‘#svgscreen’).load( function() { … } );

下一步是获取SVG文档DOM模型:

• var embedElem = document.getElementById(‘svgscreen’);

• var svgDoc = embedElem.getSVGDocument();

在此之后，您可以访问SVG DOM，可以访问单个元素:

• svgElem = svgDoc.getElementById( “elem_id” );

现在可以使用getAttributeNS和setAttributeNS来读取和写入元素属性:

• var elemStyle = svgElem.getAttributeNS( null, “style” );

• svgElem.setAttributeNS( null, ‘style’, “stroke:white; stroke-width: 2” );

可以使用createElementNS和appendChild创建和附加新元素。

使用AJAX调用可以从Javascript请求实时数据，这更容易通过像jquery这样的库实现。实时SCADA数据必须在Web服务器中以某种方式获得。在我们的例子中我们从监控系统通过IEC 60870-5-104连接读到SCADA数据,写数据到一个MySQL数据库,使用PHP web服务器读取数据库，并通过AJAX调用将数据传输到客户端显示它在Web浏览器，再使用DOM操纵SVG。

这些并不难实现，浏览器中的SVG DOM操作是一种非常强大的技术。所有这些都是标准技术，并在不断发展，在SCADA系统中使用SVG技术进行图像展现是现在及未来的最佳选择。