什么是SVG
SVG 即可伸縮矢量圖形 (Scalable Vector Graphics)。SVG 使用 XML 格式定義圖像。
簡(jiǎn)單使用SVG
我們打開SVG網(wǎng)頁編輯器 ：http://www.86y.org/demo/svg/可以看到如下界面
我們下邊在這個(gè)圖上做一些簡(jiǎn)單的編輯
1. 畫一個(gè)五角星
點(diǎn)擊箭頭指向，然后在圖紙上就可以劃出五角星了
點(diǎn)擊箭頭所指可以查看源碼：
源碼解析
看到上邊的源碼我們就要了解一下了。
第一行包含了 XML 聲明。請(qǐng)注意 standalone 屬性！該屬性規(guī)定此 SVG 文件是否是"獨(dú)立的"，或含有對(duì)外部文件的引用。standalone="no" 意味著 SVG 文檔會(huì)引用一個(gè)外部文件 - 在這里，是 DTD 文件。
第二和第三行引用了這個(gè)外部的 SVG DTD。該 DTD 位于 "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"。該 DTD 位于 W3C，含有所有允許的 SVG 元素。
SVG必須以標(biāo)簽<svg>開始，以</svg>結(jié)束。這是根元素。
<circle>是圓標(biāo)簽，cx 和 cy 屬性定義圓中心的 x 和 y 坐標(biāo)。如果忽略這兩個(gè)屬性，那么圓點(diǎn)會(huì)被設(shè)置為 (0, 0)。r 屬性定義圓的半徑。
stroke 和 stroke-width 屬性控制如何顯示形狀的輪廓。我們把圓的輪廓設(shè)置為 2px 寬，黑邊框。
fill 屬性設(shè)置形狀內(nèi)的顏色。我們把填充顏色設(shè)置為紅色。
關(guān)閉標(biāo)簽的作用是關(guān)閉 SVG 元素和文檔本身。
注釋：所有的開啟標(biāo)簽必須有關(guān)閉標(biāo)簽！
運(yùn)行結(jié)果：
SVG路徑語法<path>
svg有很多標(biāo)簽語法，直線、矩形、圓、折線等等，有興趣的同學(xué)可以在這里查看SVG,我們這里重點(diǎn)介紹一下<path>標(biāo)簽，因?yàn)閜ath標(biāo)簽在實(shí)際應(yīng)用中（自定義圖標(biāo)）應(yīng)該是使用的最多的標(biāo)簽。
<path>元素用于定義一個(gè)路徑。
下面的命令可用于路徑數(shù)據(jù)：
????M = move to 需要兩個(gè)參數(shù)，分別是需要移動(dòng)到的點(diǎn)的x軸和y軸的坐標(biāo)。類似于移動(dòng)畫筆的位置。
????L = line to?需要兩個(gè)參數(shù)，分別是一個(gè)點(diǎn)的x軸和y軸坐標(biāo)，L命令將會(huì)在當(dāng)前位置和新位置（L前面畫筆所在的點(diǎn)）之間畫一條線段。
????H = horizontal line to和 V = vertical line to?這兩個(gè)命令都只帶一個(gè)參數(shù)，標(biāo)明在x軸或y軸移動(dòng)到的位置，因?yàn)樗鼈兌贾辉谧鴺?biāo)軸的一個(gè)方向上移動(dòng)
????C = curve to?三次貝塞爾曲線。(x,y)表示的是曲線的終點(diǎn)，(x1,y1)是起點(diǎn)的控制點(diǎn)，(x2,y2)是終點(diǎn)的控制點(diǎn)?？刂泣c(diǎn)描述的是曲線起始點(diǎn)的斜率，曲線上各個(gè)點(diǎn)的斜率，是從起點(diǎn)斜率到終點(diǎn)斜率的漸變過程。
????S = smooth curve to當(dāng)一個(gè)點(diǎn)某一側(cè)的控制點(diǎn)是它另一側(cè)的控制點(diǎn)的對(duì)稱（以保持斜率不變），可以使用S命令。簡(jiǎn)寫的貝塞爾曲線命令。如果S命令跟在一個(gè)C命令或者另一個(gè)S命令的后面，它的第一個(gè)控制點(diǎn)，就會(huì)被假設(shè)成前一個(gè)控制點(diǎn)的對(duì)稱點(diǎn)。如果S命令單獨(dú)使用，前面沒有C命令或者另一個(gè)S命令，那么它的兩個(gè)控制點(diǎn)就會(huì)被假設(shè)為同一個(gè)點(diǎn)。
????Q = quadratic Bézier curve?二次貝塞爾曲線Q，只需要一個(gè)控制點(diǎn)，用來確定起點(diǎn)和終點(diǎn)的曲線斜率。因此它需要兩組參數(shù)，控制點(diǎn)和終點(diǎn)坐標(biāo)。
????T = smooth quadratic Bézier curve to?與S命令相似，是Q命令的簡(jiǎn)寫命令
????Z = closepath?Z命令會(huì)從當(dāng)前點(diǎn)畫一條直線到路徑的起點(diǎn)。不區(qū)分大小寫
注意：以上所有命令均允許小寫字母。大寫表示絕對(duì)定位，小寫表示相對(duì)定位。
