基本概念和語法
SVG 的定義和歷史
SVG 是可縮放矢量圖形（Scalable Vector Graphics）的縮寫，它是一種用於描述二維矢量圖形的 XML 標記語言。與傳統的柵格圖像不同，SVG 圖像可以無限縮放而不會失真，同時也支持交互和動畫等特性。
SVG 最早於 1999 年由 W3C 發佈，用於在 Web 上展示矢量圖形，並於 2001 年正式成爲標準。在過去的二十多年中，SVG 經歷了多次更新和改進，增加了更多的功能和特性，如動畫、交互等，並逐漸得到廣泛的應用。
SVG 2.0 於 2016 年 9 月 15 日成爲 W3C 候選推薦標準，最新草案於 2020 年 5 月 26 日發佈。
SVG 的優點和缺點
SVG 的優點包括：
- 矢量圖形縮放不會失真（像素點數量不變而導致圖像出現模糊、鋸齒等），而光柵圖形（PNG、JPG）縮放會導致失真。
- 矢量圖形：基於矢量的點、線、形狀和數學公式來構建的圖形，該圖形是沒有像素的，放大縮小是不會失真的。
- 光柵圖形：由像素點構建的圖像——微小的彩色方塊，大量像素點可以形成高清圖像，比如照片。圖像像素越多，質量越高。
- 其他優點：靈活（JS 和 CSS 操作）；支持動畫；輕量（尺寸小）；可打印（不會失真）；利於 SEO（會被搜索引擎索引）；可壓縮；易於編輯等。
SVG 的缺點包括：
- 不適和高清圖片製作（非像素級渲染）；
- SVG 圖像變得複雜時，加載會比較慢；
- 存在部分瀏覽器兼容問題。
SVG 的應用場景
- SVG 非常適合顯示矢量徽標（Logo）、圖標（ICON）和其他幾何設計。
- SVG 適合應用在需適配多種尺寸的屏幕上展示，因爲SVG的擴展性更好。
- 當需要創建簡單的動畫時，SVG 是一種理想的格式。
- SVG 可以與 JS 交互來製作線條動畫、過渡和其他複雜的動畫。
- SVG 可以與 CSS 動畫交互，也可以使用自己內置的 SMIL 動畫。
- SVG 也非常適合製作各種圖表（條形圖、折線圖、餅圖、散點圖等等），以及大屏可視化頁面開發。
SVG 的文件結構和語法規則
SVG 的文件結構和語法規則包括以下幾點：
- 文件格式：SVG 文件是一種基於 XML 語法的文本文件，以 .svg 或 .svgz 爲後綴名。其中，.svg 是未壓縮的文本格式，而 .svgz 是經過壓縮的二進制格式。
- XML聲明：SVG文件必須以XML聲明開始，指定XML版本和字符集。例如：
<?xml version="1.0" encoding="UTF-8"?>
- 命名空間：SVG使用命名空間來區分不同元素和屬性的定義和作用（現代瀏覽器會默認添加）。SVG 默認命名空間爲
"http://www.w3.org/2000/svg"，可以通過 xmlns 屬性來指定和擴展其他命名空間。例如：
<svg xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
- 根元素 SVG 文件必須包含一個根元素
<svg>，表示圖形容器的大小和屬性。其中，width 和 height 屬性指定畫布的寬度和高度，viewBox 屬性指定可視範圍的位置和大小。 - 元素和屬性 SVG 文件中包含多個元素和屬性，用於描述和繪製圖形。常見的元素包括
<rect>、<circle>、<line>、<path>等，常見的屬性包括 fill、stroke、stroke-width、transform 等。 - 嵌套和順序 SVG 元素可以嵌套在其他元素中，形成複雜的圖形結構。元素的順序和層次決定了它們的顯示順序和遮擋關係。
圖形繪製基礎
SVG 座標系和單位
SVG 使用的座標系統（網格系統）和 Canvas 的差不多（笛卡爾座標系）。座標系是以左上角爲 (0,0) 座標原點，座標以像素爲單位，x 軸正方向是向右，y 軸正方向是向下。
SVG 座標系統，在沒有明確指定單位時，默認以像素爲單位，我們也可以手動指明座標系的單位。
SVG 座標系分爲視口座標系和用戶座標系：
視口座標系（視口-viewport）：視口座標系是在視口上建立的座標系，原點在視口左上角的點(0, 0)，x軸正向向右，y軸正向下。
用戶座標系（視圖框-viewBox）：用戶座標系是建立在 SVG 視口上的座標系。該座標系最初與視口座標系相同——它的原點位於視口的左上角。使用 viewBox 屬性，可以修改初始用戶座標系，使其不再與視口座標系相同。
SVG 常見形狀和元素
常見的 SVG 形狀包括：矩形（rect）、圓形（circle）、橢圓形（ellipse）、線段（line）、折線（polyline）、多邊形（polygon）
常見的 SVG 元素還包括：
- path：路徑
- image：圖片
- text、tspan：文字
- g 、defs、use、symbols：圖形組合和複用
SVG 路徑和路徑命令
在 SVG 中，可以使用路徑 <path> 來描述複雜的圖形。路徑由一系列的路徑命令組成，常用的路徑命令包括：M（移動到）、L（畫直線）、Z（關閉路徑）、H（水平線）、V（垂直線）、C（貝塞爾曲線）等。
SVG 填充和描邊效果
使用屬性 fill（填充） 和 stroke（描邊），其中描邊屬性中 stroke-dasharray（將虛線類型應用在邊框上）和 stroke-dashoffset（指定在dasharray模式下路徑的偏移量）是 SVG 路徑動畫的應用原理。
填充和描邊也能使用 css 來進行控制，其 css 樣式優先級爲：
內聯的 style > defs 中的 style > 外部 / head 內部 > 屬性 fill
SVG 漸變和濾鏡效果
SVG 漸變有兩種類型：線性漸變和徑向漸變
線性漸變使用 linearGradient 和 stop 元素，例如：
<linearGradient id="gradient1">
<stop offset="0%" stop-color="red"></stop>
<stop offset="50%" stop-color="green"></stop>
<stop offset="100%" stop-color="blue"></stop>
</linearGradient>
濾鏡效果通過在 defs 中定義，比如定義一個高斯模糊效果：
<defs>
<!-- 高斯模糊效果 -->
<filter id="blurFilter">
<feGaussianBlur stdDeviation="8"></feGaussianBlur>
</filter>
</defs>
SVG 的形變操作
SVG 的形變支持平移（translate）、旋轉（rotate）等，注意：形變會修改座標系，SVG 渲染是先形變修改了座標系後，根據新座標系再設置元素 xy 座標。
SVG 的描邊動畫
原理爲 stroke-dasharray（描邊虛線） 和 stroke-dashoffset（虛線偏移量） 屬性的設置。將描邊設置爲虛線，接着將描邊偏移到不可見處，通過動畫讓描邊慢慢變爲可見，這樣就產生了動畫效果了。例如：
#line {
/* 指定爲虛線，300px大於或等於路徑長度，虛線和偏移量大小會影響動畫速度*/
stroke-dasharray: 300px;
/* 可見 */
stroke-dashoffset: 300px;
animation: line1Move 2s linear forwards;
}
@keyframes line1Move {
100% {
/* 可見 */
stroke-dashoffset: 0px;
}
}
支持 stroke 屬性的元素都能實現該動畫，比如：path、ellipse、polyline 等。
動畫和交互
SVG 動畫的實現方式
-
用 JS 腳本實現：通過各種處理 SVG 的 JavaScript 庫實現動畫和交互效果。
-
用 CSS 樣式實現：主要是使用 CSS3 的動畫屬性。
-
用 SMIL 實現：一種基於 SMIL 語言實現的 SVG 動畫。
SMIL（Synchronized Multimedia Integration Language 同步多媒體集成語言，是W3C推薦的可擴展標記語言，用於描述多媒體演示）
SVG 的 SMIL 動畫元素
SVG 中支持 SMIL 動畫的元素：
- set：經過特定時間間隔後，將屬性設置爲某個值（不是過度動畫效果）。
- animate：給某個屬性創建過度動畫效果。需將animate元素嵌套在要應用動畫的元素內。
- animateTransform：指定目標元素的形變（transform）屬性，從而允許控制元素的平移、旋轉、縮放或傾斜動畫（類似於 CSS3 的形變）。
- animateMotion：定義了一個元素如何沿着運動路徑進行移動。
SVG 動畫庫-Snap.svg
Snap.svg 是一個專門用於處理 SVG 的 JavaScript 庫 ( 類似jQuery )。
SVG 動畫庫-GSAP 動畫庫
GSAP 全稱是（ GreenSock Animation Platform）GreenSock 動畫平臺。
GSAP 是一個強大的 JavaScript 動畫庫，可讓開發人員輕鬆的製作各種複雜的動畫。
與 Snap.svg 不一樣，GSAP 無論是 HTML 元素、還是 SVG、或是 Vue、React 組件的動畫，都可以滿足你的需求。