SVG 學習筆記

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

SVG 簡介

SVG 優勢

SVG 重要屬性

1. width&height

2. viewBox

3. preserveAspectRatio

align

meetOrSlice

xMidYMid meet

xMidYMid slice

SVG 繪製

rect

circle

line

polygon

path

其他

參考資源

電子科技大學計算機科學與技術就讀體驗

Golang爬蟲代理接入的技術與實踐

GitHub Actions 自動部署前端 Vue 項目

Swift 調用 OC 實用技巧 Swift App Swift Framework

vue-router 使用與原理分析簡介使用原理參考

聊聊Cookie的SameSite屬性

使用useReducer + useContext 代替 react-redux

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結