基于SVG繪圖技術實現流程圖展示的研究

張瑩

1 引言

近年來，Internet技術有了較快的發展，尤其是分布式計算技術也得到了迅速發展，應用領域日益廣泛。其于Web的繪圖技術通過借助第三方提供的一些工具實現了Web的繪圖功能，但生成的Web圖形不能實現有效交互，在理論上可視為死圖。SVG可縮放矢量圖形（Scalable Vector Graphics）可以實現與用戶的交互功能，具有較好的可讀性，是一種比較適用于描述二維矢量圖形的圖形格式。

2 SVG技術簡介

2.1 SVG概述

SVG標準是由W3C組織制定的一個開放標準，它非常容易實現Web發布，是一種全新的動畫和圖像格式。SVG具有以下優點：

（1）操作簡單，可以通過色彩填充、對象運動等簡單的操作實現多媒體效果，可以通過一些計算機文本語言完成矢量圖像。

（2）具有較強的交互性，可以與很多先進的網頁交互技術進行兼容。用戶可以利用SVG中的一些元素，利用網頁中的腳本語言實現動作的交互，達到制作目的。SVG圖像可以通過腳本程序代碼與JavaScript或XML實現交互，SVG圖像可以由JavaScript、Perl、Java等程序語言動態生成，圖像可以根據數據庫的實際應用而改變。

（3）SVG是一種文本描述格式，這就決定它具有屬性數據和動態數據的屬性，可以在查詢地理信息和相關聯對象方面應用廣泛。SVG基于文本格式，因此它可以進行二次修改，也可以說是一種可升級的圖像文件格式，這一特點被廣泛應用在處理復雜數據方面，在維護數據時，表現出方便、靈活、容易維護等特點。此外，SVG圖像中的文字能夠在網絡中實現精確搜尋，能夠實現用戶瀏覽器的查找和編輯。

（4）具有較強的渲染與濾鏡處理能力，電子地圖非常清晰。實踐證明，SVG圖像的清晰度對任何屏幕分辨率或打印分辨率都比較實用，打印效果非常好，打印效果能夠和屏幕顯示圖像色彩保持較好的一致性。SVG的矢量濾鏡功能也非常實用，操作簡便，只需要調整一些參數屬性就可以修改圖像效果。

（5）SVG在圖像處理方面有著獨特的優勢，SVG符號庫填充功能非常強大，具有引入柵格圖像填充、定義矢量圖元進行填充等功能，操作過程中，任何一個地圖符號都可以填充到相應的位置。

2.2 SVG與其他圖形的區別

網絡上可以應用的圖像格式有很多種，如：JPEG、GIF、PNG、PG、ML矢量標記語言(VML)等。JPEG、PNG等由于是位圖格式，在應用過程中存在一定缺陷，因為位圖的尺寸大，不利于傳輸，在改變圖像大小時會出現一些鋸齒狀的線條。而矢量圖的原理是基于數學公式的命令渲染來控制線條的粗細、顏色和圖形的，因此，它在很多方面有了改進，它不但克服了位圖尺寸大的缺點，還可以按照任意比例進行縮放。

2.3 SVG編輯圖形

SVG技術在處理圖形、圖像和文字方面具有強大的功能，它不但支持文本、交互性等常用的標記，還能夠實現圖形、圖像、動畫等的一些功能。SVG圖形文件編輯操作步驟為：首先要通過XML解析器打開SVG圖形文件，并相應地生成一個對象樹；接著，用鼠標點擊以驅動腳本執行，腳本即可利用DOM接口對對象進行一系列動作，實現圖形繪制、編輯等圖形編輯功能。如圖1所示。

圖1 SVG編輯圖形流程

3 SVG技術在油田產能項目運行管理系統中的應用

3.1 產能項目中傳統流程圖的展示

以往的項目流程圖的展示是在Web圖形上實現的，這種實現方式有自身的缺陷，因為它要通過微軟的.NET、SUN的Java等一些工具才能實現圖形功能，實現的圖形也不能與用戶進行有效交互。SVG可縮放矢量圖形與Web圖形功能相比較，具有很多優點，它是采用文本來描述矢量化的圖形，這就決定了SVG圖像文件可以像網頁一樣方便瀏覽。通常項目的流程圖用電子表格的形式來實現，如圖2所示。

圖2 傳統流程圖的展示

從圖2這種形式我們可以看到存在幾下幾個問題：

（1）傳統項目中，流程圖的模式只有電子表格展示。存在拖拽困難，展示單一的問題，很大程度上影響了用戶對流程圖直觀的體驗。

（2）電子表格做成位圖圖像進行展示的缺點是，圖形文件普遍較大，存儲時會占用大量的網絡帶寬，會拖慢整個程序的進程。

（3）圖形很難在Interne上實現真正的數據交換功能，項目中很多功能無法實現。

（4）文本很難獨立，字體也常常受到限制。

（5）顯示效果較差，無法實現多種顏色的控制。

3.2 產能項目中使用SVG技術實現的流程圖展示

同以往流程圖繪制不同的是SVG技術的圖形功能比較強大，是一種動靜態結合的圖像技術，可以實現Internet上展示圖形、移動終端上的圖形繪制，可以支持動畫，模擬地理信息的實時動態，實現路徑跟蹤、洪峰監視與預警等諸多功能。

下面針對傳統流程圖繪制存在的問題，我們應用SVG技術實現了以下功能：

（1）任意放縮。用戶對圖像可以做拉伸、縮放等調整，調整過程不會對圖像的清晰度、細節等產生任何影響。

（2）文件小。SVG文件和GIF和JPEG等格式的文件相比較，占用空間小，方便下載和存儲。

（3）文本可任意編輯。SVG圖像中的文字是完全獨立的，可以對文字進行編輯或搜尋。

(4)可以直接在HTML嵌入SVG代碼。SVG文件可通過以下標簽嵌入HTML文檔：、