1、背景
SVG是Scalable Vector Graphics的縮寫，意為可縮放矢量圖形。1998年，萬維網聯盟成立了一個工作組，研發一種通過XML來表現矢量圖形的技術——SVG！由於SVG也是一種XML文件，所以SVG也繼承了XML的開放性、可移植性和交互性的優點。如今幾乎所有主流的瀏覽器都支持SVG，大家可以從這里得到更多的兼容信息，其中包括：
- 使用<embed>或者<object>元素來顯示基本的SVG圖形；
- 使用<img>來顯示SVG圖形；
- 將SVG圖形應用為CSS背景圖；
- 直接在HTML文檔中使用<svg>標簽（需要HTML5支持）；
- 對使用CSS或者外部對象元素的HTML元素使用SVG變換、濾鏡等特效；
- 對SVG對象使用類似photoshop的效果，包括模糊和色彩處理；
- 對SVG圖像使用動畫；
- 使用SVG格式的字體；
2、圖形系統
目前在計算機上主要有兩種形式來表現圖形，一種是柵格圖形，另一種是矢量圖形。
2.1 柵格圖形
在柵格圖形中，圖像用像元或者像素的矩形陣列來表示，每個像素代表一個RGB顏色值或者是一個指向顏色列表的索引。通常以一種壓縮格式來存儲（如JPEG, GIF, PNG等），由於現在大部分的顯示設備都是柵格設備，所以顯示這些圖形只需要做解壓處理就可以了。
2.2 矢量圖形
在矢量圖形系統中，圖形被描述為一些列的形狀，它是特定坐標的集合。顯示矢量圖形需要按照特定的命令來繪制這些坐標，然后顯示在屏幕上。矢量圖形是對象，而不是一系列的像素。它們可以改變顏色、形狀還有大小，圖形中的文字都是可以被檢索的，這些與柵格圖形都有很大的不同。
2.3 為什么要使用矢量圖形
絕大部分情況下，我們都在使用柵格圖形，而且創建柵格圖形的工具更容易獲得和使用。但是矢量圖形有一個柵格圖形無法替代的優勢：無論如何的縮放，矢量圖形都不會失真。這使得當我們需要具有精確測量以及看清圖形細節的放大能力時，矢量圖形顯得尤其重要。
3、創建一個SVG圖形
下面首先創建一個SVG圖形，這里我並不會詳細的講解各個標簽，只是先給一個感性的認識，隨后的章節會對SVG的語法做詳細的介紹。看代碼：
1 <?xml version="1.0"?> 2 <!DOCTYPE svg PUBLIC "//W3C//DTD SVG 1.0//EN" "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd"> 3 <svg width="140" height="170" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg"> 4 <title>cat</title> 5 <desc>Stick Figure of a Cat</desc> 6 <circle cx="70" cy="95" r="50" style="stroke: black; fill: none;"/> 7 <circle cx="55" cy="80" r="5" style="stroke: black; fill: #339933"/> 8 <circle cx="85" cy="80" r="5" style="stroke: black; fill: #339933"/> 9 <g id="whiskers"> 10 <link x1="75" y1="95" x2="135" y2="85" style="stroke: black;"/> 11 <link x1="75" y1="95" x2="135" y2="105" style="stroke: black;"/> 12 </g> 13 <use xlink:href="#whiskers" transform="scale(-1,1) translate(-140,0)" /> 14 <!-- ears --> 15 <polyline points="108 62, 90 10,70 45, 50 10, 32 62" style="stroke: black; fill: none;" /> 16 <!-- mouth --> 17 <polyline points="35 110, 45 120, 95 120, 105 110" style="stroke: black; fill: none;" /> 18 <!-- nose --> 19 <path d="M 75 90 L 65 90 A 5 10 0 0 0 75 90" style="stroke: black; fill: #ffcccc;" /> 20 <text x="60" y="165" style="font-family:sans-serif; font-size:14pt;"> 21 Cat 22 </text> 23 </svg>
可能大家已經看出來了，這實際上是一個標准的XML文件，在瀏覽器中瀏覽，會看到一只貓的圖案，如下圖：
另外，由於很多人習慣了HTML5式的文檔模式，即
1 <!DOCTYPE HTML> 2 <html lang="en-US"> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 </head> 7 <body> 8 9 </body> 10 </html>
將命令空間省略，這里強烈的建議寫SVG的時候保留命名空間，即
xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg"
后面你會看到因為忽略命令空間而引發的異常。
4、應用SVG圖形
如何才能夠在HTML文檔中引入SVG呢？一般有一下幾種方法
- 包含在<svg>標簽內部
這是一種最直接的方法，但是需要瀏覽器支持HTML5中的<svg>標簽，如：
1 <!DOCTYPE HTML> 2 <html lang="en-US"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>SVG DEMO</title> 6 </head> 7 <body> 8 <svg width="140" height="170"> 9 <title>cat</title> 10 <desc>Stick Figure of a Cat</desc> 11 <circle cx="70" cy="95" r="50" style="stroke: black; fill: none;"/> 12 <circle cx="55" cy="80" r="5" style="stroke: black; fill: #339933"/> 13 <circle cx="85" cy="80" r="5" style="stroke: black; fill: #339933"/> 14 <g id="whiskers"> 15 <link x1="75" y1="95" x2="135" y2="85" style="stroke: black;"/> 16 <link x1="75" y1="95" x2="135" y2="105" style="stroke: black;"/> 17 </g> 18 <use xlink:href="#whiskers" transform="scale(-1,1) translate(-140,0)" /> 19 <!-- ears --> 20 <polyline points="108 62, 90 10,70 45, 50 10, 32 62" style="stroke: black; fill: none;" /> 21 <!-- mouth --> 22 <polyline points="35 110, 45 120, 95 120, 105 110" style="stroke: black; fill: none;" /> 23 <!-- nose --> 24 <path d="M 75 90 L 65 90 A 5 10 0 0 0 75 90" style="stroke: black; fill: #ffcccc;" /> 25 <text x="60" y="165" style="font-family:sans-serif; font-size:14pt;">Cat</text> 26 </svg> 27 </body> 28 </html>
- 通過<embed>或者<object>標簽嵌入
其中DEMO1.svg是先前創建的SVG文件。
1 <!DOCTYPE HTML> 2 <html lang="en-US"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>SVG DEMO</title> 6 </head> 7 <body> 8 <embed src="DEMO1.svg" type="image/svg+xml" width="140" height="170"> 9 <object data="DEMO1.svg" type="image/svg+xml" width="140" height="170"></object> 10 </body> 11 </html>
- 通過<img>標簽的src屬性
1 <!DOCTYPE HTML> 2 <html lang="en-US"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>SVG DEMO</title> 6 </head> 7 <body> 8 <img src="DEMO1.svg" width="140" height="170" alt=""> 9 </body> 10 </html>
- 通過CSS：background: url(...)
1 <!DOCTYPE HTML>
2 <html lang="en-US">
3 <head>
4 <meta charset="UTF-8">
5 <title>SVG DEMO</title>
6 <style type="text/css">
7 #cat{
8 width: 140px;
9 height: 170px;
10 background: url(DEMO1.svg) no-repeat;
11 }
12 </style>
13 </head>
14 <body>
15 <div id="cat"></div>
16 </body>
17 </html>
所有的方法都產生同樣的結果，如上圖所示。
重要聲明：本文所用的圖片以及示例來自於http://commons.oreilly.com/wiki/index.php/SVG_Essentials/Getting_Started