SVG 簡介
SVG（Scalable Vector Graphics）：可縮放矢量圖形往果，是一種基于 XML 的用于描述二維矢量圖形的圖形格式。SVG 由 W3C 制定，是一個開放標準魄幕。SVG 嚴格遵從 XML 語法，并用文本格式的描述性語言來描述圖像內(nèi)容颖杏，因此是一種和圖像分辨率無關的矢量圖形格式纯陨。
SVG 誕生于 1999 年，2001 年 9 月 4 日 SVG 1.0 成為 W3C 推薦標準留储，2003 年 1 月 4 日 SVG 1.1 成為 W3C 推薦標準翼抠，2011 年 8 月 16 日 SVG 1.1 （第二版）成為 W3C 推薦標準。SVG 2 正在制定中获讳。
SVG 優(yōu)勢
- SVG 是純 XML 文件描述的圖像格式
- 基于上一條 SVG 可以用任意的文本編輯器創(chuàng)建和修改
- SVG 可以縮放并且縮放之后圖像不會失真
- SVG 是 W3C 的開放標準
iconfont 圖標庫提供了 SVG 和 PNG 等格式的圖片阴颖，分別下載兩種格式的圖片，然后在 html 中引入看一下對比效果丐膝。
<!DOCTYPE html>
<html>
<body>
<img style="width: 200px; height: 200px" src="apple.svg" />
<img style="width: 200px; height: 200px" src="apple.png" />
</body>
</html>
下圖可以明顯的看到量愧，SVG 在放大之后不會失真钾菊，對比 PNG 更加清晰。同時我們需要知道 SVG 對比于 PNG 等以像素描述圖片不同侠畔，SVG 的大小取決于圖片信息的復雜程度结缚。
SVG 重要屬性
1. width&height
width 和 height 用于定義 SVG 畫布的大小，單位可以是 px软棺、em红竭、cm 等。默認值是300 x 150（單位px）喘落。
首先來看 width 和 height 為默認值的情況茵宪，具體屬性值設置如下：
- svg width 未設置 height 未設置
- viewBox 未設置
- circle cx="50" cy="50" r="50"
<!DOCTYPE html>
<html>
<body>
<svg xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" version="1.1">
<circle cx="50" cy="50" r="50" fill="#3BACB6" />
</svg>
</body>
</html>
上面是的代碼和顯示效果是未設置 width 和 height 的情況，其中 <circle> 表示繪制運行 cx(center x)是圓心 x 軸坐標瘦棋，cy(center y) 是圓心 y 周坐標稀火，r 是圓的半徑。
接下來我們看給 width和 height賦值之后的效果赌朋。
- svg width=100 height=100
- viewBox 未設置
- circle cx="50" cy="50" r="50"
<!DOCTYPE html>
<html>
<body>
<svg xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" version="1.1" width="100"
height="100">
<circle cx="50" cy="50" r="50" fill="#3BACB6" />
</svg>
</body>
</html>
上面是的代碼和顯示效果是設置 width = 100 和 height = 100 的效果凰狞，可以看到 SVG 的寬高都變成了100。
以上就是對 SVG width 和 height 的作用沛慢，可以理解為 SVG 在 html 中的寬和高赡若。
2. viewBox
第二個重要的屬性是 viewBox ，從字面來理解是視圖盒子团甲，它由四個值組成逾冬，分別是
- x：左上角橫坐標
- y：左上角縱坐標
- width：寬度
- height：高度
viewBox的 width height 和 svg width height 含義不同，我們先來看一下設置 viewBox 的效果躺苦。
- svg width=100 height=100
- viewBox="0 0 50 50"
- circle cx="50" cy="50" r="50"
<!DOCTYPE html>
<html>
<body>
<svg xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" version="1.1" width="100"
height="100" viewBox="0 0 50 50">
<circle cx="50" cy="50" r="50" fill="#3BACB6" />
</svg>
</body>
</html>
這種情況相當于把 svg 畫布上的內(nèi)容進行了放大身腻。接下來我們修改 viewBox 看看縮小的效果。
- svg width=100 height=100
- viewBox="0 0 200 200"
- circle cx="50" cy="50" r="50"
<!DOCTYPE html>
<html>
<body>
<svg xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" version="1.1" width="100"
height="100" viewBox="0 0 200 200">
<circle cx="50" cy="50" r="50" fill="#3BACB6" />
</svg>
</body>
</html>
這種情況相當于把 SVG 畫布上的內(nèi)容進行了縮小匹厘。
下圖是以上 4 個例子的對比嘀趟。
3. preserveAspectRatio
上面的情況 svg width height 和 viewBox 的 width height 都是成比例的。當兩者不成比例時愈诚，我們可以使用 preserveAspectRatio 來調(diào)整對齊和縮放方式去件。格式為：<align> [<meetOrSlice>]
注意：如果沒有設置 viewBox ，preserveAspectRatio 會被忽略
align
align 的取值是 xMin扰路、xMid、xMax 與 YMin倔叼、YMid汗唱、YMax 兩兩的組合。
viewport 表示 SVG 的視口丈攒，即 SVG 寬高所占的區(qū)域哩罪。
下面所說的坐標軸原點如上圖授霸。
| 取值 | 描述 |
|---|---|
| none | 不會按比例縮放，會完全按照 SVG 寬高進行適配际插，可能會變形碘耳。 |
| xMinYMin | viewBox 與 ViewPort x 軸左邊對齊 viewBox 與 ViewPort y 軸左邊對齊 |
| xMinYMid | viewBox 與 ViewPort x 軸左邊對齊 viewBox 與 ViewPort y 軸中點對齊 |
| xMinYMax | viewBox 與 ViewPort x 軸左邊對齊 viewBox 與 ViewPort y 軸下邊對齊 |
| xMidYMin | viewBox 與 ViewPort x 軸中點對齊 viewBox 與 ViewPort y 軸上方對齊 |
| xMidYMid（默認值） | viewBox 與 ViewPort x 軸中點對齊 viewBox 與 ViewPort y 軸中點對齊 |
| xMidYMax | viewBox 與 ViewPort x 軸中點對齊 viewBox 與 ViewPort y 軸下方對齊 |
| xMaxYMin | viewBox 與 ViewPort x 軸右邊對齊 viewBox 與 ViewPort y 軸上方對齊 |
| xMaxYMid | viewBox 與 ViewPort x 軸右邊對齊 viewBox 與 ViewPort y 軸中心對齊 |
| xMaxYMax | viewBox 與 ViewPort x 軸右邊對齊 viewBox 與 ViewPort y 軸下邊對齊 |
meetOrSlice
可取值是 meet 和 slice，其中 meet 是默認值框弛。
其中 meet 的作用是
- viewBox 寬高比保持不變
- viewBox 在 ViewPort 范圍內(nèi)可見
- 盡可能的放大 viewBox辛辨，同時仍然滿足其他的條件
slice 的作用是
- viewBox 寬高比保持不變
- viewBox 盡可能鋪滿 ViewPort（可能造成 viewBox 裁剪）
- viewBox 盡可能的縮小，但是仍然符合其他標準瑟枫。
xMidYMid meet
<!DOCTYPE html>
<html>
<body>
<svg xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" version="1.1" width="100"
height="200" viewBox="0 0 200 200" preserveAspectRatio="xMidYMid meet">
<circle cx="50" cy="50" r="50" fill="#3BACB6" />
</svg>
</body>
</html>
xMidYMid slice
<!DOCTYPE html>
<html>
<body>
<svg xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" version="1.1" width="100"
height="200" viewBox="0 0 200 200" preserveAspectRatio="xMidYMid slice">
<circle cx="50" cy="50" r="50" fill="#3BACB6" />
</svg>
</body>
</html>
slice 的作用是
- viewBox 寬高比保持不變
- viewBox 盡可能鋪滿 ViewPort（可能造成 viewBox 裁剪）
- viewBox 盡可能的縮小斗搞，但是仍然符合其他標準。
SVG 繪制
rect
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<rect width="300" height="100" fill="#3BACB6"/>
</svg>
circle
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<circle cx="50" cy="50" r="50" fill="#3BACB6" />
</svg>
line
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<line x1="0" y1="0" x2="100" y2="100" style="stroke:#3BACB6;stroke-width:5" />
</svg>
polygon
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<polygon points="0,0 100,100 0,100" style="fill:#3BACB6;" />
</svg>
path
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<path d="M0 0 L100 100 L0 100 Z" style="fill:#3BACB6;" />
</svg>
M：moveto
L：lineto
Z：closepath
其他
SVG 還提供了很多其他的元素來幫助我們繪制各種各樣的圖形慷妙，具體可參考僻焚。
參考資源
https://www.w3schools.com/graphics/svg_intro.asp
https://zh.wikipedia.org/wiki/%E5%8F%AF%E7%B8%AE%E6%94%BE%E5%90%91%E9%87%8F%E5%9C%96%E5%BD%A2
https://developer.mozilla.org/zh-CN/docs/Web/SVG/Attribute/preserveAspectRatio
https://developer.mozilla.org/zh-CN/docs/Web/SVG/Element
