| 來源：http://dslab.ee.ncku.edu.tw * SVG將在不久的未來成為網(wǎng)頁向量圖形（vector graphic）及動畫（animation）的公認標準。
* SVG 本身可以純粹被視為圖形及動畫的格式，它也可以與 XML、JavaScript、SMIL 以及 HTML 等相結(jié)合而產(chǎn)生豐富多樣的應(yīng)用。
* SVG 就是用來解決網(wǎng)頁上圖形及動畫呈現(xiàn)的新技術(shù)。 * W3 Consortium 最近才擬定 SVG 的建議參考標準 ，也就是說這項標準的制定即將完成，很快就會內(nèi)建在網(wǎng)頁瀏覽器及 XML 瀏覽器上了。
SVG提供了三種圖形物件：第一種就是向量圖形(長方形、圓形、三角形、多邊形…等)、第二種是影像(也就是點陣圖形)、第三種是文字(可對文字做特效且有搜尋的能力)。并有檔案小、動畫、樣式功能以及和使用者互動的能力。
透過這三種物件的交替使用，就可以繪製生動漂亮的圖形了。接下來就來說明有關(guān)于SVG的一些標籤語法。
網(wǎng)站連結(jié)：http://www.w3.org/Graphics/SVG/Overview.htm8
要完完整整的介紹SVG的寫作方法與技巧，可能會花費掉太多的篇幅，而學習最快的方式就是范例，希望能夠藉由范例的展示，從中了解SVG的奧妙以及SVG所能夠達到的功能，進而喜歡上SVG。
當您安裝Adobe SVG Tools讓您的瀏覽器也能看SVG格式之后，可以先連上Adobe的SVG測試網(wǎng)頁 ，看看是否真的可以使用了，如您看到如上面標題旁的時鐘圖，就表示您的瀏覽器可以觀看SVG格式了。
參考 Adobe 更詳盡的SVG網(wǎng)站 ，里面提供了 plug-in、范例以及一些其他的好東西。
范例 1
這一個范例示范了繪製直線的SVG語法。范例中，在X座標100,300,500,700,900共繪製五條長度200 pixel的直線。
直線范例
<?xml version="1.0" standalone="no"?>
<svg width="15cm" height="5cm" viewBox="0 0 1000 300"
xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<desc>直線范例</desc>
<line x1="100" y1="100" x2="100" y2="300"/>
<line x1="300" y1="100" x2="300" y2="300"/>
<line x1="500" y1="100" x2="500" y2="300"/>
<line x1="700" y1="100" x2="700" y2="300"/>
<line x1="900" y1="100" x2="900" y2="300"/>
</svg>
范例 1瀏覽結(jié)果 
圖 1 范例 1 執(zhí)行結(jié)果
范例 2
這一個范例示范了如何繪製圓形的SVG語法。范例中，在座標(100,350)、(300,350) 、(700,350)共繪製三個紅色綠色、藍色的圓形圖形。
圓形范例
<?xml version="1.0" standalone="no"?>
<svg width="15cm" height="10cm" viewBox="0 0 1500 1000"
xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<desc>圓形范例</desc>
<circle cx="100" cy="350" r="100"
fill="red" stroke="blue" stroke-width="5" />
<circle cx="300" cy="350" r="200"
fill="green" stroke="blue" stroke-width="5" />
<circle cx="700" cy="350" r="300"
fill="blue" stroke="blue" stroke-width="5" />
</svg>
范例 2 瀏覽結(jié)果
范例 3
解釋：
1到4行：應(yīng)該不需做多大的解釋，XHTML1.1 + MathML2.0 + SVG1.1 所用的文件型態(tài)宣告。
5行：唯一需注意的是 xml:lang 表示這份文件是給 zh-TW 地區(qū)使用的。
9行：會把 rect1 所表示的方塊涂成紅色。
10行：當滑鼠移到 rect1 方塊上方時，會涂上10像素大小的藍色邊框。
11行：把text1 所表示的文字涂上綠色，并使得文字的大小為 16 點。
15到24行：是文件物件模型的用法，首先為 rect1 所表示的方塊登記一個事件：當點選 rect1 方塊時，執(zhí)行Go()函數(shù)。而函數(shù)的功能是把方塊從(20,20)移到(50,100)。
29行：svg 元素代表這是可變式向量圖形，它的名稱空間為 http://www.w3.org/2000/svg，這是一定要寫上去的并且指定可變式向量圖形的版本。
30行：在位置(20,20)處畫上寬100高100的正方形。
31行：在位置(40,50)處畫上文字"點我一下"并使得文字旋轉(zhuǎn)15度。
看起來就像這樣：
(圖：當在方塊的上方按一下時，方塊即會從(20,20)移到(50,100))。 |
