概念
SVG全稱(chēng)是可縮放矢量圖（Scalable Vector Graphics），是一種基于XML語(yǔ)法借杰，用于描述二維矢量圖形的圖形格式罗心。jpg吏砂，png等其他圖像格式都是基于像素處理的，而SVG是用文本格式的描述性語(yǔ)言來(lái)描述圖像內(nèi)容拳魁，因此是一種和圖像分辨率無(wú)關(guān)的矢量圖形格式惶桐，可以無(wú)損進(jìn)行縮放。
SVG格式的優(yōu)點(diǎn)：
- 圖像文件可讀潘懊，易于修改和編輯
- 與現(xiàn)有技術(shù)可以互動(dòng)融合姚糊。例如，SVG技術(shù)本身的動(dòng)態(tài)部分（包括時(shí)序控制和動(dòng)畫(huà)）就是基于SMIL標(biāo)準(zhǔn)授舟。SVG文件還可嵌入JavaScript腳本來(lái)控制SVG對(duì)象
- SVG圖形格式可以方便的創(chuàng)建文字索引救恨，從而實(shí)現(xiàn)基于內(nèi)容的圖像搜索
- SVG圖形格式支持多種濾鏡和特殊效果，在不改變圖像內(nèi)容的前提下可以實(shí)現(xiàn)位圖格式中類(lèi)似文字陰影的效果
- SVG圖形格式可以用來(lái)動(dòng)態(tài)生成圖形释树。例如肠槽，可用SVG動(dòng)態(tài)生成具有交互功能的地圖
SVG格式的缺點(diǎn)：
- 較老的IE瀏覽器不支持（需要IE9+）
- 由于原始的SVG檔是遵從XML語(yǔ)法擎淤，導(dǎo)致數(shù)據(jù)采用未壓縮的方式存放，因此相較于其他的矢量圖形格式秸仙，同樣的文件內(nèi)容會(huì)比其他的文件格式稍大
- SVG標(biāo)準(zhǔn)不兼容嘴拢，舊版的SVG Viewer無(wú)法正確顯示出使用新版SVG格式的矢量圖形
SVG使用方式
SVG的基礎(chǔ)知識(shí)
SVG必須使用<svg>元素進(jìn)行聲明，表示一個(gè)SVG文檔片段筋栋〈短溃可以直接嵌入HTML，也可以在直接存為一個(gè)svg文件弊攘。
使用圖形元素來(lái)繪制圖形抢腐，常用的圖形元素有：矩形<rect>、圓<cicrle>襟交、橢圓<ellipse>迈倍、多邊形<polygon>、直線<line>捣域、折線<polyline>啼染、任意曲線<path>等。
可以使用<g>元素來(lái)做組合對(duì)象的容器焕梅，其子元素可以繼承其屬性迹鹅。此外，<g>元素也可以用來(lái)定義復(fù)雜的對(duì)象贞言，之后可以通過(guò)<use>元素來(lái)引用它們斜棚。
可以使用<defs>元素來(lái)預(yù)定義圖形，并且在其他元素中引用该窗。
可以直接在元素上定義屬性來(lái)設(shè)置圖形的線寬弟蚀，顏色，填充色等酗失；也可以使用css來(lái)定義义钉，但是屬性和普通css不相同。
svg的坐標(biāo)體系规肴。如下圖捶闸，取svg元素左上角為坐標(biāo)原點(diǎn)，X軸向右遞增奏纪，Y軸向下遞增鉴嗤。進(jìn)行圖形繪制時(shí)，以此坐標(biāo)來(lái)定位序调。但是需要注意的是text元素的x,y屬性定位時(shí)是該元素的左下角醉锅。
如何在HTML中使用SVG
SVG在網(wǎng)頁(yè)中使用有很多種方式，即可像其他圖片文件一樣直接引用发绢，也可以做像其他DOM元素一樣嵌入其中硬耍。示例如下：
// SVG 文件可以直接插入網(wǎng)頁(yè)垄琐，成為 DOM 的一部分，然后用 JavaScript 和 CSS 進(jìn)行操作经柴。
<!DOCTYPE html>
<html>
<head></head>
<body>
<svg id="mysvg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 600">
<circle id="mycircle" cx="400" cy="300" r="50" />
</svg>
</body>
</html>
// SVG代碼也可以寫(xiě)在一個(gè)獨(dú)立文件中狸窘，然后用<img>、<object>坯认、<embed>翻擒、<iframe>等標(biāo)簽插入網(wǎng)頁(yè)。
<img src="circle.svg">
<object id="object" data="circle.svg" type="image/svg+xml"></object>
<embed id="embed" src="icon.svg" type="image/svg+xml"/>
<iframe id="iframe" src="icon.svg"></iframe>
//SVG文件還可以轉(zhuǎn)為 BASE64 編碼牛哺，然后作為 Data URI 寫(xiě)入網(wǎng)頁(yè)陋气。
<img src="data:image/svg+xml;base64,[data]"/>
// CSS 也可以使用 SVG 文件。
.logo {
background: url(icon.svg);
}
SVG常用元素介紹
SVG標(biāo)準(zhǔn)中的元素引润，主要分為：容器元素巩趁，基本圖形元素，描述性元素淳附，動(dòng)畫(huà)元素议慰，濾鏡元素，字體元素等等奴曙。本文只介紹前三類(lèi)元素中最基本元素的使用别凹，后續(xù)再描述其他元素的使用方法。
容器元素
svg
<svg>元素是SVG圖片的根元素/容器洽糟，表示一個(gè)SVG文檔片段番川。其主要屬性如下。
| 屬性 | 描述 | 默認(rèn)值 |
|---|---|---|
| width | SVG片段的寬度脊框，可以是像素也可以是百分比 | 100% |
| height | SVG片段的高度，可以是像素也可以是百分比 | 100% |
| viewBox | 用來(lái)控制實(shí)際顯示的內(nèi)容践啄，即只顯示svg元素內(nèi)部分區(qū)域浇雹，并縮放。該屬性是一個(gè)包含4個(gè)參數(shù)的列表start-x,start-y,width和height屿讽，以空格或者逗號(hào)分隔開(kāi)昭灵。用以設(shè)置實(shí)現(xiàn)顯示區(qū)域的初始坐標(biāo)和寬高。如果x+width>svg width,則會(huì)向右移伐谈，以保證最終顯示區(qū)域的width不變烂完。height規(guī)則相同。不允許寬度和高度為負(fù)值,0則禁用元素的呈現(xiàn)诵棵。 |
0抠蚣，0，svg width履澳，svg height嘶窄，全部顯示 |
| preserveAspectRatio | 表示對(duì)viewBox選中的區(qū)域是否強(qiáng)制進(jìn)行統(tǒng)一縮放.規(guī)則過(guò)于復(fù)雜怀跛，這里不再轉(zhuǎn)述，詳見(jiàn)preserveAspectRatio | none柄冲，根據(jù)顯示區(qū)域決定是否縮放 |
defs
<defs>元素來(lái)自定義圖形吻谋，它內(nèi)部的圖形不會(huì)顯示，僅供在其他元素中引用现横。例如定義一個(gè)箭頭圖形漓拾，供其他連線使用。
<defs>
<marker id="markerArrow" markerWidth="4" markerHeight="4" refX="0" refY="2" orient="auto">
<path d="M0,0 L4,2 L0,4 z" class="axis-arrow"></path>
</marker>
</defs>
<path d="M100,10 L150,10 L150,60" style="stroke: #6666ff; stroke-width: 1px; fill: none;
marker-end: url(#markerArrow) "></path>
g
<g>元素來(lái)做組合對(duì)象的容器戒祠，其子元素可以繼承其屬性骇两。此外，<g>元素也可以用來(lái)定義復(fù)雜的對(duì)象得哆，之后可以通過(guò)<use>元素來(lái)引用它們脯颜。
<defs>
<g id="ShapeGroup">
<rect x="0" y="0" width="100" height="100" fill="#69C" stroke="red" stroke-width="2"/>
<circle cx="50" cy="50" r="40" stroke="#00f" fill="none" stroke-width="5"/>
</g>
</defs>
<use xlink:href="#ShapeGroup" x="0" y="0" transform="scale(0.5)"/>
<use xlink:href="#ShapeGroup" x="10" y="10" transform="scale(1)"/>
<use xlink:href="#ShapeGroup" x="30" y="30" transform="scale(1.5)"/>
常用屬性介紹
在繪制圖形時(shí)，經(jīng)常使用如下一些屬性贩据，用來(lái)定義圖形的樣式栋操，可以直接在元素上直接設(shè)置屬性，也可以類(lèi)似CSS一樣使用饱亮。
| 屬性 | 描述 | 默認(rèn)值 |
|---|---|---|
| fill | 圖形內(nèi)填充顏色矾芙，與css顏色定義相同，可以預(yù)定義近上，長(zhǎng)/短十六進(jìn)制和rgb方式定義 | none剔宪，無(wú)填充色 |
| stroke | 圖形外輪廓線條的顏色，與css顏色定義相同 | none壹无，無(wú)顏色 |
| stroke-width | 圖形外輪廓線條的寬度像素值葱绒，如果使用了一個(gè)百分比，這個(gè)值代表當(dāng)前視圖的百分比 | 1 |
SVG的相關(guān)屬性斗锭，同樣也可以采用css樣式來(lái)定義
.myrect{
fill: red;
stroke: #0FF;
stroke-width: 1;
}
基本圖形元素
rect矩形
<rect>元素用來(lái)繪制矩形地淀，屬性x，y指定矩形左上角的坐標(biāo)岖是，屬性width設(shè)置寬度帮毁，屬性height設(shè)置高度。
<rect x="2" y="2" width="90" height="90" fill="#69C" stroke="red" stroke-width="2"/>
cicrle圓
<cicrle>元素用來(lái)繪制圓形豺撑，屬性cx烈疚，cy指定圓形的圓心坐標(biāo)，屬性r設(shè)置圓的半徑聪轿。
<circle cx="50" cy="50" r="40" stroke="#00f" fill="none" stroke-width="2"/>
ellipse橢圓
<ellipse>元素用來(lái)繪制橢圓爷肝，屬性cx，cy指定橢圓的中心坐標(biāo)，屬性rx設(shè)置橢圓的橫軸半徑阶剑，屬性ry設(shè)置橢圓的縱軸半徑跃巡。
<ellipse cx="50" cy="50" rx="40" ry="30" stroke="#00f" fill="none" stroke-width="2"/>
polygon多邊形
<polygon>元素用來(lái)繪制多邊形，屬性point用來(lái)設(shè)置多邊形的各端點(diǎn)牧愁。points默認(rèn)會(huì)自動(dòng)閉合,無(wú)需最后添加起始點(diǎn)素邪。
<polygon points="2,2 98,2 80,50 98,98 2,98 " stroke="#00f" fill="none" stroke-width="2"/>
line直線
<line>元素用來(lái)繪制直線，x1屬性和y1屬性猪半，表示線段起點(diǎn)的橫坐標(biāo)和縱坐標(biāo)兔朦；x2屬性和y2屬性，表示線段終點(diǎn)的橫坐標(biāo)和縱坐標(biāo)磨确。
<line x1="10" y1="10" x2="100" y2="100" stroke="#00f" fill="none" stroke-width="2"/>
polyline折線
<polyline>元素用來(lái)繪制折線沽甥，屬性point用來(lái)設(shè)置折形的各端點(diǎn)。乏奥。
<polyline points="2,2 98,2 80,50 98,98 2,98" stroke="#00f" fill="none" stroke-width="2"/>
path任意曲線
<path>元素用來(lái)繪制任意曲線摆舟，屬性d設(shè)置曲線的定義。
<path fill="none" stroke="red"
d="M 10,30
A 20,20 0,0,1 50,30
A 20,20 0,0,1 90,30
Q 90,60 50,90
Q 10,60 10,30 z" />
d屬性中路徑的設(shè)置有以下幾種類(lèi)型邓了，可以任意組合恨诱，空格分隔，最后生成實(shí)際的曲線骗炉。簡(jiǎn)單的曲線直接定義照宝，復(fù)雜的曲線一般是使用那個(gè)其他工具自動(dòng)生成。
| 類(lèi)型 | 參數(shù)形式 | 說(shuō)明 | 實(shí)例 |
|---|---|---|---|
| M | x,y | moveTo句葵，移動(dòng)到[x,y] | M10,10 |
| L | x,y | lineTo厕鹃，繪制一條到[x,y]的直線 | L100,10 |
| H | x | horizontal，繪制一條到 [x,currentY] 的橫線 | H100 |
| V | y | vertical乍丈，繪制一條到 [currentX,y] 的豎線 | V100 |
| A | rx,ry rotation arc sweep x,y | arc剂碴，繪制橢圓弧，參數(shù)分別為半徑轻专、旋轉(zhuǎn)角度汗茄，是否超過(guò)180，是否逆時(shí)針铭若，終點(diǎn)坐標(biāo) | A30,50 0 0 1 162.55,162.45 |
| Q | x1,y1 x2,x2 | quadratic，繪制一條控制點(diǎn)為 [x1,y1]递览，目標(biāo)點(diǎn)為 [x2,y2]的二次貝塞爾曲線 | L100,10 |
| T | x,y | 繪制一條目標(biāo)點(diǎn)為 [x,y]的二次貝塞爾曲線叼屠，控制點(diǎn)是當(dāng)前到目標(biāo)的中心對(duì)稱(chēng)點(diǎn)。 | L100,10 |
| C | x1,y1 x2,y2 x3,y3 | 繪制一條目標(biāo)點(diǎn)為 [x3,y3]绞铃，開(kāi)始控制點(diǎn)為[x1,y1],結(jié)束控制點(diǎn)為[x2,y2] 的三次貝塞爾曲線 | L100,10 |
| S | x1,y1 x2,y2 | 繪制一條目標(biāo)點(diǎn)為[x2,y2]镜雨，以[x1,y1]和當(dāng)前點(diǎn)與結(jié)束點(diǎn)的中心對(duì)稱(chēng)點(diǎn)為控制點(diǎn)的三次貝塞爾曲線 | L100,10 |
| Z | - | 閉合路徑 | Z |
關(guān)于貝塞爾曲線，這里是示意圖：
如需進(jìn)一步了解path相關(guān)特性儿捧，建議參考
《深度掌握SVG路徑path的貝塞爾曲線指令》
《MDN-Path—d》
文本和其他元素
text文本
<text>元素用來(lái)繪制文本圖形荚坞，而且可以將漸變挑宠、圖案、剪切路徑颓影、遮罩或者濾鏡應(yīng)用到text上各淀。屬性x，y指定文本圖形左下角的坐標(biāo)诡挂。注意此時(shí)的strok是指文字的線條而不是圖形的邊框碎浇。css中關(guān)于文字的相關(guān)屬性，此處同樣有效璃俗。
<text x="40" y="40" stroke="#0ff" fill="none" stroke-width="1">text文本</text>
foreignObject容器
<foreignObject>元素也是一個(gè)容器元素奴璃，用來(lái)在SVG中引入其他XML定義，常用來(lái)引入HTML元素城豁。
<foreignObject>
<p>foreignObject容器</p>
<ul>
<li>嵌入HTML</li>
<li><a>插入超鏈接</a></li>
</ul>
</foreignObject>
實(shí)例
由于SVG可以看作是HTML元素苟穆，所以可以使用JS和CSS精確控制，同樣可以使用在Vue等前端框架中唱星。這里演示一個(gè)里程碑的實(shí)例雳旅。
