SVG是基于XML的專門為網絡而設計的圖像格式。本文給出了SVG的幾個簡單例子，并與其它矢量圖形格式VML、PDF、SWF進行比較，展示了 SVG的優點和美好前景。
什么是SVG
SVG(Scable Vector Graphics，可升級矢量圖像)是一種基于XML的開放的矢量圖形描述語言。SVG圖像是與XML1.0兼容的文檔，SVG元素是指示如何繪制圖像的一些指令，閱讀器(Viewer)解釋這些指令，把SVG圖像在指定設備上顯示出來。使用SVG可以在網頁上顯示出各種各樣的高質量的矢量圖形，支持很多您想象得出的功能：幾何圖形、動畫、漸變色、濾鏡效果等。最關鍵的是，它是完全用普通文本來描述的！也就是說，這是一種專門為網絡而設計的基于文本的圖像格式。
1999年2月，SVG草案出臺，經過不斷地修改更新，最終形成了第一份實驗性的實現規范。2001年7月，W3C正式發布了SVG圖像格式建議書，這就是SVG1.0規范。目前，該規范是被提議的推薦標準，到8月底將成為W3C的正式推薦標準。W3C對SVG的解釋是：SVG是一種使用XML來描述二維圖像的語言。它允許3種形式的圖像對象存在，分別是矢量圖形、點陣圖像和文本。各種圖像對象能夠組合、變換，并且能修改其樣式，也能夠定義成預處理對象。文本是XML名字空間中的有效字符，這些字符能被作為SVG圖像的關鍵字而存留在搜索引擎中。SVG的功能包括嵌套變換、路徑剪裁、透明度處理、濾鏡效果以及其他擴展，同時，SVG支持動畫和交互，也支持完整的XML的DOM接口。任何一種SVG圖像元素都能使用腳本來處理類似于鼠標單擊、雙擊以及鍵盤輸入等事件。因為同Web標準兼容的緣故，SVG還能夠在同一個Web頁面里憑著繼承自XML的名字空間等特性來完成一系列交互操作。
SVG都有哪些優點
- 基于XML標準
XML是公認的下一代網絡標記語言，擁有無窮的生命力。SVG在最開始設計的時候就基于XML，這使得它具有一種先天的優勢，并且同HTML、CSS、DOM、XSL、JavaScript、CGI一樣，成為新的標準。
- 高質量的圖像
由于基于矢量，使得SVG圖像的質量得到大大的提高。放大、縮小以及各種特效都比位圖的表現要好，在打印的時候，完全可以以印刷質量輸出圖片。SVG圖像在客戶端動態繪制，用戶可以隨意調整圖像的一些參數而不會導致圖像模糊。SVG圖像的大小只與圖形的復雜程度有關，而與圖形的具體尺寸無關。
- 靈活易用的文件格式
SVG主要由３個部分組成：矢量圖形、位圖和文字。由于SVG文件是以文本的形式（XML）存放的，更改起來是非常方便的。也就是說，可以不用任何圖像處理工具，僅僅用記事本就可以生成一個SVG圖像！在頁面運行的過程中，我們也可以對很多部分做修改。而其中的圖形描述又可以被任何人重復的使用。
- 支持交互和動畫
SVG支持SMIL（synchronized multimedia integration language），使得用戶可以自由的同SVG中的元素完成一些交互的動作，從而完成既定的目標，這一點在目前單獨依靠圖片是完成不了的，需要由網頁中的Script語句來實現。
- 支持字符查找
查找"圖片"中的字符，在SVG中成為可能。而這在其它格式的圖片文件中則是不可思議的？！
- 支持Xlink 和Xpointer
這意味著我們可以在SVG文檔之間制作超鏈接，這使我們擁有一種能力，可以制作一個完全由SVG構成的WEB站點！這個站點可以包含圖片、文本以及擁有與用戶進行交互的能力。Andrew Watt就制作了世界上第一個這樣的全SVG站點( http://www.svgspider.com) .當然你首先得要安裝一個SVG的閱讀器，推薦使用Adobe公司的 Adobe SVG Viewer 2.0,但它只能用在MS Windows和MacOS上。使用一個合適的Java虛擬，Apache的 Batik viewer可以運行在任何平臺上。
看到這么多優點，是不是覺得不可思議？好，下面我們從幾個小例子著手，揭開SVG的神秘面紗。
SVG的幾個簡單例子
任何人可以利用一個記事本來創建和編輯SVG圖像，但有時這樣做會很復雜?，F在有越來越多的工具開始支持SVG編碼，可以減輕我們的工作。比如：從Adobe Illustrator 9.0和CorelDraw9開始就可以制作極度復雜的SVG圖形。雖然SVG的語法和格式仍是XML規范的一部分，但SVG有其自己的一些基本概念、SVG的渲染模型、SVG數據類型與坐標系設置等，詳細內容請參照 參考資料。
一個最簡單的例子：
例1 一個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">
<rect style="fill:#ff13e2;" width="250" height="100"/>
<text style="fill:blue;" y="15">Hello World!</text>
<path d="M 50 50 L 250 30 L 200 90 z"/>
</svg>
|
SVG文檔(通常以后綴.svg存放)總是以根元素開始。和標記內是SVG的圖像描述語句。我們可以定義一個視口坐標系和用戶坐標系，缺省的情況下兩者是一致的，度量單位也相同，如果屬性值沒有帶單位，則使用用戶坐標系的長度單位-像素（px）。大多數情況下，用戶坐標系的原點處在視口的左上角，X軸的正向朝右，Y軸的正向朝下，即如果不進行坐標變換，一切渲染都是以初始坐標系為準。例1中的SVG首先畫了一個矩形，然后寫了一段文字，接著利用路徑元素畫了一個三角形，最后顯示效果如圖1所示：
圖1 在瀏覽器中顯示例1的結果
SVG提供了一種通用的路徑式元素（path），可以用來創建龐大復雜的圖像對象，像電子設計、流程圖、統計繪畫等領域有大量固定的符號，SVG不可能全部囊括。SVG規范允許用戶定義自己的符號，可以將自定義的符號創建、重用、發布而不需要其他額外的手段，更不需要一個什么委員會來批準注冊，這種自由靈活的風格更加擴展了SVG的功能。
SVG提供的另一個很重要的功能是超級鏈接。在HTML網頁中，圖像和鏈接是分離的，圖像作為外部文件而存在，鏈接則在HTML中說明，這樣雖然有靈活和可重用的優點，卻不易管理。而Flash的SWF矢量格式則相反，圖像中內嵌鏈接，兩者成為一個整體，雖然方便，但卻不能重用。SVG則綜合了兩者的優點，其超級鏈接以明文的形式內嵌于文檔內部，在形式上是一個整體，而且也有利于修改。由于SVG是基于XML的，象"xlink" 和 "xpointer"等都是XML特有的，所以SVG就自然而然獲得了XML所定義的鏈接的好處和功能。
把例1稍做修改，對那個黑三角加上一個超級鏈接，如例2所示：
例2 超級鏈接的例子
......
<a xlink:>
<path d="M 50 50 L 250 30 L 200 90 z"/>
</a >
......
|
當鼠標指針移到黑三角上時就變成了手的形狀，狀態欄上也顯示了此鏈接所指向的URL。例2只是一種常見的情況，實際上SVG中超級鏈接標志符的定義格式有3種：
- 通過SVG元素的"id"屬性對元素進行鏈接與標識。如somfile.svg#someplace。
- 使用與XML兼容的"xpointer"。如somefile.svg#xpointer(id("someplace"))。
- 使用SVG的"viewBox"說明。
SVG作為一種適用于網絡的圖像格式，不僅僅在于它的體積小、易修改、可縮放等與普通矢量圖形一樣的優點，還在于它添加有針對網絡的交互功能。SVG圖像可以內嵌交互定義。單獨的一個SVG文件和一個客戶端的SVG解釋器便可以完成網頁中鏈接、動畫、交互等大部分功能。與Flash的SWF格式基于"幀"的二進制數據流不同，SVG是完全基于ASCII字符的文本。例3是一個交互的例子。
例3 SVG利用<script>元素進行交互的例子
<?xml version="1.0" standalone="no"?>
<!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 width="6cm" height="5cm" viewBox="0 0 600 500">
<script><![CDATA[
function rect_mousemove(evt){
var rect01 = evt.target;
var currentwidth = rect01.getAttribute("width");
var currentheight = rect01.getAttribute("height");
rect01.setAttribute("width",currentwidth*2);
rect01.setAttribute("height",currentheight*2);
}
function rect_mouseout(evt){
//.....
}
]]>
</script>
<rect x="100" y="100" height="100" width="200"
onmouseover="rect_mousemove(evt)"
onmouseout="rect_mouseout(evt)"/>
</svg>
|
<script>元素中定義了兩個函數來分別響應鼠標的兩個事件。關于SVG中腳本的語句，讀者可以參考有關JavaScript的書籍。
SVG不但能夠實現交互，而且能夠實現動畫。動畫與交互在某些方面是相通的，比如都可以利用腳本語句來執行一些動態效果，都能實現可視化元素的增、刪、改等功能。只是交互一般由事件來觸發，而動畫可以"我行我素"，不需要外界干涉。SVG中的動畫只說明某個屬性或樣式的值在動畫過程中的起止時刻、變化速度等關鍵參數，動畫的中間效果完全靠SVG客戶端解釋程序來渲染完成，因此其生成的動畫文件有著比SWF格式的文件更加短小精悍的優點。關于動畫，本文就不舉詳細的例子了，有興趣的讀者可參見參考文獻6。
SVG、VML、FLASH、PDF之間的比較
過去在XML矢量圖形的發展上，有兩派人馬互相較勁。一派以Adobe為首，提倡PGML，另一派由微軟、MacroMedia為代表，鼓吹VML(IE5以上支持VML)，在這兩套提案呈遞給W3C后，W3C融合各家之長，促成了SVG的誕生。
SVG建立于純文字格式的XML之上，直接繼承了XML的特性，簡化異質系統間的信息交流，方便數據庫的存取。SVG可以直接融入XML和XHTML網頁中，可以直接利用瀏覽器已有的技術，如CSS、DOM、Javascript，達到動畫及DHTML般的動態效果，支持單向和多向鏈接等等。更重要的是SVG是W3C制定的網絡標準，不受單一的公司控制。
MacroMedia Flash 的SWF格式提供矢量和動畫功能，但Flash必須要依靠瀏覽器外掛程序(插件:Plug-ins)，而且因為Flash的格式是二進制的，Flash中的文字內容無法讓使用者在瀏覽器中做字符串搜索，這樣的網頁也無法讓搜索引擎索引來供用戶做全文檢索。此外，高互動性的多媒體動畫，往往需要編程來實現，在這一點上Flash也有先天的不足，Flash和JavaScript之間的互動，只能通過比較狹窄的FSCommand來做橋梁。當然，盡管Flash有上述這些缺陷，但時至今日，它仍是網上矢量動畫最好的解決方案。
PDF(Portable Document Format，便攜文件格式)是由Adobe公司開發而成的一種電子文檔格式。它可以將文字、字型、格式、顏色、圖形圖像、超文本鏈接、聲音、動態圖像等信息封裝在一個文件當中。PDF從頁面描述語言PS(PostScript)發展而來，具有與PS幾乎相同的頁面描述能力和相似的描述方法。但與PS不同的是，PDF除了能描述復雜版面外，還具有交互功能(如超鏈接、交互表單等)、頁面隨機存取及字體仿真描述等特性。因此，PDF不僅適合印刷出版，而且也適合電子出版。PDF文件特別適合打印以及在屏幕上閱覽，具有加密功能以及能夠跨平臺創建和閱覽，支持全文檢索。但是，由于PDF不是基于XML格式的，因此也就喪失了XML所能帶來的所有好處和優點，例如我們可以僅用一個記事本就可以創建或修改一個SVG文檔，而制作一個PDF文檔呢，主要途徑不外乎有3個：用專門的PDF制作工具軟件進行制作；將包含有Postscript頁面描述語言的文件轉換成PDF文檔；利用轉換工具把其他格式文件(如DOC、HTML等)轉換成PDF文檔。相比之下，優劣立現。另外PDF不能制作動畫，所以PDF的流行范圍也僅限于電子文檔的發布。
SVG的美好前景
統一的標準和開放性是SVG的強大生命力所在。我們可以想象SVG流行起來以后的景象：由于XML的Parser是可以免費得到的，而且標準也是公開的，所以除了將SVG應用在網頁上或作為獨立應用程序執行外，它應該可以跑在任何標準設備上。會有那么一天，你在出差前在Illustrator里面制作一張圖片，然后作為附件發送給公司的同事。公司的同事在收到以后，如果需要在圖片的文字上作一些改動，她就會直接用寫字板程序打開你的圖片文件，改正需要改動的文字，再保存起來。由于你已經到達外地，而又不能馬上接入互聯網，所以你的同事會直接把圖片發送到你的手提電話上。你的支持SVG的手提電話會直接在屏幕上顯示你想要看到的圖片，這時你發現你畫的圓的比例不太正確，不過沒有問題，你并不需要一個大型的制圖軟件，你需要的只是手提電話里面內置的一個文本編輯器就能夠完成修改了。
相信我，有一天（這一天可能不遠的，因為今天我們已經有了SVG，我們還會不斷的有新的標準），你可能會煞有介事的從手提電話向你的冰箱傳送圖片，僅僅是為了更改你已經看的不耐煩了的液晶操作面板。
由于SVG使用XML語法，我們可以使用XSLT從XML數據中生成SVG。我們還可以很容易地對以XML格式存放的數據制作一個圖形表示。例如，對于一個包含玩具生產商所占市場份額的XML文檔，我們可以用SVG創建一個餅圖來方便比較！
記住，這一切的前提就是：公開的，標準化的，跨平臺的時代的到來。
一些有用的鏈接
-
http://www.SVGSpider.com
- 世界上第一個全部用SVG制作的網站,該網站有許多非常好的例子,推薦訪問.
-
http://www.adobe.com/svg/
- 可以從這個站點下載Adobe SVG Viewer,另外還有許多 Adobe's SVG 工具的鏈接, 和SVG的例子.
-
http://www.kevlindev.com
- 該網站有非常有用的SVG教程 .
-
http://www.w3.org/TR/SVG/
- 有最新的SVG規范.
一些主要的SVG圖像閱讀器,制作以及轉換工具
參考資料