svg聽了很多遍了，一直沒有機會好好地了解一下這是個什么東西，今天突然有興趣，就好好看看吧~ 這篇文章主要參考的還是
w3school上的svg教程。
第一部分：簡介
ｓｖｇ就是scalable vector graphics, 即可伸縮矢量圖形。 我們平時下載icon時，就會遇到是否選擇svg格式的圖片的情況，
- SVG 用來定義用於網絡的基於矢量的圖形。
- SVG 使用XML格式定義圖形。
- 重要： SVG圖像在放大或改變尺寸的情況下其圖形質量不會損失！ 厲害啦
- SVG 時萬維網聯盟的標准，與2003年1月14日成為w3c的推薦標准。
- SVG 與諸如DOM和XSL之類的W3C標准是一個整體。
SVG圖形的優勢：
- SVG可以被許多的工具讀取和修改，記事本都可以！
- SVG與jpg和gif圖像比起來，尺寸更小，可壓縮性更強。
- SVG在任何的分辨率下都可以被高質量的打印。
- SVG可以在圖像質量不下降的情況下被放大。
- SVG文件時純粹的XML。
- 所有的瀏覽器都支持SVG文件，不過需要安裝插件的IE除外。
第二部分：實例
svg寫起來也非常簡單，如下所示：
<?xml version="1.0" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg"> <circle cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="red"/> </svg>
我們把這些代碼保存為.svg后綴的文件，然后點擊在瀏覽器中打開即可。
可以發現svg的特點是，我們必須在瀏覽器打開，而不像傳統的圖片那樣，可以在圖片查看器中打開。
好了，我們看一下上面的代碼在說什么吧（其實不難啊，主要是一堆固定的格式限制！）。
1. xml聲明
<?xml version="1.0" standalone="no"?>
第一行是在聲明這是一個xml文件， 注意其中的standalone屬性！該屬性規定svg文件是否是獨立的，standalone="no" 意味着 SVG 文檔會引用一個外部文件 - 在這里，是 DTD 文件。
2. 引入svg DTD文件
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
這一句就是引入dtd文件，含有所有允許的 SVG 元素。
3. 添加根元素<svg>
<svg width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg"> </svg>
SVG代碼一定要以<svg>元素開始，並且以</svg>元素結束。svg是根元素。
width 和 height 屬性可設置此 SVG 文檔的寬度和高度。version 屬性可定義所使用的 SVG 版本，xmlns 屬性可定義 SVG 命名空間。
ok! 通過上面的工作，我們就把svg的基本工作做好了，下面就可以在其中繪圖了。
4. 添加內容<circle>
<circle cx="100" cy="100" r="20" stroke="blue"
stroke-width="2" fill="blue"/>
這里只是添加了一個圓，如果希望添加其他的元素也是可以的， <circle>標簽是在剛剛引入的dtd文件中定義好的，所以我們就可以直接使用了。
其中cx是指 centerX 就是圓心的x坐標，那么cy就是圓心的y坐標，r就是圓的半徑，stroke即描繪輪廓，fill即填充，stroke-width即描繪的寬度。
完整的代碼如下所示：
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="100%" height="100%" version="1.1"
xmlns="http://www.w3.org/2000/svg">
<circle cx="100" cy="100" r="50" stroke="blue" stroke-width="3" fill="red"></circle>
</svg>
可以看到svg的繪制輪廓和canvas非常的相似，同樣有stroke 和 fill 方法，並且這是stroke-width還是挺棒的。 所以學過canvas的同學學習svg就會很快了！
第三部分：將svg引入html
僅僅做出了svg圖片還是沒用呢，引進入才是王道啊！ 下面就介紹幾種引入svg的方法，包括使用<embed><object>或<iframe>
第一種. 使用<iframe>引入
這種方法是我在不看文檔之前唯一可以想到的方式~ 這個真的很簡單，如下所示：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>svg_test</title>
</head>
<body>
<div class="wrap">
下面是通過iframe引入的svg圖片
<div class="svg">
<iframe src="./first.svg" width="200" height="200" frameborder="0"></iframe>
</div>
</div>
</body>
</html>
最終效果如下所示：
第二種： 使用<embed>標簽引入
注意：1. <embed> 標簽被所有主流的瀏覽器支持，並允許使用腳本。
2. 當在 HTML 頁面中嵌入 SVG 時使用 <embed> 標簽是 Adobe SVG Viewer 推薦的方法！然而，如果需要創建合法的 XHTML，就不能使用 <embed>。任何 HTML 規范中都沒有 <embed> 標簽。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>svg_test</title>
</head>
<body>
<div class="wrap">
下面是通過embed標簽引入的svg圖片
<div class="svg">
<embed src="./first.svg" width="200" height="200"
type="image/svg+xml"
pluginspage="http://www.adobe.com/svg/viewer/install/" />
</div>
</div>
</body>
</html>
這種方法稍微復雜一些，因為我們需要記住type="image/svg+xml" 和 pluginspage="http://www.adobe.com/svg/viewer/install/"。 且這是Adobe公司的方法，並不推薦~
第三種：使用<object>標簽
雖然<object>標簽是HTML4規范中的標簽，被所有較新的瀏覽器支持，但是它不能使用腳本！
所以得通過codebase來指向下載插件的url實現。
如下所示：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>svg_test</title>
</head>
<body>
<div class="wrap">
下面是通過object標簽引入的svg圖片
<div class="svg">
<object data="./first.svg" width="200" height="200"
type="image/svg+xml"
codebase="http://www.adobe.com/svg/viewer/install/" />
</div>
</div>
</body>
</html>
最終的效果是相同的。 其實， 目前為止， iframe 引入的方式還是最簡單的。
還有一種方法我還不知道怎么使用~ 戳這里
第四部分： 其他SVG形狀的繪制
之前作為例子我們展示了如何繪制一個圓型，就是引入一個<circle>標簽，在這一部分我們將認識更多的圖形。包括
- 矩形<rect>
- 圓形<circle>
- 橢圓<ellipse>
- 線<line>
- 折線<polyline>
- 多邊形<polygon>
- 路徑<path>
一、矩形<rect>
矩形的使用和圓是差不多的，看下面的例子：
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="100%" height="100%" version="1.1"
xmlns="http://www.w3.org/2000/svg">
<rect x="20" y="20" rx="20" ry="20" width="250"
height="100" style="fill:red;stroke:black;
stroke-width:5;opacity:0.5"/>
</svg>
這里的x和css中的left是一樣的，即距離瀏覽器左邊的舉例。 y就是距離瀏覽器上方的距離。 rx和ry可以創建圓角。
width和height是用來限制rect的寬度和高度。
fill 和 stroke 和 stroke-width 和opacity都是一些樣式，我們可以全部寫在style里，當然也可以向之前的圓都那么寫，最后效果是一樣的。
注意：這里的opacity控制了fill和stroke的透明度，我們也可以使用stroke-opacity和fill-opacity來分別控制透明度。
二、圓形<circle>
和我們之前講的例子相同，不再重復。
三、橢圓<ellipse>
橢圓和圓的區別很小，就是得記住這個英文ellipse啊，橢圓我們使用r即可確定其半徑，但是我們需要在橢圓中限定rx和ry，即長半軸長和短半軸長，如下所示：
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="100%" height="100%" version="1.1"
xmlns="http://www.w3.org/2000/svg">
<ellipse cx="200" cy="200" rx="50" ry="80" fill="red" stroke="blue" stroke-width="2" fill-opacity="0.5"></ellipse>
<ellipse cx="120" cy="220" rx="50" ry="80" style="fill:pink;stroke:green; stroke-width:2; fill-opacity:0.2;"></ellipse>
</svg>
值得注意的是： 在style里就是使用:來分隔了。
四、線<line>
我們只要記住x1 、y1、x2、y2就可以了，分別代表起始和終止的兩個點。如下所示：
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="100%" height="100%" version="1.1"
xmlns="http://www.w3.org/2000/svg">
<line x1="20" y1="20" x2="100" y2="100" stroke='red' stroke-width="2" >
</line>
</svg>
最終的效果如下所示：
五、折線<polyline>
折線中只有一個API需要記住，那就是 points，points中可以有無數個點， 在每個點的x坐標和y坐標之間使用逗號隔開， 在一個坐標與另一個坐標之間用空格隔開即可，如下所示：
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="100%" height="100%" version="1.1"
xmlns="http://www.w3.org/2000/svg">
<polyline points="20,20 200,50 200,300 400,200 400,400 20,20" stroke="blue" stroke-width="1" fill="pink" fill-opacity="0.3" ></polyline>
</svg>
最終效果如下所示：
六、多邊形<polygon>
多邊形和折線的api是一樣的，都是使用points，格式也是一樣的。 如下所示：
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="100%" height="100%" version="1.1"
xmlns="http://www.w3.org/2000/svg">
<polygon points="20,20 200,50 20,50" stroke="blue" stroke-width="1" fill="pink" fill-opacity="0.3" ></polygon>
</svg>
效果如下所示：
七、路徑<path>
在svg中，路徑需要記住的api是比較多的。 下面的命令可用於路徑數據：
- M = moveto
- L = lineto
- H = horizontal lineto
- V = vertical lineto
- S = smooth curveto
- Q = quadratic Belzier curve
- T = smooth quadratic Belzier curveto
- A = elliptical Arc
- Z = closepath
上面的所有命令都允許使用小寫字母，大寫表示絕對定位，小寫表示相對定位。
下面舉一個簡單的例子：
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="100%" height="100%" version="1.1"
xmlns="http://www.w3.org/2000/svg">
<path d="M100 100 L200 200 L200 20 Z" fill="red"></path>
</svg>
可以看出，svg的路徑不需要使用，並且api不是points了，而是d， 首先moveto （100,100）然后lineto（200,200）然后lineto（200,200），最后再關閉路徑即可。
這怎么又是一個多邊形啊，那path這么復雜就沒有什么用嗎？ 看看下面的例子 吧！
<?xml version="1.0" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg"> <path d="M153 334 C153 334 151 334 151 334 C151 339 153 344 156 344 C164 344 171 339 171 334 C171 322 164 314 156 314 C142 314 131 322 131 334 C131 350 142 364 156 364 C175 364 191 350 191 334 C191 311 175 294 156 294 C131 294 111 311 111 334 C111 361 131 384 156 384 C186 384 211 361 211 334 C211 300 186 274 156 274" style="fill:white;stroke:red;stroke-width:2"/> </svg>
最終效果如下所示：
雖然，這么多的數字只用到了C即curveTo，但是，這個也太復雜了吧~
官網上是這么說的 --- 由於繪制路徑的復雜性，因此強烈建議您使用 SVG 編輯器來創建復雜的圖形。
第五部分： SVG濾鏡
