基于SVG技術的網頁可視化視覺符號交互系統設計

王惠

摘? 要： 在傳統的網頁可視化視覺符號交互系統中，視覺符號加載給服務器帶來過大負荷，導致加載時間長。為此，設計一種基于SVG技術的網頁可視化視覺符號交互系統。通過網頁展現層、服務層和數據層，搭建系統總體架構;根據系統總體架構，通過控制器、顯示器、存儲器、鍵盤、服務器、用戶終端，完成系統硬件設計;利用SVG技術將文檔轉換為視覺符號，通過Applet技術和JavaScript語言實現轉化程序，完成系統軟件設計。至此，完成基于SVG技術的網頁可視化視覺符號交互系統設計。實驗結果表明，與傳統的網頁可視化視覺符號交互系統相比，提出的基于SVG技術的網頁可視化視覺符號交互系統所需加載時間更短，能夠為用戶帶來更好的視覺體驗。

關鍵詞： 網頁可視化; 視覺符號; 交互系統設計; SVG技術; 參數設置; 系統測試

Abstract： As the load of visual symbols in the traditional webpage visualization visual symbol interaction system brings too much load to the server， resulting in a long load time， a webpage visualization visual symbol interaction system based on SVG technology is designed. The overall system architecture is constructed by the web page presentation layer， service layer and data layer. The system hardware design is completed according to the overall system architecture， which is composed of the controller， display， memory， keyboard， servers and user terminal. The SVG technology are used to convert the document into the visual symbol， and the Applet technology and JavaScript language are used to achieve the conversion program， so that the system software design is completed. The design of webpage visualization visual symbol interaction system based on SVG technology is completed. The experimental results show that， in comparison with the traditional webpage visualization visual symbol interaction system， the proposed webpage visualization visual symbol interaction system based on SVG technology requires shorter loading time， and can bring better visual experience for users.

Keywords： webpage visualization; visual symbol; interactive system design; SVG technology; parameter setting; system testing

隨著科技的不斷發展，交互系統在電子設備中發揮的作用越來越重要。采用視覺符號和圖形等元素的可視化交互系統，交互界面直觀、友好。在網頁可視化視覺符號交互系統中，網頁向用戶提供了大量的信息，其中，視覺符號等圖形、圖像信息的展現，多數呈GIF，JPEG的格式[1]。

網頁在讀取這些視覺符號時，通常會對服務器造成一定負荷，導致加載視覺符號的速度變慢，且對圖像作任意縮放時，視覺符號的質量會受到影響[2]。SVG技術是一種基于XML格式的文本式矢量圖形描述語言，能夠描述和組合各種幾何形狀，在對視覺符號任意縮放時，不會影響視覺符號的質量，且擁有顯示效果好、可減少服務器負荷等優點[3]。基于上述分析，設計一種基于SVG技術的網頁可視化視覺符號交互系統。

1? 基于SVG技術的網頁可視化視覺符號交互系統設計

基于SVG技術的網頁可視化視覺符號交互系統的總體架構主要由硬件和軟件兩部分構成。

1.1? 基于SVG技術的網頁可視化視覺符號交互系統總體架構

交互系統主要由網頁展現層、服務層和數據層構成，總體架構如圖1所示。

網頁展現層主要展示網頁的視覺符號等信息，頁面布局及功能組件采用HTML5編寫[4?5]，加載轉換后的SVG文件，將視覺符號等信息展現出來。

服務層中主要是實現業務邏輯和規則，采用Spring腳本實現系統數據管理，通過發布Web Services實現網頁和交互系統其他部分的數據交互。

數據層主要是存儲系統中的各種數據，提供持久的數據服務。數據訪問組件為JDBC，C3P0對連接池實施管理，實現數據庫與系統其他部分的兼容。

1.2? 基于SVG技術的網頁可視化視覺符號交互系統硬件設計

根據系統的總體架構，設計系統的硬件部分。系統的硬件結構如圖2所示。

由圖2可知，系統硬件結構主要由控制器（單片機）、OLED顯示器、存儲器、服務器、用戶終端等構成。

單片機選用功能強大的C805F120型單片機，顯示器采用V008DF?001型顯示器，分辨率為240×320，采用的點陣式顯示模塊的最大色彩分辨率為26萬色。存儲器選用E2PROM芯片，其接口模式為三線串行接口，通過配置引腳，將其操作模式設置為8位。單片機與芯片的電路連接圖見圖3。

1.3? 基于SVG技術的網頁可視化視覺符號交互系統軟件設計

在硬件的支撐下，設計網頁可視化視覺符號交互系統的軟件部分。軟件的實現過程如圖4所示。

采用SVG技術將文件轉換為視覺符號，通過Applet技術和JavaScript語言實現轉換過程[6?8]。當用戶想將其轉換為視覺符號時，僅需對文本信息做轉換，即可得到視覺符號。用戶通過對網頁中的任何視覺符號的操作實現交互。

SVG文件轉換為視覺符號的具體過程如下：

首先，將SVG文件存入存儲器中，要先獲取SVG文件，通過式（1）來實現：

式中：[wij]代表網頁中SVG的輸入函數;[a]代表交互系統中網絡的控制系數;[t]代表網絡節點;[xi]代表視覺符號集合的鄰近區域，[wij]與交互系統中的網絡節點[t]和控制系數[a]有關，變化值范圍在50～100之間[9?10]。通過式（1）獲取SVG文件。在獲取到SVG文件后，將其傳入存儲器中，對文件開展轉換工作，公式為：

