SVG向量圖技術

一、SVG概述:

SVG (Scalable Vector Graphics, 可伸縮向量圖形) 是W3C推出的一種開放標準的文本式向量圖形描述語言,他是基於XML 的、專門為網路而設計的映像格式。SVG是一種採用XML 來描述二維圖形的語言, SVG 圖形可以是動態、可互動性的, 使用SVG 可以在網頁上顯示出各種各樣的高品質的向量圖形。　　

今後的網路上將會有更多標準格式的圖形檔案存在：GIF,JPEG,PNG,SVG.....之所以這麼說，是因為SVG標準是由眾多廠商和W3C共同制定的，目的就是為了要在網路上建立一種新的、大家認同的、可擴充的、開放的圖形格式。

二、SVG的特點：

1.SVG是一種向量映像

向量映像利用點和線等向量化的資料描述映像，並在圖形中包含色彩和位置資訊。其最大的優點就是映像的任意縮放對解析度沒有影響，或者說，在向量圖中解析度的概念是模糊的。並且，向量圖在顯示和輸出等過程中，與裝置的解析度沒有關係。

SVG作為向量映像格式，除具有向量圖的優勢外，對位元影像映像也能加以正確表達。

2.SVG是基於xml建立的

xml是w3c制定的網路開發語言，它的功能遠遠超過現行的html語言。xml語言具有比html語言更好的管理和互動功能。xml將網站的內容和架構完全分離，通過定義結構資料類型，網站使用者能夠自主的利用用戶端程式顯示和處理資料，具備很好的擴充能力。

SVG的文法和結構基於xml，因此同樣具備很好的擴充性。

3.SVG支援向量濾鏡

比較向量映像和位元影像映像，可以發現位元影像映像能夠使用大量的濾鏡效果、紋理貼圖和空間幻影等特效以加強映像的視覺效果。這是位元影像映像為廣大設計師所採納的重要原因之一。隨著SVG向量映像格式的出現，這種局面發生了變化，利用SVG支援的向量濾鏡，可以創作出各種濾鏡效果，並且更重要的這些濾鏡效果在出現後是可調整的。分析中可以發現SVG所使用向量濾鏡並不直接針對像素進行操作，而是作為對象的一個獨立屬性存在於文本中。對映像效果的修改僅僅是調整映像的這一屬性。SVG對向量濾鏡的支援為遠程協作和再次開發提供了空間。

4.SVG沿用的是文字格式設定

SVG檔案格式是文本的。SVG映像和動畫具有以下文字格式設定所具備的特點：

(1)SVG映像中的文字也是文字格式設定

這一特徵完全區別與目前映像和動畫中的“文字”，準確地講，目前映像和動畫中的文字實質上都是映像。根據這一特徵，SVG中的文字可以作為關鍵詞被網路搜尋引擎所搜尋，並可藉此製作非常高效的Image Search引擎。使用者通過搜尋SVG映像所提供的關鍵詞能夠搜尋到相關SVG映像。

(2)SVG映像可由程式語言動態產生

例如可以利用JavaScript、Perl、java等程式語言開發齣動畫產生系統等。這一特性對於資料庫製表是非常有用的，線上SVG映像可根據資料庫中關係量即時地進行動態改變。

(3)SVG完全支援DOM(文件物件模型)

DOM(Document Object Model,文件物件模型)是一種文檔平台，她把文檔看成是由一系列元素組成的節點樹，允許程式或指令碼動態儲存或上傳檔案的內容、結構或樣式。

利用為SVG定義的DOM，通過指令碼語句可以很方便的做出SVG動畫。SVG以及SVG中的對象可以通過指令碼語言接受外來事件的驅動，例如滑鼠動作(OnClick)、鍵盤動作等實現對自身或對其他物件、圖形的控制，製作互動映像和動畫。

(4)SVG跨平台作業

因為SVG映像是純文字格式，因此不受操作平台的限制，並可以很好的解決相關的外部輸出、色彩模式、網路頻寬等一系列問題。

(5)可二次編輯性

跟同為向量映像的flash格式相比，此點表現得尤為突出。SWF是flash的輸出檔案格式，作為最終的動畫產生格式，其創作過程封裝在SWF中，無法進行二次編輯，flash一旦輸出成SWF檔案就無法修改了，除非你擁有原始的fla檔案。這一點雖說在智慧財產權保護方面很有意義，但對於資源的更新和利用就顯得不方便了。對於SVG來說，因為它是一種文字格式設定，具有與html類似的結構和文法，只需利用記事本就可開啟並進行編輯。

三、SVG的應用

(1)網路發展的需要，與其它開放標準相容

SVG是網路中解決向量映像的工業標準。作為w3c的推薦格式，SVG與現有的其他開放標準有很好的相容性。這些標準包括dom1，dom2，css，xml，xsl，smil，html，xhtml等。相比較目前現有的網狀圖像格式如gif，jpeg，SWF等，SVG更適合網路發展的需求，開發和應用SVG意味著獲得一個更優秀的工具和方法。

(2)資料表格，映像地圖

在應用領域，SVG可以非常適宜的應用在資料表格和映像地圖中。在SVG的源檔案中，通過變數可以很方便的控制需要的圖形產生。這就為網狀圖形資料表格提供了很大的應用前景。

製作圖形地圖同樣是SVG的一大優勢。由於SVG是向量格式，映像可以在任何顯示解析度下獲得同樣的映像效果，檔案放大觀看是也不會有任何的品質損失，因而完全可以製作出包含地理資訊和文字資訊的映像地圖，而且還能具有互動性和搜尋功能。

(3)無線裝置的需求

SVG另一個非常誘人的應用前景就是開法裝置的圖形和動畫。利用SVG，只要在無線裝置中安裝一個文本解析器，就可以實現對SVG檔案的識別和顯示；同時，因為是向量的文字檔，檔案的大小不會很大，非常適合無線產品的網路傳輸。SVG還提供動畫和多媒體編輯功能，所以可以支援二維的平面動畫，支援音效檔和視頻檔案的播放。結合一些其他技術(smil),就可以實現建立一個非常理想的多媒體無線終端解決方案。

(4)Image Search引擎

在SVG映像中，資訊是文本形式的，是開放形式的。文字獨立於圖形資訊，這就為Image Search和查詢提供了可能。例如，在一個SVG動畫中，通過搜尋某一個關鍵字，就可以在映像中查詢到對應的資訊。而這對於同樣是向量映像和動畫格式的SWF就不可能實現。依據SVG的這種互動性，可以建立大型的Image Search引擎。

(5)可實現圖形的web發布

因為SVG具有許多適於網路應用的功能特點，比如說開放性、可二次編輯性和良好的壓縮品質，非常適於二維向量圖形檔案的web發布，成為研究的熱點。比如《基於SVG的甲骨文網路平台的設計與實現》、《SVG與建築設計圖的web 發布》等。

(6)動態產生圖形

在伺服器端, 從資料庫中抽取更新的資料, 轉換成XML 文檔, 利用DOM對文檔進行解析, 形成SVG檔案。用戶端瀏覽器利用SVG外掛程式實現對映像的瀏覽。比如《基於SVG的映像資訊即時發布模式》、《基於XML - SVG的映像動態更新與動畫演播系統實現》等。

四、總結

SVG作為xml的一種詞彙表，具有xml的許多優點，如良好的資料存放區格式，可擴充性，高度結構化，便於網路傳輸等，具有無限的前途。但介於目前SVG還沒有得到瀏覽器的支援，使用者還需下載專門的外掛程式才能瀏覽。