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