SVG 簡介
SVG（Scalable Vector Graphics）：可縮放矢量圖形，是一種基于 XML 的用于描述二維矢量圖形的圖形格式。SVG 由 W3C 制定，是一個開放標準。SVG 嚴格遵從 XML 語法，并用文本格式的描述性語言來描述圖像內容，因此是一種和圖像分辨率無關的矢量圖形格式。
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 優勢
- SVG 是純 XML 文件描述的圖像格式
- 基于上一條 SVG 可以用任意的文本編輯器創建和修改
- 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 畫布上的內容進行了放大。接下來我們修改 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 畫布上的內容進行了縮小。
下圖是以上 4 個例子的對比。
3. preserveAspectRatio
上面的情況 svg width height 和 viewBox 的 width height 都是成比例的。當兩者不成比例時，我們可以使用 preserveAspectRatio 來調整對齊和縮放方式。格式為：<align> [<meetOrSlice>]
注意：如果沒有設置 viewBox ，preserveAspectRatio 會被忽略
align
align 的取值是 xMin、xMid、xMax 與 YMin、YMid、YMax 兩兩的組合。
viewport 表示 SVG 的視口，即 SVG 寬高所占的區域。
下面所說的坐標軸原點如上圖。
| 取值 | 描述 |
|---|---|
| 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 范圍內可見
- 盡可能的放大 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
