一.什么是SVG？
SVG 指的是可伸縮矢量圖形 (Scalable Vector Graphics),它用來(lái)定義用于網(wǎng)絡(luò)的基于矢量的圖形侯养，使用 XML 格式定義圖形季研。SVG 圖像在放大或改變尺寸的情況下其圖形質(zhì)量不會(huì)有所損失。此外SVG 是萬(wàn)維網(wǎng)聯(lián)盟的標(biāo)準(zhǔn)坏逢，SVG 與諸如 DOM 和 XSL 之類的 W3C 標(biāo)準(zhǔn)是一個(gè)整體赃承。 2003 年一月妙黍，SVG 1.1 被確立為 W3C 標(biāo)準(zhǔn)。與其他圖像格式相比瞧剖，使用 SVG 的優(yōu)勢(shì)有以下幾點(diǎn)：
1.SVG 可被非常多的工具讀取和修改（比如記事本）
2.SVG 與 JPEG 和 GIF 圖像比起來(lái)废境，尺寸更小，且可壓縮性更強(qiáng)。
3.SVG 是可伸縮的
4.SVG 圖像可在任何的分辨率下被高質(zhì)量地打印
5.SVG 可在圖像質(zhì)量不下降的情況下被放大
6.SVG 圖像中的文本是可選的噩凹，同時(shí)也是可搜索的（很適合制作地圖）
7.SVG 可以與 Java 技術(shù)一起運(yùn)行
8.SVG 是開(kāi)放的標(biāo)準(zhǔn)
9.SVG 文件是純粹的 XML
SVG 的主要競(jìng)爭(zhēng)者是 Flash,與 Flash 相比巴元，SVG 最大的優(yōu)勢(shì)是與其他標(biāo)準(zhǔn)（比如 XSL 和 DOM）相兼容。而 Flash 則是未開(kāi)源的私有技術(shù)驮宴。
二.SVG 實(shí)例
下面的例子是一個(gè)簡(jiǎn)單的 SVG 文件的例子逮刨。SVG 文件必須使用 .svg 后綴來(lái)保存：
<?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="200" cy="100" r="50" stroke="red" stroke-width="2" fill="green"/>
</svg>
代碼解釋：
第一行包含了 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 元素尤辱。
1.SVG 代碼以 < svg > 元素開(kāi)始，包括開(kāi)啟標(biāo)簽 < svg > 和關(guān)閉標(biāo)簽 < /svg > 厢岂，這是根元素光督。
2.width 和 height 屬性可設(shè)置此 SVG 文檔的寬度和高度。version 屬性可定義所使用的 SVG 版本塔粒，xmlns 屬性可定義 SVG 命名空間结借。
3.SVG 的 < circle > 用來(lái)創(chuàng)建一個(gè)圓，cx 和 cy 屬性定義圓中心的 x 和 y 坐標(biāo)卒茬。如果忽略這兩個(gè)屬性船老，那么圓點(diǎn)會(huì)被設(shè)置為 (0, 0)。r 屬性定義圓的半徑圃酵。
4.stroke 和 stroke-width 屬性控制如何顯示形狀的輪廓柳畔。我們把圓的輪廓設(shè)置為 2px 寬，紅色邊框辜昵。
5.fill 屬性設(shè)置形狀內(nèi)的顏色荸镊。我們把填充顏色設(shè)置為原諒色咽斧。
關(guān)閉標(biāo)簽的作用是關(guān)閉 SVG 元素和文檔本身堪置。
注意：所有的開(kāi)啟標(biāo)簽必須有關(guān)閉標(biāo)簽！
HTML 頁(yè)面中的 SVG
SVG 文件可通過(guò)以下標(biāo)簽嵌入 HTML 文檔：< embed > 张惹、< object > 或者 < iframe >舀锨。
三種把 SVG 文件嵌入 HTML 頁(yè)面的不同方法。
使用 < embed > 標(biāo)簽
< embed > 標(biāo)簽被所有主流的瀏覽器支持宛逗，并允許使用腳本坎匿。
注釋：當(dāng)在 HTML 頁(yè)面中嵌入 SVG 時(shí)使用 < embed > 標(biāo)簽是 Adobe SVG Viewer 推薦的方法！然而，如果需要?jiǎng)?chuàng)建合法的 XHTML替蔬，就不能使用 < embed >告私。任何 HTML 規(guī)范中都沒(méi)有 < embed > 標(biāo)簽。
語(yǔ)法：
< src="rect.svg" width="300" height="100" type="image/svg+xml" pluginspage="http://www.adobe.com/svg/viewer/install/">
注釋：pluginspage 屬性指向下載插件的 URL承桥。
使用 < object > 標(biāo)簽
< object > 標(biāo)簽是 HTML 4 的標(biāo)準(zhǔn)標(biāo)簽驻粟，被所有較新的瀏覽器支持。它的缺點(diǎn)是不允許使用腳本凶异。
注釋：假如您安裝了最新版本的 Adobe SVG Viewer蜀撑，那么當(dāng)使用 < object > 標(biāo)簽時(shí) SVG 文件無(wú)法工作（至少不能在 IE 中工作）！
語(yǔ)法：
<object data="rect.svg" width="300" height="100" type="image/svg+xml" codebase="http://www.adobe.com/svg/viewer/install/" />
注釋：codebase 屬性指向下載插件的 URL剩彬。
使用 < iframe > 標(biāo)簽
< iframe > 標(biāo)簽可工作在大部分的瀏覽器中酷麦。
語(yǔ)法：
<iframe src="rect.svg" width="300" height="100"></iframe>
三.SVG 各形狀介紹
（一）SVG 矩形
能根據(jù)之前的圓形聯(lián)想到，rect元素會(huì)在屏幕上繪制一個(gè)矩形 喉恋。其實(shí)只要6個(gè)基本屬性就可以控制它在屏幕上的位置和形狀沃饶。
<svg width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg">
<rect x="20" y="20" rx="10" ry="10" width="300" height="100" style="fill:rgb(0,0,255);stroke-width:1;stroke:rgb(0,0,0);fill-opacity:0.1;stroke-opacity:0.9;opacity:0.9"/>
</svg>
代碼解釋：
rect 元素的 width 和 height 屬性可定義矩形的高度和寬度
style 屬性用來(lái)定義 CSS 屬性
CSS 的 fill 屬性定義矩形的填充顏色（rgb 值、顏色名或者十六進(jìn)制值）
CSS 的 stroke-width 屬性定義矩形邊框的寬度
CSS 的 stroke 屬性定義矩形邊框的顏色
x 屬性定義矩形的左側(cè)位置（例如瀑晒，x="0" 定義矩形到瀏覽器窗口左側(cè)的距離是 0px）
y 屬性定義矩形的頂端位置（例如绍坝，y="0" 定義矩形到瀏覽器窗口頂端的距離是 0px）
CSS 的 fill-opacity 屬性定義填充顏色透明度（合法的范圍是：0 - 1）
CSS 的 stroke-opacity 屬性定義筆觸顏色的透明度（合法的范圍是：0 - 1
CSS 的 opacity 屬性定義整個(gè)元素的透明值（合法的范圍是：0 - 1）
rx 和 ry 屬性可使矩形產(chǎn)生圓角。
（二）SVG 圓形：詳細(xì)見(jiàn)上svg實(shí)例
（三）SVG橢圓：
ellipse 標(biāo)簽可用來(lái)創(chuàng)建橢圓苔悦。橢圓與圓很相似轩褐。不同之處在于橢圓有不同的 x 和 y 半徑，而圓的 x 和 y 半徑是相同的玖详。
<svg width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg">
<ellipse cx="275" cy="125" rx="100" ry="50" style="fill:rgb(200,100,50);stroke:rgb(0,0,100);stroke-width:2"/>
</svg>
代碼解釋：
cx 屬性定義圓點(diǎn)的 x 坐標(biāo)
cy 屬性定義圓點(diǎn)的 y 坐標(biāo)
rx 屬性定義水平半徑
ry 屬性定義垂直半徑
（四）SVG線條
*** line*** 標(biāo)簽用來(lái)創(chuàng)建線條
<svg width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg">
<line x1="0" y1="0" x2="300" y2="300" style="stroke:rgb(99,99,99);stroke-width:2"/>
</svg>
代碼解釋：
x1 屬性在 x 軸定義線條的開(kāi)始
y1 屬性在 y 軸定義線條的開(kāi)始
x2 屬性在 x 軸定義線條的結(jié)束
y2 屬性在 y 軸定義線條的結(jié)束
（五）SVG多邊形
polygon 標(biāo)簽用來(lái)創(chuàng)建含有不少于三個(gè)邊的圖形把介。它們都是由連接一組點(diǎn)集的直線構(gòu)成。polygon的路徑在最后一個(gè)點(diǎn)處自動(dòng)回到第一個(gè)點(diǎn)蟋座。需要注意的是拗踢，矩形也是一種多邊形，如果需要更多靈活性的話向臀，你也可以用多邊形創(chuàng)建一個(gè)矩形锅论。
<svg width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg">
<polygon points="220,100 300,210 170,250" style="fill:#cccccc;stroke:#000000;stroke-width:1"/>
</svg>
代碼解釋：
points 屬性定義多邊形每個(gè)角的 x 和 y 坐標(biāo)
點(diǎn)集數(shù)列伤塌。每個(gè)數(shù)字用空白符、逗號(hào)、終止命令或者換行符分隔開(kāi)归敬。每個(gè)點(diǎn)必須包含2個(gè)數(shù)字涤躲，一個(gè)是x坐標(biāo)掸读，一個(gè)是y坐標(biāo)会涎。所以點(diǎn)列表 (0,0), (1,1) 和(2,2)可以寫(xiě)成這樣：“0 0, 1 1, 2 2”。路徑繪制完后閉合圖形舒帮，所以最終的直線將從位置(2,2)連接到位置(0,0)会喝。
（六）SVG 折線
polyline 標(biāo)簽用來(lái)創(chuàng)建僅包含直線的形狀陡叠。它是一組連接在一起的直線。因?yàn)樗梢杂泻芏嗟狞c(diǎn)肢执，折線的的所有點(diǎn)位置都放在一個(gè)points屬性中：
<svg width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg">
<polyline points="20,100 40,60 70,80 100,20" style="fill:white;stroke:red;stroke-width:2"></polyline>
</svg>
points
點(diǎn)集數(shù)列枉阵。每個(gè)數(shù)字用空白符、逗號(hào)预茄、終止命令或者換行符分隔開(kāi)岭妖。每個(gè)點(diǎn)必須包含2個(gè)數(shù)字，一個(gè)是x坐標(biāo)反璃，一個(gè)是y坐標(biāo)昵慌。所以點(diǎn)列表 (0,0), (1,1) 和(2,2)可以寫(xiě)成這樣：“0 0, 1 1, 2 2”。路徑繪制完后閉合圖形淮蜈，所以最終的直線將從位置(2,2)連接到位置(0,0)斋攀。
四.SVG 濾鏡簡(jiǎn)介
所有互聯(lián)網(wǎng)的SVG濾鏡定義在 < defs > 元素中， < filter > 標(biāo)簽用來(lái)定義SVG濾鏡梧田， < filter > 標(biāo)簽使用必須的ID屬性來(lái)定義向圖形應(yīng)用到那個(gè)濾鏡中淳蔼。在 SVG 中，可用的濾鏡有：
feBlend SVG 濾鏡裁眯。使用不同的混合模式把兩個(gè)對(duì)象合成在一起鹉梨。
feColorMatrix SVG 濾鏡。應(yīng)用matrix轉(zhuǎn)換穿稳。
feComponentTransfer SVG 濾鏡存皂。執(zhí)行數(shù)據(jù)的 component-wise 重映射。
feComposite SVG 濾鏡逢艘。
feConvolveMatrix SVG 濾鏡旦袋。
feDiffuseLighting SVG 濾鏡。
feDisplacementMap SVG 濾鏡它改。
feDistantLight SVG 濾鏡疤孕。 Defines a light source
feFlood SVG 濾鏡。
feGaussianBlur SVG 濾鏡央拖。對(duì)圖像執(zhí)行高斯模糊祭阀。
feImage SVG 濾鏡。
feMerge SVG 濾鏡鲜戒。創(chuàng)建累積而上的圖像专控。
feMorphology SVG 濾鏡。 對(duì)源圖形執(zhí)行"fattening" 或者 "thinning"袍啡。
feOffset SVG 濾鏡踩官。相對(duì)與圖形的當(dāng)前位置來(lái)移動(dòng)圖像却桶。
fePointLight SVG 濾鏡境输。
feSpecularLighting SVG 濾鏡蔗牡。
feSpotLight SVG 濾鏡。
feTile SVG 濾鏡嗅剖。
feTurbulence SVG 濾鏡辩越。
注釋：您可以在每個(gè) SVG 元素上使用多個(gè)濾。
（一）SVG 高斯濾鏡
< filter > 標(biāo)簽必須嵌套在 < defs > 標(biāo)簽內(nèi)信粮。< defs > 標(biāo)簽是 definitions 的縮寫(xiě)黔攒，它允許對(duì)諸如濾鏡等特殊元素進(jìn)行定義。
<svg width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg">
<defs>
<filter id="Gaussian_Blur">
<feGaussianBlur in="SourceGraphic" stdDeviation="3" />
</filter>
</defs>
<ellipse cx="200" cy="150" rx="70" ry="40" style="fill:#ff0000;stroke:#000000;stroke-width:2;filter:url(#Gaussian_Blur)"/>
</svg>
代碼解釋：
< filter > 標(biāo)簽的 id 屬性可為濾鏡定義一個(gè)唯一的名稱（同一濾鏡可被文檔中的多個(gè)元素使用）
filter:url 屬性用來(lái)把元素鏈接到濾鏡强缘。當(dāng)鏈接濾鏡 id 時(shí)督惰，必須使用 # 字符
濾鏡效果是通過(guò) < feGaussianBlur > 標(biāo)簽進(jìn)行定義的。fe 后綴可用于所有的濾鏡
< feGaussianBlur > 標(biāo)簽的 stdDeviation 屬性可定義模糊的程度
in="SourceGraphic" 這個(gè)部分定義了由整個(gè)圖像創(chuàng)建效果旅掂。
（二）SVG 陰影效果
***feOffset ***元素用于創(chuàng)建陰影效果
偏移一個(gè)矩形（帶 < feOffset > ）赏胚，然后混合偏移圖像頂部(含 < feBlend > )
SVG代碼：
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<defs>
<filter id="f1" x="0" y="0" width="200%" height="200%">
<feOffset result="offOut" in="SourceGraphic" dx="20" dy="20" />
<feBlend in="SourceGraphic" in2="offOut" mode="normal" />
</filter>
</defs>
<rect width="90" height="90" stroke="green" stroke-width="3"
fill="yellow" filter="url(#f1)" />
</svg>
代碼解釋：
< filter > 標(biāo)簽的 id 屬性可為濾鏡定義一個(gè)唯一的名稱（同一濾鏡可被文檔中的多個(gè)元素使用）
filter:url 屬性用來(lái)把元素鏈接到濾鏡。當(dāng)鏈接濾鏡 id 時(shí)商虐，必須使用 # 字符
（三）SVG 線性漸變
漸變是一種從一種顏色到另一種顏色的平滑過(guò)渡觉阅。另外，可以把多個(gè)顏色的過(guò)渡應(yīng)用到同一個(gè)元素上秘车。
在 SVG 中典勇，有兩種主要的漸變類型：
線性漸變
放射性漸變
< linearGradient > 可用來(lái)定義 SVG 的線性漸變。
< linearGradient > 標(biāo)簽必須嵌套在 < defs > 的內(nèi)部叮趴。< defs > 標(biāo)簽是 definitions 的縮寫(xiě)割笙，它可對(duì)諸如漸變之類的特殊元素進(jìn)行定義。
線性漸變可被定義為水平眯亦、垂直或角形的漸變：
當(dāng) y1 和 y2 相等咳蔚，而 x1 和 x2 不同時(shí)，可創(chuàng)建水平漸變
當(dāng) x1 和 x2 相等搔驼，而 y1 和 y2 不同時(shí)谈火，可創(chuàng)建垂直漸變
當(dāng) x1 和 x2 不同，且 y1 和 y2 不同時(shí)舌涨，可創(chuàng)建角形漸變
<svg width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg">
<defs>
<linearGradient id="orange-red" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" style="stop-color:rgb(255,255,0);stop-opacity:1"/>
<stop offset="100%" style="stop-color:rgb(255,0,0);stop-opacity:1"/>
</linearGradient>
</defs>
<ellipse cx="200" cy="190" rx="85" ry="55" style="fill:url(#orange-red)"/>
</svg>
代碼解釋：
1.< linearGradient > 標(biāo)簽的 id 屬性可為漸變定義一個(gè)唯一的名稱糯耍。
2.fill:url(#orange-red) 屬性把 ellipse 元素鏈接到此漸變。
3.< linearGradient > 標(biāo)簽的 x1囊嘉、x2温技、y1、y2 屬性可定義漸變的開(kāi)始和結(jié)束位置扭粱。
4.漸變的顏色范圍可由兩種或多種顏色組成舵鳞。每種顏色通過(guò)一個(gè) < stop > 標(biāo)簽來(lái)規(guī)定。offset 屬性用來(lái)定義漸變的開(kāi)始和結(jié)束位置琢蛤。
（四）SVG 放射漸變
< radialGradient > 用來(lái)定義放射性漸變蜓堕。
<svg width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg">
<defs>
<radialGradient id="grey_blue" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">
<stop offset="0%" style="stop-color:rgb(200,200,200);stop-opacity:0"/>
<stop offset="100%" style="stop-color:rgb(0,0,255);stop-opacity:1"/>
</radialGradient>
</defs>
<ellipse cx="230" cy="200" rx="110" ry="100" style="fill:url(#grey_blue)"/>
</svg>
代碼解釋：
< radialGradient > 標(biāo)簽的 id 屬性可為漸變定義一個(gè)唯一的名稱抛虏，fill:url(#grey-blue) 屬性把 ellipse 元素鏈接到此漸變，cx套才、cy 和 r 屬性定義外圈迂猴，而 fx 和 fy 定義內(nèi)圈 漸變的顏色范圍可由兩種或多種顏色組成。每種顏色通過(guò)一個(gè) < stop > 標(biāo)簽來(lái)規(guī)定背伴。offset 屬性用來(lái)定義漸變的開(kāi)始和結(jié)束位置沸毁。
****此篇為svg的基礎(chǔ)介紹篇，了解更多關(guān)于svg的介紹請(qǐng)看 HTML5學(xué)習(xí)--SVG全攻略（進(jìn)階篇）***