式中：[f]代表轉換函數;[t]代表轉換后的文件數據;[A0]代表交互系統中的網絡數據轉換系數;[e]代表轉換前的文件數據。當完成數據轉換后，將文件輸出到用戶終端，其輸出通過式（3）實現：

式中：[g]代表將數據轉換為視覺符號的函數;[B]代表交互系統與用戶終端連接的數據轉換系數[11?13]。通過式（3），將SVG文件以視覺符號的形式顯示在用戶終端，實現可視化，用戶對視覺符號作出操作，視覺符號會隨用戶的操作發生變化。

采用Servlet技術，讀取存儲器中的數據，輸出到SVG頁面，以設計一個矩形為例，具體過程如下：

通過SVG技術將文件轉換為視覺符號，然后通過對視覺符號的點擊等操作實現交互。

綜上，搭建系統總體架構，在總體架構基礎上，通過控制器、OLED顯示器、存儲器、鍵盤、服務器、用戶終端等完成系統硬件設計，通過Applet技術和JavaScript語言將SVG文件轉換為視覺符號，完成系統軟件設計。至此，完成基于SVG技術的網頁可視化視覺符號交互系統設計。

2? 實? 驗

采用提出的基于SVG技術的網頁可視化視覺符號交互系統，驗證其是否能為用戶帶來高效的交互體驗，并與傳統的網頁可視化視覺符號交互系統作比較。

2.1? 實驗過程

搭建實驗平臺，具體測試條件如表1所示。

搭建好實驗平臺后，設定實驗參數，具體參數值如表2所示。

在設定實驗參數后，分別采用基于SVG技術的網頁可視化視覺符號交互系統和傳統的網頁可視化視覺符號交互系統做實驗。實驗者點擊文件，交互系統將文件轉換為視覺符號，分別采用不同的網頁可視化視覺符號交互系統對文件轉換，得到不同交互系統對視覺符號的加載時間。

2.2? 實驗結果分析

不同網頁可視化視覺符號交互系統的加載時間對比結果如圖5所示。

由圖5可知，在同樣的硬件環境下，針對不同文件大小的視覺符號，不同交互系統的加載時間有較大差別。隨著文件大小的不斷增加，三個網頁可視化視覺符號交互系統所需的加載時間均有所增加。采用傳統的網頁可視化視覺符號交互系統2，當文件大小為30 Kb時，與其他兩個系統相比，所需加載時間最多，當文件大小達到30 000 Kb時，傳統的網頁可視化視覺符號交互系統1和系統2所需時間均達到3.6 s左右。而采用提出的基于SVG技術的網頁可視化視覺符號交互系統，隨著文件大小的不斷增大，其加載時間的增加并不多。可見，采用SVG技術，對交互系統產生的負荷小，所以，與其他兩個傳統的網頁可視化視覺符號交互系統相比，需要更少的加載時間。

3? 結? 語

針對傳統的網頁可視化視覺符號交互系統存在的視覺符號加載時間長的缺點，設計基于SVG技術的網頁可視化視覺符號交互系統。通過對比實驗，與傳統的網頁可視化視覺符號交互系統作比較。實驗結果表明，提出的基于SVG技術的網頁可視化視覺符號交互系統能夠為用戶帶來更好的交互體驗。希望提出的SVG技術的網頁可視化視覺符號交互系統能夠得到廣泛的應用。

參考文獻

[1] 李鑫.基于交互設計的網頁設計與制作課程體系改革[J].軟件工程，2017，20（8）：50?52.

[2] 劉挺，徐哲壯，何偉東，等.基于Android的移動化工業人機交互系統設計[J].傳感器與微系統，2017，36（10）：111?114.

[3] 李亞驊，尹念東，陳志.基于手勢識別的虛擬實驗交互系統的設計與實現[J].湖北工業大學學報，2018，33（1）：38?41.

[4] 李婷婷，余慶軍.虛擬交互系統開發及關鍵技術研究[J].計算機技術與發展，2017，27（12）：124?127.

[5] 范德軍，文勁松，徐勇，等.基于SolidWorks的可視化定制研究[J].圖學學報，2018，39（3）：573?578.

[6] 馬德濤，王銳，黃毅.基于SVG的電子海圖復雜矢量符號繪制方法[J].海洋測繪，2017，37（5）：71?75.

[7] 王弘堃，曹軼，肖麗.基于圖像的大規模數據集交互可視化[J].計算機研究與發展，2017，54（4）：855?860.

[8] 劉尚東，談杰，季一木，等.基于Storm的DSMS交互系統客戶端的設計與實現[J].計算機應用研究，2018，35（1）：182?185.

[9] 劉珠妹，劉堅，李盛樂，等.基于可視化GMT的MapSIS制圖子系統設計與實現[J].大地測量與地球動力學，2018，38（3）：326?330.

[10] 趙林，張令濤，王贊，等.調度自動化系統多視圖人機交互界面設計[J].電力系統自動化，2018，42（6）：86?91.

[11] 柏茂源，代福平.網絡動態可視化的交互設計原則構建[J].包裝工程，2018，39（4）：193?198.

[12] 蔡瑞初，林殷嫻，艾鵬.SBV：基于SVG的生物信息可視化軟件[J].計算機科學，2017，44（10）：33?37.

[13] 邱亞男.基于SVG的IETM數據模塊熱點交互技術[J].兵工自動化，2017，36（4）：45?48.