今日頭條
官方微信
官方抖音
案例頻道
1 引言
可縮放矢量圖形格式（Scalable Vector Graphics），簡稱為SVG，是基于XML（Extensible Markup Language，擴展性標記語言）的開放的矢量圖形格式。作為XML的一種應用，SVG繼承了XML的諸多優點，同時，又具有文件量小、無級縮放、易于修改、支持重用以及良好的交互性等等一系列優點。作為W3C正式推薦的圖形格式，SVG擁有眾多的支持機構。
城市軌道交通自動化系統是典型的計算機集成系統，既包括電力監控、環境與設備監控、防災等單個專業的應用，又包括多個專業集成的綜合監控系統，這些系統主要都基于大型通用的SCADA（Supervisory Control And Data Acquisition）軟件構建，其中監控畫面的生成是工程實施主要內容之一，工作量大，能否快速生成各類復雜的監控圖符和監控畫面是評價系統好壞的重要參考指標。簡單的基本圖形比如直線、矩形、圓、折線、多邊形等是生成監控畫面的基本元素，通過旋轉、閃爍、變色、組合等各種屬性或操作可生成各種復雜圖符。為監視現場設備的工作狀態，圖符需要根據采集到的現場設備工作狀態而改變顯示屬性，展現出豐富的畫面信息。例如，在實施環境與設備監控系統時，需要生成如下表所示的風機、空調柜監視圖符，并且圖符的顏色等屬性應隨現場設備的狀態變化而改變。
一般來說，與專業的矢量圖形軟件相比，監控畫面生成軟件更關注于圖符特性的定義與現場設備的連接，而在繪制圖符的方便性、易用性和靈活性上都相對較弱。因此，直接利用專業矢量圖形軟件來繪制靜態圖符，監控畫面生成軟件導入相應靜態圖形后再定義各種動態信息和顯示刷新腳本將起到事半功倍的效果。SVG作為標準的開放矢量圖形格式，當前Adobe公司的Illustrator、Corel公司的CorelDraw等都支持SVG文件格式，可將SVG文件作為專業矢量圖形軟件和自動化軟件間的橋梁。
2 典型矢量圖形軟件導出的SVG文件格式分析
Adobe Illustrator 是Adobe公司推出的一款成功的結合SVG功能的矢量圖形編輯軟件,它具有強大的矢量圖形組態功能，可以支持大多數SVG圖形功能，并且支持SVG格式圖形的導出。利用Adobe Illustrator提供的繪圖工具，可繪制出各種基本圖形及各種復雜圖形，通過另存為SVG文件，用普通的文本文件查看工具可詳細分析Adobe Illustrator CS2 v12.0導出的SVG文件格式，為在城市軌道交通自動化系統中進行應用奠定基礎。
2.1 基本圖形
下表列出部分Adobe Illustrator支持的基本圖形及部分SVG代碼實例。
2.2 圖形文檔
在Adobe Illustrator中創建一個不包含任何SVG向量圖形的空文檔，其相應的SVG導出代碼如下：
Adobe Illustrator CS2在文檔第一行中聲明編碼格式為UTF-8格式，這樣可以保證中文的正常顯示。其中，<svg>為SVG圖形文檔的根元素，包含了部分跟文檔有關的屬性，例如width是文檔的寬度，height為文檔的高度。
2.3 圖層
Adobe Illustrator CS2支持圖層的概念，并且圖層是可以嵌套的。圖層相關的SVG代碼實例為：
如上述代碼可知，圖層在SVG中是用<g>元素表示，所有位于同一個<g>圖層元素下的任何元素都在一個圖層內，圖層的嵌套即<g>元素的嵌套，<g>圖層元素具有的id屬性表示圖層名，此圖層名在SVG導出時是唯一的。如果SVG圖形中只有一個圖層，則沒有任何表示圖層的<g>元素，<svg>根元素即表示唯一的圖層。
2.4 組合對象
下面的SVG代碼從Adobe Illustrator CS2導出，說明了Adobe Illustrator CS2中組合對象的概念：
如上述代碼可知，組合對象在SVG中也是用<g>元素表示的，在同一個<g>元素下的圖形對象就是一個單獨的組合對象。組合對象也是可嵌套的。每個組合對象<g>元素也有唯一的id值，表示此組合對象的名稱。
3 SVG圖形文件的導入設計
北京和利時系統工程股份有限公司獨立自主開發的MACS-SCADA系統，作為一個符合城市軌道交通自動化系統應用要求的SCADA軟件平臺，實現了完整的監控畫面生成軟件功能。對于靜態圖形繪制，主要功能包括：
1) 支持的基本圖形元素包括直線、矩形、圓角矩形、橢圓、圓、折線、多邊形、三次貝塞爾曲線、弧線、拱形、餅形等。
2) 支持圖層概念，但不支持圖層的嵌套。
3) 支持對象的組合，并且支持組合對象的嵌套。
4) 圖形對象擁有線寬、線色、填充色、旋轉角度、對象名等的屬性。
依據對Adobe Illustrator導出的SVG文件的分析，對比MACS-SCADA系統具有的功能，可發現除個別SVG元素外，系統支持SVG圖形的導入。
為直接利用專業矢量圖形軟件來繪制靜態圖符，系統支持SVG圖形的導入。
對于圖形的各種屬性，系統也能夠支持相關的導入。
導入SVG文檔是通過微軟提供的MSXML SDK對SVG文檔進行解析，在內存中形成DOM樹，并通過SDK提供的接口對DOM樹進行讀寫來實現。SVG文檔中圖形元素有很多共同的屬性，系統通過基類CImportSVGBase來完成公共屬性的導入，通過相應的派生類導入SVG文檔中的具體圖形。這些類的關系結構如下：
由于MACS-SCADA系統不支持圖層的嵌套，但是SVG文檔是可以多級圖層嵌套的，故導入時需要進行將圖層內部的嵌套圖層轉換為系統中的組合對象。
SVG中任一圖形對象都具有transform屬性，transform屬性中最復雜的變換方式就是矩陣變換，對應的二維坐標變換公式：
MACS-SCADA 中圖形對象也支持矩陣變換，以旋轉中心和旋轉角度來表示。為實現對SVG矩陣變換的支持，需要從矩陣變換的參數（a、b、c、d、e、f）中計算出旋轉角度和旋轉中心。假設旋轉角度為 ，旋轉中心點為坐標原點（(0，0)，平移距離為（tx，ty），則對應的SVG的矩陣變換公式為：
從而可得到以下對應關系a = d = cos( )，b = -c = sin( )，e = tx，f = ty，旋轉的中心點為坐標原點（0，0）。
4 總結
總的來說，可縮放矢量圖形SVG在城市軌道交通自動化系統中有廣闊的應用前景，本文探討了如何利用SVG作為橋梁，使得系統可以利用通用繪圖軟件強大的繪圖功能來提高易用性和工作效率。另外，系統還可以利用SVG對腳本的支持和提供的動畫特性實現動態畫面，實現在瀏覽器中查看監控畫面；或者將監控畫面導出為SVG文件，提高系統的開放性，方便系統與其它系統集成和互聯。SVG的開放性和基于XML的特點，決定了SVG在靜態畫面生成、動態特性連接、圖形文件格式開放性、WEB應用等方面都可以促進自動化系統的發展。
參考資料
[1] W3C，《Scalable Vector Graphics (SVG) Full 1.2 Specification》，W3C Working Draft，April 2005，http://www.w3.org/TR/SVG12
[2] Oswald Campesato，《Fundamentals of SVG Programming-Concepts to Source Code》，Charles River Media Incorporated，2004
[3] 徐海軍，李建華，《SVG在工作流圖形監控中的應用》，信息技術，2006年02期
[4] Rodrigo García García，《SVG for SCADA Applications：A practical approach》，http://www.svgopen.org/2004/papers/SVGforSCADA/
[5] 賀睿，苗雪芃，陳劍云，《基于SVG的SCADA監控畫面生成軟件的設計與開發》，工業控制計算機，2006年06期
[6] Adobe Systems Incorporated，《Adobe Illustrator CS2使用指南》，2005
北京市公安局海淀分局備案號：11010802023656號