工業標準的向量映像格式—-SVG

工業標準的向量映像格式----SVG 

什麼是SVG

SVG，是可任意放縮向量映像格式（Scalable Vector Graphics）的簡稱。它基於XML(可擴充標識語言），是一個全新的標準開放 的向量映像和動畫格式。SVG不同於傳統的二元（平面）映像和動畫製作，它使用簡單的一元（文本）語句,完成向量映像，以及諸如色彩變化,對象運動,濾鏡 和遮照，音效添加等各式動畫效果。SVG創造一個利用純文字完成網路多媒體的神話。

SVG的特點

    向量映像

　　映像通常分為向量映像和位元影像映像。
　　向量映像利用點和線等向量化的資料描述映像，並在圖形中包含色彩和位置資訊。向量映像的最大優點是"解析度獨立"。當顯示或輸出映像時，映像的品質不 受裝置的解析度影響，能夠提供高清晰的畫面。向量圖相對位元影像而言，更適合用於直接列印、印刷或輸出到一些小型裝置如手提裝置上。 放大和縮小向量圖不會影 響映像品質。
而位元影像映像則使用我們稱為像素的一格一格的小點來描述映像。電腦的螢幕其實就是一張包含大量像素點的網格。位元影像映像受到解析度的影響。因此常常出現映像邊緣鋸齒和放大後"馬賽克"現象。相對而言，位元影像需要的儲存空間要比向量圖更多。
　　SVG作為向量映像格式，同樣具備了向量圖的諸多優點，更適合在網路中傳輸和應用。SVG除了向量圖的優勢，也同樣保持了對位元影像映像的正確表達功能。使用XML中的XLINK(擴充連結）標籤，SVG也可以在映像中調用位元影像映像。 

　　向量濾鏡

　　雖然SVG映像做為向量圖格式，具有很多優點。但我們也看到，仍然有很多的映像設計師傾向於使用位元影像創作。這是因為位元影像常常可以使用大量的濾鏡效果、紋理貼圖和空間幻影等，加強映像的視覺效果。 
但因為位元影像的創作是直接針對像素操作，所以，一旦完成效果的添加，設計師幾乎無法再進行修改。例如，輸出一幅霧化效果的位元影像映像，您已經無法再恢複原來清晰的映像。 
　　而如果使用SVG支援的向量濾鏡，設計師同樣可以創作出大量流行的和普遍的濾鏡效果。並且，這樣的濾鏡效果是可調整的。因為SVG的向量濾鏡並不直接 針對像素進行操作，而是作為某一個對象的獨立屬性儲存在檔案中。修改映像效果只需要重新調整這些屬性，就可以完成對濾鏡的修改、替換和刪除，非常的便捷。 SVG的向量濾鏡對於遠程協作和二次編輯，提供了極大的自由度。
　　關於濾鏡的執行個體，請參看<<SVG中文教程>>。 

　　基於XML

　　SVG的文法和結構基於XML（可擴充標識語言）。XML是下一代的網路開發語言，它提供的功能遠遠超過了目前使用的HTML（超文本連結語言）。當 一個網站變得越來越複雜的同時，為了獲得更好的管理和互動，網站開發人員同樣需要一個比HTML更優秀的網路開發語言和工具。這就是XML。
　　與HTML不同，XML完全分離了網站內容和網站構架。通過定義結構資料類型，使用者端應用程式能夠顯示和處理，而不僅僅像HTML那樣僅僅能顯示，網 頁或資料。例如，一個利用XML標籤定義的電話號碼，可以根據需要，由瀏覽器進行撥號。XML所具有優秀的擴充性，使得它在網路工業應用上，比HTML有 著更大的空間和前景。 
SVG的開發和創作是基於XML的，因此，我們也能在SVG中開發出更多新的功能以提供更多的網路服務。例如，製作智能化的資料映像。映像中的資料可以根據需要，由應用程式讀取、修改和統計並最終在映像中顯示。這些應用是目前HTML及相關映像技術遠不可及的。 

　　文字格式設定

　　SVG檔案是一元（文本）格式的。SVG映像和動畫具有了以下文字格式設定所具備的特點：
　　1、作為基於文本的格式，SVG映像中的文字也是文字格式設定。這不同於現在映像和動畫中的文字。目前映像和動畫中的文字實質上都是映像。因此，SVG中 的文字可以被網路搜尋引擎做為關鍵詞搜尋。利用這一性質，通過SVG中定義的文字，就可以製作出非常高效的Image Search引擎。映像中的文字也可以被使用者瀏覽器 尋找。
　　2、SVG映像可以方便的由程式語言來動態產生。例如使用javascript,perl,Java等語言，開發自動映像和動畫產生系統。這對於一些資料庫製表是非常實用的。線上映像還可以根據後台資料庫中的關係量即時的進行動態改變。 
　　3、SVG完全支援DOM(文檔物件模型)。因而SVG以及SVG中的對象可以通過指令碼語言接受外來事件的驅動，例如滑鼠動作、鍵盤動作等，實現對自身或對其他物件、映像的控制，製作互動映像和動畫。 
　　4、因為是文字格式設定，SVG可以很好的跨平台工作，同時，還可以解決相關的外部輸出、色彩模式、網路頻寬等問題。
　　簡言之，文字格式設定使得SVG獲得了與其它技術標準更大的互動和融合的特點。

　　與GIF，JPEG比較

　　GIF，JPEG都是目前網路普遍使用的位元影像格式。SVG較GIF和JPEG有很多獨特的優勢：
　　1、具有很高的映像品質。因為是向量映像，解析度獨立，使用者可以自由的放縮映像而不會破壞映像的清晰度。這對於查看某些映像細節例如資料映像中的數字，非常的有用。
　　2、映像中的文字獨立。如上一小節所述，SVG映像中的文字獨立於映像，可以進行文本編輯和查詢。
　　3、較小檔案尺寸。因為基於向量格式，由陳述式完成映像的儲存，SVG映像相比較GIF和JPEG具有更小的檔案大小,下載更加迅速。 
　　4、色彩適應性更強。SVG映像具有一個1600萬色彩的調色盤,支援ICC（國際色彩協會)色彩標準,支援RGB色彩模式。 
　　5、可互動性。SVG基於XML，因而能輕易的製作強大的動態互動。SVG映像能對使用者動作做出不同響應，例如高亮,聲效,特效,動畫等，體現了網路互動的本質。而GIF，JPEG都不可以產生互動。

　　與SWF比較

　　SWF檔案格式是Flash的輸出檔案格式。從某種意義上，SWF與SVG有很多驚人的相似之處。但是，儘管Flash憑藉其優越的表現形式和便利的 創作工具成為目前網路動畫設計的首選，SWF日益在網路中普及，但我們也應該看到，與SVG相比較，SWF存在著以下的不足：
　　1、SWF是一個非開放標準。這就意味著該技術掌握在個體手中，技術的發展受到方方面面的限制。同時，SWF與其他的開放標準也沒有完整的融合方案。 儘管SWF目前已經提供了對XML的支援，但這種支援是單方面的。隨著XML及其他開放標準的發展，SWF的不協調性將日益顯著。
　　2、SWF的可編輯性不如SVG。SWF做為最終的動畫產生格式，其創作過程封裝在SWF檔案中，幾乎無法再進行二次編輯。同時，SWF也不提供對文字格式設定的支援，因此，無法獲得類似SVG的查詢映像中文字的功能。

SVG的應用價值

    網路發展的需要,與其他開放標準相容

　　如同PNG作為W3C的位元影像映像工業標準,SVG是網路中解決向量映像的工業標準.在SVG以前,除了Macromedia開發了SWF作為向量的網 絡檔案格式,還沒有其他的向量檔案在網路中應用.因為位元影像檔案受到本身的很多局限,在圖形印刷和傳輸中,向量檔案有很大的應用價值,所以,必定會有相應的 向量標準得到開發和應用,這就是SVG.
　　作為W3C的推薦格式,SVG與現有的其他開放標準有很好的相容性.這些標準包括DOM1，DOM2，CSS，XML，XPointer，XSLT， XSL，SMIL，HTML，XHTM等L.SVG與其他組織的標準化技術也能很好的協調一致，如ICC，URI，UNICODE，sRGB， ECMAScript/javascript，Java.
　　使用SVG並不意味著我們將從此放棄現在的網狀圖像技術如GIF，JPEG，SWF.相比較這些目前有普遍應用的檔案格式,SVG更適合網路發展的需求,開發和應用SVG意味著獲得一個更優秀的工具和方法.

　　資料表格,映像地圖

　　在應用領域,SVG可以非常適宜的應用在資料表格和映像地圖中.在SVG的源檔案中,通過變數可以很方便的控制需要的圖形產生.這就為網狀圖像資料表 格提供了很大的應用前景.一個簡單的例子,現有的asp可以方便的構建動態資料網頁,利用SVG,則可以同樣方便的繪製動態資料映像,例如資料分析中的柱 狀圖和餅狀圖.
　　製作映像地圖同樣是SVG的一大優勢.由於SVG是向量格式,映像可以在任何顯示解析度下獲得同樣的映像效果,檔案放大觀看時也不會有任何的品質損 失,因而可以完全可以製作這樣的映像地圖,其中包含了一個城市所有的地理資訊,檔案可以根據觀看這不同的需要,對不同的地區進行放大顯示,同時,每一個地 理名詞又可以獨立的包含一段文字說明,或者包含相應的地理資料,但使用者需要時,可以通過點擊地理名詞獲得解釋說明.這樣的映像地圖檔案的檔案大小也僅僅是 K位元組層級.

　　無線裝置的需求

　　SVG另一個非常誘人的應用前景就是開發無線裝置的圖形和動畫.例如目前使用的手機產品,其映像主要是WBMP.這種格式因為是位元影像檔案,受到傳輸大 小的限制,同時不提供彩色的色彩模式,所以顯得很呆板.而如果利用SVG,只要在無線裝置中安裝一個文本解析器,就可以實現對SVG檔案的識別和顯示,同 時,因為是向量的文字檔,檔案的尺寸不會很大,非常適合無線產品的網路傳輸.SVG還提供動畫和多媒體編輯功能,所以可以支援二維的平面動畫,支援聲音 檔案和視頻檔案的播放.結合一些其他的技術,例如SMIL(多媒體同步整合語言),就可以實現建立一個非常理想的多媒體無線終端解決方案.

　　Image Search引擎

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

　　網頁設計思想的改變

　　採用SVG進行網頁設計,是下一代的網頁設計思想.現在的網頁設計,通常是在位元影像映像軟體中繪製好整體頁面映像,然後進行映像切割,最後完成頁面的文 字編輯.通常這樣的工作是很繁瑣的,進行二次修改也很不簡便.而利用SVG,則可以實現頁面圖形設計和文字編輯的一步完成.如果要進行遠程協作完成網頁設 計,也只需要傳輸創作後的分頁檔,而不必將所有的映像源檔案和分頁檔都傳輸.
　　因為SVG能夠很好的與HTML和XML相容,所以,下一代的網頁編輯軟體將開始結合映像創作功能.許多現在需要通過外部映像或動畫軟體創作的效果,將可以直接在網頁編輯軟體中完成.
　　結合SVG創作網頁,將使網頁設計師真正可以"畫"出頁面.

    SVG的基本格式

與HTML相類似，基於XML的SVG，文法和格式也是結構化的。所謂結構化，也就是檔案中的對象通過特定的元素標籤定義，任何元素都可以作為對象進行管理，檔案是架構式的。掌握基本的檔案架構，就可以閱讀、編輯和創作自己的檔案。

　　SVG使用一組組的元素標籤，建立和組織檔案以及檔案中的對象。每一個SVG檔案都包含最外層的<svg></svg>標 簽。該標籤用於聲明SVG檔案的開始和結束。這等同於HTML檔案中的HTML檔案聲明標籤<html></html>。下面的 代碼是一個通常的獨立SVG檔案的頭部標識：

　　 <?xml version="1.0" encoding="iso-8859-1"?>
　　<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20000303 Stylable//EN"
"http://www.w3.org/TR/2000/03/WD-SVG-20000303/DTD/svg-20000303-stylable.dtd";>
　　<svg xml:space="preserve" width="5.5in" height=".5in">
　　...
　　</svg>

　　 其中，<?xml version="1.0" encoding="iso-8859-1"?>建立了"本檔案基於XML 1.0，編碼方式是iso-8859-1"的基本資料。
　　<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20000303 Stylable//EN" "http://www.w3.org/TR/2000/03/WD-SVG-20000303/DTD/svg-20000303-stylable.dtd";>雖然很長，但只要理解，它是一個注釋性的提示資訊。它聲明了檔案定義類型(DTD)。檔案定義類型(DTD)是一套用於定義元素、元素屬性和制定如何形成檔案的標準規則。根據特定的需要，DTD可以進行自訂。該行省略不影響SVG檔案的產生。
　　<svg xml:space="preserve" width="5.5in" height=".5in">
　　...
　　</svg>用於聲明SVG檔案主體的開始和結束，同時也聲明了映像容器的大小。映像容器也就是最後圖形或動畫的產生尺寸，相當於繪畫中使用的畫布。 

　　 SVG主體中的文法和格式定義,遵循XML標準。通過各類元素標籤和標籤對應的屬性來描述SVG對象。SVG對象主要包括圖形，路徑和文本。關於 SVG的對象,請參看<<SVG實戰講義>>,其中給出了SVG創作基本圖形,動畫,文字的一些例子.

　　 下面是一個調用mp3音樂的例子:

　　 <?xml version="1.0" standalone="no"?>
　　 <svg xmlns:a="http://www.adobe.com/svg10-extensions"; a:timeline="independent" width="100%" height="100%" viewBox="0 0 620 420"> 

　　 <a:audio xlink:href="follow.mp3" volume="10" begin="0s" repeatDur="indefinite">
　　 </a:audio>
　　 </svg>

　　 將上面的原始碼粘貼到windwos的記事本,選擇檔案類型為所有檔案,儲存檔案為*.svg(尾碼名自己填寫),同時在檔案儲存的檔案夾中放置一個名為follow的mp3檔案,如果您的瀏覽器安裝有SVG播放器,就可以聽見mp3音樂.

 

SVG創作工具

目前的SVG創作工具還處於開發和研製階段,仍然沒有一款非常成熟的包含靜態,動態,互動功能創作的軟體.這裡介紹幾個目前可以進行一些研究和測試的SVG創作軟體. 　　Adobe Illustator 　　Adobe在SVG的開發中扮演了重要角色.Adobe Illustrator 9.0是較早的一款結合SVG功能的向量創作軟體.目前可以進行靜態圖形的創作和部分互動功能的實現.其互動功能需要手寫javascript指令碼. 　　　　　　　 　　創作AI映像後,選擇File->Export(檔案->輸出),選擇檔案類型SVG,在SVG Option面板中設定相關屬性,可以輸出SVG檔案,關於屬性設定,請參看<