SVG：Scalable Vector Graphics减噪，可伸縮矢量圖形
前言
為了在網(wǎng)絡(luò)設(shè)備上傳播各種聲音致扯、圖像等媒體文件，有了各種針對(duì)不同需求的文件格式——圖片像街、視頻黎棠、音頻等都有各種格式，應(yīng)對(duì)高效傳輸镰绎、低空間占用脓斩、各類媒體中傳輸使用等場(chǎng)景。
圖片畴栖，就有許多格式随静，例如普通用戶最為熟悉的 JPEG、PNG、GIF燎猛。盡管這些格式與大家經(jīng)常見面恋捆，但普通用戶根本不知道這些圖片格式的區(qū)別與作用。這里簡(jiǎn)單說一下重绷，JPEG 是有損壓縮沸停，對(duì)原圖實(shí)行大幅度的壓縮，以減少圖片的空間占用昭卓，但同時(shí)也會(huì)對(duì)畫質(zhì)產(chǎn)生較大的影響愤钾。PNG 格式的圖片可以理解為類似剪紙，沒有圖像的區(qū)域是透明的候醒，可以與背景有效融合能颁。有時(shí)你會(huì)在某些地方看到透明頭像，使用的就是 PNG 格式的圖片火焰。至于 GIF 劲装，相信大家都熟悉胧沫，就是一個(gè)短暫的高壓縮的動(dòng)圖昌简，大家在某些軟件的搞笑區(qū)或者社交軟件的斗圖區(qū)看得很多。
除上述格式绒怨，還有 PSD 類似的圖片格式纯赎，有特殊用途，PSD 主要用于 PS 軟件南蹂，保存高保真的圖片犬金，一般是商業(yè)化使用，其他軟件基本不支持六剥。
但今天的主題并不是以上這些格式晚顷。為了數(shù)字媒體的網(wǎng)絡(luò)化傳播，許多圖像公司參與了 SVG 格式的標(biāo)準(zhǔn)制定疗疟。除此之外该默，人們發(fā)現(xiàn)，上面的圖片格式在網(wǎng)絡(luò)中傳播時(shí)策彤，要么是會(huì)因?yàn)榉糯竽：ㄐ洌词潜旧韷嚎s得太厲害，或者是本身就很大店诗，在一些場(chǎng)景下不是特別適用裹刮，比如放大畫質(zhì)不損失，且要求空間占用小的時(shí)候庞瘸。
這種放大圖像不模糊的形式類似于 PDF 文檔捧弃。
為了滿足上述需求，2003 年擦囊，W3C 與蘋果塔橡、柯達(dá)梅割、IBM、Adobe 等公司一起制定了 SVG 矢量圖形標(biāo)準(zhǔn)葛家。SVG 使用 XML （可擴(kuò)展標(biāo)記語(yǔ)言）定義圖像户辞，通過一系列參數(shù)在設(shè)備顯示屏上規(guī)定圖像的坐標(biāo)，坐標(biāo)矢量便會(huì)連接繪制出圖像癞谒，放大縮小不影響畫質(zhì)底燎。
因?yàn)槭褂?XML，SVG 圖像很容易在 HTML 網(wǎng)頁(yè)中使用弹砚。
一双仍、HTML 中使用 SVG
需要強(qiáng)調(diào)的是，HTML 中使用的 SVG 的代碼一般是專業(yè)的繪圖軟件自動(dòng)生成的桌吃，在使用時(shí)只需要引入就好朱沃，SVG 的標(biāo)簽與屬性非常繁雜，沒有必要進(jìn)行記憶茅诱，只需記憶一些常用屬性逗物，在實(shí)際開發(fā)中可以修改屬性改變樣式即可。
1. embed 標(biāo)簽
語(yǔ)法：
<embed src="circle1.svg" type="image/svg+xml" />
優(yōu)勢(shì)：所有主要瀏覽器都支持瑟俭，并允許使用腳本
缺點(diǎn)：不推薦在HTML4和XHTML中使用（但在HTML5允許）
該方法不常用翎卓。
2. object 標(biāo)簽
語(yǔ)法：
<object data="circle1.svg" type="image/svg+xml"></object>
優(yōu)勢(shì)：所有主要瀏覽器都支持，并支持HTML4摆寄，XHTML和HTML5標(biāo)準(zhǔn)
缺點(diǎn)：不允許使用腳本失暴。
該方法不常用。
3. iframe 標(biāo)簽
語(yǔ)法：
<iframe src="circle1.svg"></iframe>
優(yōu)勢(shì)：所有主要瀏覽器都支持微饥，并允許使用腳本
缺點(diǎn)：不推薦在HTML4和XHTML中使用（但在HTML5允許）
該方法不常用逗扒。
4. SVG 代碼
語(yǔ)法：
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<circle cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="red" />
</svg>
該方法是最常用的方法，使用 SVG 標(biāo)簽如同普通的 HTML 標(biāo)簽欠橘，并且可以對(duì) SVG 圖像進(jìn)行更改矩肩，只需要更改相關(guān)參數(shù)即可。但該方法需要對(duì)相關(guān)標(biāo)簽與屬性熟練掌握简软。
二蛮拔、SVG 相關(guān)標(biāo)簽與屬性
SVG 使用 <svg> 標(biāo)簽定義圖形的繪制區(qū)域，要繪制的圖形就寫在 <svg> 標(biāo)簽中痹升。其可以設(shè)置寬高等屬性建炫，viewBox 屬性用于設(shè)置 SVG 盒子，其有四個(gè)參數(shù)疼蛾，例如：
<svg width="200" height="200" viewBox="50 50 50 50"></svg>
其中前兩個(gè)參數(shù)是 SVG 盒子的起始坐標(biāo)肛跌，后兩個(gè)代表盒子的寬高。
1. 矩形
語(yǔ)法：
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<rect x="50" y="20" width="150" height="150"
style="fill:blue;stroke:pink;stroke-width:5;fill-opacity:0.1;
stroke-opacity:0.9"/>
</svg>
xmlns 是 XML 的語(yǔ)法，規(guī)定一個(gè)命名空間衍慎，用于防止同名原素帶來(lái)的歧義转唉。
矩形使用標(biāo)簽 <rect> 定義，其中 x稳捆、y 表示開始繪制的橫縱坐標(biāo)赠法，width 與 height 表示圖形的寬高。
2. 圓形
語(yǔ)法：
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<circle cx="100" cy="50" r="40" stroke="black"
stroke-width="2" fill="red"/>
</svg>
圓形使用 <circle> 標(biāo)簽定義乔夯，cx砖织、cy 表示圓心坐標(biāo)，r 表示圓的半徑末荐。stroke 表示圖形的邊框侧纯，所有圖形都可以使用該屬性。與 CSS 中的 border 類似甲脏，后面會(huì)介紹它的相關(guān)屬性眶熬。
3. 橢圓
語(yǔ)法：
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<ellipse cx="240" cy="100" rx="220" ry="30" style="fill:purple"/>
<ellipse cx="220" cy="70" rx="190" ry="20" style="fill:lime"/>
<ellipse cx="210" cy="45" rx="170" ry="15" style="fill:yellow"/>
</svg>
橢圓使用 <ellipse> 標(biāo)簽定義，屬性與圓類似块请，不同的地方在于半徑 r 的屬性設(shè)置不同娜氏。橢圓使用 rx、ry 進(jìn)行設(shè)置负乡。fill 屬性意為 “填充”牍白，指圖形的填充模式脊凰，類似于背景色抖棘。
4. 直線
語(yǔ)法：
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<line x1="0" y1="0" x2="200" y2="200"
style="stroke:rgb(255,0,0);stroke-width:2"/>
</svg>
直線使用 <line> 標(biāo)簽定義。兩點(diǎn)確定一條直線狸涌，其中 x1切省、y1 是第一個(gè)點(diǎn)的坐標(biāo)，x2帕胆、y2 是第二個(gè)點(diǎn)的坐標(biāo)朝捆。這里的 stroke-width 定義線段的寬度。
5. 多邊形
語(yǔ)法：
<svg height="250" width="500">
<polygon points="220,10 300,210 170,250 123,234" style="fill:lime;stroke:purple;stroke-width:1" />
</svg>
折線使用 <polygon> 標(biāo)簽進(jìn)行定義懒豹，points 屬性用于設(shè)置每個(gè)頂點(diǎn)的坐標(biāo)芙盘。
6. 折線
語(yǔ)法：
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<polyline points="0,40 40,40 40,80 80,80 80,120 120,120 120,160" style="fill:white;stroke:red;stroke-width:4" />
</svg>
折線使用 <polyline> 標(biāo)簽進(jìn)行定義，points 屬性用于設(shè)置每個(gè)折點(diǎn)的坐標(biāo)脸秽。fill 設(shè)置折線的填充儒老，一般設(shè)為 none，不設(shè)置的話會(huì)是黑色记餐，填充為多個(gè)多邊形驮樊。
7. 路徑
語(yǔ)法：
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<path id="lineAB" d="M 100 350 l 150 -300" stroke="red"
stroke-width="3" fill="none" />
<path id="lineBC" d="M 250 50 l 150 300" stroke="red"
stroke-width="3" fill="none" />
<path d="M 175 200 l 150 0" stroke="green" stroke-width="3"
fill="none" />
<path d="M 100 350 q 150 -300 300 0" stroke="blue"
stroke-width="5" fill="none" />
</svg>
路徑使用 <path> 定義，用于繪制復(fù)雜的圖形。id 表示路徑的唯一身份囚衔，d 表示路徑的繪制方式挖腰。有以下屬性：
M = moveto
L = lineto
H = horizontal lineto
V = vertical lineto
C = curveto
S = smooth curveto
Q = quadratic Bézier curve
T = smooth quadratic Bézier curveto
A = elliptical Arc
Z = closepath
注意：以上所有命令均允許小寫字母。大寫表示絕對(duì)定位练湿，小寫表示相對(duì)定位猴仑。
8. 文本
語(yǔ)法：
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<text x="0" y="15" fill="red" transform="rotate(30 20,40)">I love SVG</text>
</svg>
以上就是一些常用的繪制 SVG 圖形的標(biāo)簽，當(dāng)然肥哎，還有很多標(biāo)簽宁脊，例如 <a> 標(biāo)簽建立一個(gè)連接，<defs> 建立一個(gè)容器贤姆，類似 <template>榆苞。但是這些標(biāo)簽繁雜難記，不必刻意去記憶霞捡，需要時(shí)查閱手冊(cè)即可坐漏，使用熟練即可記住。
三碧信、SVG 特效
由于這些屬性都非常復(fù)雜難記赊琳，所以不會(huì)詳細(xì)講解，仍然建議遇到時(shí)查手冊(cè)即可砰碴。
1. 濾鏡
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" />
<!--與圖像結(jié)合的濾鏡-->
<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>
2. 漸變
漸變分線性漸變與放射漸變，與 CSS 類似呈枉。
線性漸變
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<defs>
<linearGradient id="grad1" 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="70" rx="85" ry="55" fill="url(#grad1)" />
</svg>
放射漸變
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<defs>
<radialGradient id="grad1" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">
<stop offset="0%" style="stop-color:rgb(255,255,255);
stop-opacity:0" />
<stop offset="100%" style="stop-color:rgb(0,0,255);stop-opacity:1" />
</radialGradient>
</defs>
<ellipse cx="200" cy="70" rx="85" ry="55" fill="url(#grad1)" />
</svg>
這里的 <stop> 表示漸變停止的位置趁尼。offset 表示偏移量，stop-color 表示停止?jié)u變后的顏色猖辫。
3. stroke
stroke酥泞，意為行程
stroke 有以下屬性：
stroke
stroke-width
stroke-linecap
stroke-dasharray
stroke
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<g fill="none">
<path stroke="red" d="M5 20 l215 0" />
<path stroke="blue" d="M5 40 l215 0" />
<path stroke="black" d="M5 60 l215 0" />
</g>
</svg>
stroke-linecap
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<g fill="none" stroke="black" stroke-width="6">
<path stroke-linecap="butt" d="M5 20 l215 0" />
<path stroke-linecap="round" d="M5 40 l215 0" />
<path stroke-linecap="square" d="M5 60 l215 0" />
</g>
</svg>
定義 path 繪制的線條的終端的樣式，butt 是會(huì)把兩端截掉一點(diǎn)啃憎，round 是半圓平滑芝囤，類似于 border-radius: 50%，square 是方形辛萍。
stroke-dasharray
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<g fill="none" stroke="black" stroke-width="4">
<path stroke-dasharray="5,5" d="M5 20 l215 0" />
<path stroke-dasharray="10,10" d="M5 40 l215 0" />
<path stroke-dasharray="20,10,5,5,5,10" d="M5 60 l215 0" />
</g>
</svg>
g 標(biāo)簽悯姊，用于把元素組合的標(biāo)簽
結(jié)語(yǔ)
實(shí)際應(yīng)用中，美工會(huì)將設(shè)計(jì)好的 SVG 圖片轉(zhuǎn)換為 XML 代碼贩毕，開發(fā)時(shí)直接復(fù)制過來(lái)使用悯许，若有什么可以修改的，找到相關(guān)參數(shù)修改即可耳幢。
復(fù)雜難記的屬性可以翻閱手冊(cè)岸晦，使用多了便會(huì)記住欧啤。
