【技術學習】SVG-邊學邊做

---

theme: healer-readable highlight: vs

---

一、選擇一項技術的原因

“只識其形，不知其根”。這是我之前對SVG掌握程度。SVG並不是一項新技術，但是我並沒有熟練掌握它。一方面因為日常工作中，鮮少用到，還有一方面是因為SVG繪製的成本相對找設計的同事幫忙提供UI高一些。

日常開發趨於穩定，為了避免出現安逸心理，以及對突破的追求，我開始自己尋找一些技術挑戰。於是，對SVG的學習提上了日程。

之所以選擇SVG，是因為之前正好做了項目UI的重構，其中Icon組件，固定思維是使用font 圖標，後來細想了一下是否可以使用SVG繪製實現，於是翻看了Ant Design的代碼，果然，Ant Design已經用SVG 圖標替換了原先的 font 圖標。

js // Ant Design文檔中列的使用SVG圖標的優勢 - 完全離線化使用，不需要從 CDN 下載字體文件，圖標不會因為網絡問題呈現方塊，也無需字體文件本地部署。 - 在低端設備上 SVG 有更好的清晰度。 - 支持多色圖標。 - 對於內建圖標的更換可以提供更多 API，而不需要進行樣式覆蓋。

二、找對適合自己的路

2.1 凡有所學，皆成性格

作為一個努力的普通人，我有時候會害怕努力之後仍然沒有達到自己想要的結果。有時候擔心耗費了精力和時間，研究了某個技術研究，但是無用武之地，難免會感到徒勞無獲的挫敗。

但是隨着時間的推移，我發現當初的積累全都變成了自己自如應對需求的利器。於是，我遇到新的技術，不再瞻前顧後，不再踟躕不決，與其惶惶不可終日的憂心自己要學的太多，不如一鼓作氣的把它拿下。

2.2 哪條大路通羅馬

有時候我會有這樣的錯覺，我將所有的知識點看完，感覺不是很難，就覺得自己都會了。所以學完之後的某一天，真的需要用到它時，並沒有思路到底該怎麼做。

一切皆因對這門技術並沒有達到熟練掌握的程度，只是簡單的熟悉了它的內容。

到底哪條路，才能讓我到達我想去的羅馬？伴隨着嘗試和檢驗，我慢慢掌握了學習的訣竅之一，那便是有目的的邊學邊做。

漫無目的的看一遍技術文檔，能夠記住的內容很少，能夠吸收的更是少之又少。帶着明確目，到底學完一門技術，想要達到的程度是什麼。比如，SVG繪製圖形，基礎圖形繪製很簡單，但是實際工作中的需求一般不會這麼簡單。所以我帶着學完要實現具體功能的目前去看它的文檔。對於不熟悉的技術，怎麼確定具體功能呢？我會找一些成熟的優秀的網站，看那些網站應用該技術實現了哪些功能，具體是怎麼實現的。比如antd已使用SVG 圖標替換了原先的 font 圖標，裏面有大量的圖形供我參考，我可以邊學邊做，還能查看參考答案。

於是，我找到了通往我想去的羅馬的路。

三、活學-SVG基礎

其中對於SVG的知識點解釋大部分來自MDN

3.1 識其形

介紹

SVG,可縮放矢量圖形（Scalable Vector Graphics），是一種用於描述二維的矢量圖形，基於 XML 的標記語言。作為一個基於文本的開放網絡標準，SVG能夠優雅而簡潔地渲染不同大小的圖形，並和CSS，DOM，JavaScript和SMIL等其他網絡標準無縫銜接。本質上，SVG 相對於圖像，就好比 HTML 相對於文本。

基礎要素

HTML提供了定義標題、段落、表格等等內容的元素。與此類似，SVG也提供了一些元素，用於定義圓形、矩形、簡單或複雜的曲線。一個簡單的SVG文檔由

從這些開始，SVG可以變得更加複雜。SVG支持漸變、旋轉、動畫、濾鏡效果、與JavaScript交互等等功能，但是所有這些額外的語言特性，都需要在一個定義好的圖形區域內實現。

瀏覽器兼容

所有的現代瀏覽器都支持SVG，在某些情況下甚至幾個版本都支持SVG。Can I use上有一份比較詳細的支持SVG的瀏覽器列表，Firefox 1.5以後的版本支持SVG的部分內容，並且支持的程度越來越高。

規範

1）SVG的元素和屬性必須按標準格式書寫，因為XML是區分大小寫的（這一點和HTML不同）； 2）SVG裏的屬性值必須用引號引起來，就算是數值也必須這樣做。

3.2 座標定位

網格

svg繪製圖形，是在它提供的畫布上面，使用座標系統或者説網格系統。這種座標系統是：以頁面的左上角為(0,0)座標點，座標以像素為單位，x軸正方向是向右，y軸正方向是向下。

js <svg width='200' height='200' fill='#555555'> <rect x='50' y='50' width='50' height='50' /> </svg>

如下圖，我將座標原點標註出來了，背景是10*10的網格，可以很明顯的看出來，繪製的矩形x軸距離原點是50像素，y軸距離原點是50像素，自身寬高都是50像素。

什麼是 "像素"?

基本上，在 SVG 文檔中的1個像素對應輸出設備（比如顯示屏）上的1個像素。

SVG也支持圖形縮放。SVG可以定義絕對大小（比如使用“pt”或“cm”標識維度）同時SVG也能使用相對大小，只需給出數字，不標明單位，輸出時就會採用用户的單位。

通過設置viewBox可以實現縮放的效果：

js <svg width='200' height='200' fill='#555555' viewBox='0 0 100 100'> <rect x='50' y='50' width='100' height='100' /> </svg> viewBox屬性定義了畫布上可以顯示的區域：從(0,0)點開始，100寬100高的區域。這個100100的區域，會放到200*200的畫布上顯示。效果如下圖，此時矩形x軸距離原點是100像素，y軸距離原點是100像素，自身寬高都是100像素。這樣就達到了兩倍放大的效果。

用户座標系統

用户單位和屏幕單位的映射關係被稱為用户座標系統。除了縮放之外，座標系統還可以旋轉、傾斜、翻轉。默認的用户座標系統1用户像素等於設備上的1像素（但是設備上可能會自己定義1像素到底是多大）。在定義了具體尺寸單位的SVG中，比如單位是“cm”或“in”，最終圖形會以實際大小的1比1比例呈現。

3.3 基本形狀

不同的元素對應着不同的形狀，並且使用不同的屬性來定義圖形的大小和位置。有一些形狀因為可以由其他的形狀創建而略顯宂餘， 但是它們用起來方便，可讓我們的SVG文檔簡潔易懂。

矩形

rect元素可以繪製矩形 。

js <rect x="10" y="10" width="30" height="30"/> <rect x="60" y="10" rx="5" ry="5" width="30" height="30"/>

不難發現，右邊的圖形相較左邊的圖形是帶圓角的，這是由於右邊的圖形設置了rx和ry。這裏介紹一下矩形的6個基本元素：

x：矩形左上角的x位置

y：矩形左上角的y位置

width：矩形的寬度

height：矩形的高度

rx：圓角的x方位的半徑

ry：圓角的y方位的半徑

通過這6個基本屬性就可以控制矩形在屏幕上的位置和形狀。

圓形

circle元素可以繪製圓形。

js <circle cx='40' cy='40' r='20' /> 上面的代碼，在頁面的展示如下圖：

仔細看會發現，圓心在x:40、y:40的點上，這也是cx和cy這兩個元素起到的作用：

r:圓的半徑

cx:圓心的x位置

cy:圓心的y位置

橢圓

Ellipse 是circle元素更通用的形式，你可以分別縮放圓的x半徑和y半徑（通常數學家稱之為長軸半徑和短軸半徑）。

js <ellipse cx='40' cy='40' rx='20' ry='10' /> 上面的代碼，在頁面的展示如下圖：

與圓形相比，橢圓可以分別設置r半徑和y半徑。注：繪製橢圓時，r半徑和y半徑必須都設置，否則會變成圓形。

rx:橢圓的x半徑

ry:橢圓的y半徑

cx:橢圓中心的x位置

cy:橢圓中心的y位置

線條

Line 繪製直線。它取兩個點的位置作為屬性，指定這條線的起點和終點位置。

js <line x1='10' x2='50' y1='10' y2='50' /> 上面的代碼，在頁面的展示如下圖：

直線由兩個點，四個元素控制在屏幕上的位置和形狀。

x1:起點的x位置

y1:起點的y位置

x2:終點的x位置

y2:終點的y位置

折線

Polyline是一組連接在一起的直線。因為它可以有很多的點，折線的的所有點位置都放在一個points屬性中：

js <polyline points='10 10, 50 10, 50 50, 50 50, 90 50, 90 90, 90 90, 130 90, 130 130' /> 上面的代碼，在頁面的展示如下圖：

折線由一組點集合控制在屏幕上的位置和形狀。

points：點集數列。每個數字用空白、逗號、終止命令符或者換行符分隔開。每個點必須包含2個數字，一個是x座標，一個是y座標。所以點列表 (0,0), (1,1) 和(2,2)可以寫成這樣：“0 0, 1 1, 2 2”。

多邊形

polygon和折線很像，它們都是由連接一組點集的直線構成。不同的是，polygon的路徑在最後一個點處自動回到第一個點。需要注意的是，矩形也是一種多邊形，如果需要更多靈活性的話，你也可以用多邊形創建一個矩形。

js // 五角星 <polygon points="50 25, 55 40, 70 40, 60 50, 65 65, 50 55, 35 65, 40 50, 30 40, 45 40"/> // 矩形 <polygon points="100 20, 150 20, 150 70, 100 70"/> 上面的代碼，在頁面的展示如下圖：

假如你有一支畫筆，從一點出發，polygon可以讓你自動回到起點，完成一個多邊形。

points：點集數列。每個數字用空白符、逗號、終止命令或者換行符分隔開。每個點必須包含2個數字，一個是x座標，一個是y座標。所以點列表 (0,0), (1,1) 和(2,2)可以寫成這樣：“0 0, 1 1, 2 2”。路徑繪製完後閉合圖形，所以最終的直線將從位置(2,2)連接到位置(0,0)。

3.4 路徑

元素是SVG基本形狀中最強大的一個。 你可以用它創建線條, 曲線, 弧形等等。

path只需要設定很少的點，就可以創建平滑流暢的線條（比如曲線）。雖然polyline元素也能實現類似的效果，但是必須設置大量的點（點越密集，越接近連續，看起來越平滑流暢），並且這種做法不能夠放大（放大後，點的離散更明顯）。所以在繪製SVG時，對路徑的良好理解很重要

3.4.1 直線命令

M

M是需要移動到的點的x軸和y軸的座標。M命令僅僅是移動畫筆，但不畫線。所以M命令經常出現在路徑的開始處，用來指明從何處開始畫。

L

L命令將會在當前位置和新位置（L前面畫筆所在的點）之間畫一條線段。L需要兩個參數，分別是一個點的x軸和y軸座標。

H

H命令繪製水平線。這個命令都只帶一個參數，標明在x軸或y軸移動到的位置，因為它只在座標軸的一個方向上移動。

V

V命令繪製垂直線。這個命令都只帶一個參數，標明在x軸或y軸移動到的位置，因為它只在座標軸的一個方向上移動。

Z

Z命令會從當前點畫一條直線到路徑的起點。Z命令不用區分大小寫。

示例

js <path d='M10 10 h 80 v 80 h -80 Z' fill='transparent' stroke='black' /> 上述路徑是：畫筆移動到(10,10)點，由此開始，向右移動80像素構成一條水平線，然後向下移動80像素，然後向左移動80像素，然後再回到起點。繪製的圖形如下：

3.4.2 曲線命令

繪製平滑曲線的命令有三個，其中兩個用來繪製貝塞爾曲線，另外一個用來繪製弧形或者説是圓的一部分。貝塞爾曲線的類型有很多，但是在path元素裏，只存在兩種貝塞爾曲線：三次貝塞爾曲線C，和二次貝塞爾曲線Q。

貝塞爾曲線

三次貝塞爾曲線需要定義一個點和兩個控制點，所以用C命令創建三次貝塞爾曲線，需要設置三組座標參數：

js C x1 y1, x2 y2, x y (or c dx1 dy1, dx2 dy2, dx dy) S

S命令可以用來創建貝塞爾曲線，命令如下:

js S x2 y2, x y (or s dx2 dy2, dx dy)

如果S命令跟在一個C或S命令後面，則它的第一個控制點會被假設成前一個命令曲線的第二個控制點的中心對稱點。如果S命令單獨使用，前面沒有C或S命令，那當前點將作為第一個控制點。

js <path d='M10 80 C 40 10, 65 10, 95 80 S 150 150, 180 80' stroke='black' fill='transparent' /> 效果如下：

Q

Q命令可以創建二次貝塞爾曲線，命令如下：

js Q x1 y1, x y (or q dx1 dy1, dx dy)

它比三次貝塞爾曲線簡單，只需要一個控制點，用來確定起點和終點的曲線斜率。因此它需要兩組參數，控制點和終點座標。

js <path d='M10 80 Q 95 10 180 80' stroke='black' fill='transparent' /> 效果如下：

T

T命令可以創建二次貝塞爾曲線。命令如下：

js T x y (or t dx dy) 快捷命令T會通過前一個控制點，推斷出一個新的控制點。需要注意的是，T命令前面必須是一個Q命令，或者是另一個T命令，才能達到這種效果。如果T單獨使用，那麼控制點就會被認為和終點是同一個點，所以畫出來的將是一條直線。

js <path d='M10 80 Q 52.5 10, 95 80 T 180 80' stroke='black' fill='transparent' /> 效果如下：

A

弧形命令A是另一個創建SVG曲線的命令。命令如下：

js A rx ry x-axis-rotation large-arc-flag sweep-flag x y a rx ry x-axis-rotation large-arc-flag sweep-flag dx dy

基本上，弧形可以視為圓形或橢圓形的一部分。弧形命令A的前兩個參數分別是x軸半徑和y軸半徑。

js <path d="M10 315 L 110 215 A 30 50 0 0 1 162.55 162.45 L 172.55 152.45 A 30 50 -45 0 1 215.1 109.9 L 315 10" stroke="black" fill="green" stroke-width="2" fill-opacity="0.5"/>

效果如下：

3.5 填充和邊框

既然是圖形，那麼內部顏色和邊框屬性都是可以改變的。

3.5.1 上色

fill屬性設置對象內部的顏色。stroke屬性設置繪製對象的線條的顏色。可以使用在HTML中的CSS顏色命名方案定義它們的顏色，比如説顏色名（像red這種）、rgb值（像rgb(255,0,0)這種）、十六進制值、rgba值，等等。

js <rect x="10" y="10" width="100" height="100" stroke="red" fill="#fff" fill-opacity="1" stroke-opacity="1" stroke-width='3'/>

上面代碼將矩形填充為白色，不透明度為1。邊框的寬度3像素，顏色為紅色，不透明度為0.5。屬性stroke-opacity控制描邊的不透明度。stroke-width屬性定義了描邊的寬度。

3.5.2 描邊

stroke-width

它影響描邊寬度。

stroke-linecap

它控制邊框終點的形狀，它有三個可能值：

butt用直邊結束線段，它是常規做法，線段邊界90度垂直於描邊的方向、貫穿它的終點。

square的效果差不多，但是會稍微超出實際路徑的範圍，超出的大小由stroke-width控制。

round表示邊框的終點是圓角，圓角的半徑也是由stroke-width控制的。

stroke-linejoin

它用來控制兩條描邊線段之間，用什麼方式連接。

它有三個可用的值：

miter是默認值，表示用方形畫筆在連接處形成尖角。

round表示用圓角連接，實現平滑效果。

bevel，連接處會形成一個斜接。

stroke-dasharray

它將虛線類型應用在描邊上。

js <path d="M 10 75 Q 50 10 100 75 T 190 75" stroke="black" stroke-linecap="round" stroke-dasharray="5,10,5" fill="none"/> <path d="M 10 75 L 190 75" stroke="red" stroke-linecap="round" stroke-width="1" stroke-dasharray="5,5" fill="none"/>

stroke-dasharray屬性的參數，是一組用逗號分割的數字組成的數列。每一組數字，第一個用來表示填色區域的長度，第二個用來表示非填色區域的長度。所以在上面的例子裏，第二個路徑會先做5個像素單位的填色，緊接着是5個空白單位，然後又是5個單位的填色。如果你想要更復雜的虛線模式，你可以定義更多的數字。

其它

另外還有一些關於填充和邊框的屬性，包括fill-rule，用於定義如何給圖形重疊的區域上色；stroke-miterlimit，定義什麼情況下繪製或不繪製邊框連接的miter效果；還有stroke-dashoffset，定義虛線開始的位置。

3.5.3 使用css

除了定義對象的屬性外，你也可以通過CSS來樣式化填充和描邊。語法和在html裏使用CSS一樣，只不過你要把background-color、border改成fill和stroke。注意，不是所有的屬性都能用CSS來設置。上色和填充的部分一般是可以用CSS來設置的，比如fill，stroke，stroke-dasharray等，但是不包括下面會提到的漸變和圖案等功能。另外，width、height，以及路徑的命令等等，都不能用css設置。判斷它們能不能用CSS設置還是比較容易的。

CSS可以利用style屬性插入到元素的行間：

或者利用 ```

四、活用-Icon 圖標

我挑選了幾組圖標，我們按由簡入繁的順序，來看一下，根據前面學到的知識，怎麼去實現這些圖標。

4.1 向前和向後

這兩個圖標都是由線條和三角形組成。繪製結果如下圖：

實現思路是由直線和折線組合完成繪製，實現代碼如下：

js <svg width='2em' height='2em'> <line x1='10' y1='5' x2='10' y2='25' style='stroke: #5f5f5f; stroke-width: 3;'></line> <polyline points='24 5 10 15 24 25' fill='#5f5f5f'></polyline>{' '} </svg> <svg width='2em' height='2em'> <line x1='23' y1='5' x2='23' y2='25' style='stroke: #5f5f5f; stroke-width: 3;'></line> <polyline points='7 5 20 15 7 25' fill='#5f5f5f'></polyline>{' '} </svg>

向前圖標，直線起點(10,5)，終點(10,25)，兩點的x軸是一樣的，所以繪製出來的直線是垂直的。折線，起點(24,5)，第二個點(10，15)，終點(24,25)，這樣繪製出來是一個箭頭的圖形，需要進行顏色填充，使用fill屬性控制填充。

向後的圖標，直線與折線位置和向前的圖標相反，且箭頭的方向也相反。

4.2 放大和縮小

這兩個圖標主要由線條和圓組成。繪製結果如下圖：

實現思路是由直線和圓組合完成繪製，實現代碼如下：

js <svg width='40' height='40'> <line x1='15' y1='9' x2='15' y2='21' style='stroke: #5f5f5f; stroke-width: 3;'></line> <line x1='9' y1='15' x2='21' y2='15' style='stroke: #5f5f5f; stroke-width: 3;'></line> <circle cx='15' cy='15' r='12' fill='transparent' stroke='#5f5f5f' stroke-width='2.5' /> <line x1='24' y1='24' x2='29' y2='29' style='stroke: #5f5f5f; stroke-width: 3;'></line> </svg> <svg width='40' height='40'> <line x1='9' y1='15' x2='21' y2='15' style='stroke: #5f5f5f; stroke-width: 3;'></line> <circle cx='15' cy='15' r='12' fill='transparent' stroke='#5f5f5f' stroke-width='2.5' /> <line x1='24' y1='24' x2='29' y2='29' style='stroke: #5f5f5f; stroke-width: 3;'></line> </svg>

放大圖標，垂直直線起點(15,9)，終點(15,21)，水平直線起點(9,15)，終點(21,15)，圓的半徑r為12，圓心在點(15,15)上，傾斜直線起點(24,24)，終點(29,29)。

縮小圖標和放大圖標唯一區別是沒有垂直直線。

4.3 回到頂部和回到底部

這兩個圖標主要是由線條和箭頭組成。繪製結果如下圖：

通過path繪製圖形，需要繪製的點更加多，繪製難度會相對較高。

js <svg width='2em' height='2em' fill='#5f5f5f'> <path d='M4 4.2 L 28 4.2 L 28 6 L 4 6Z M16 10.6 L 19.5 15 L 16.7 15 L 16.7 27.5 L 15.3 27.5 L 15.3 15 L 12.5 15Z '></path> </svg> <svg width='2em' height='2em' fill='#5f5f5f'> <path d='M15.3 5.9 L 15.3 18.4 L 12.5 18.4 L 16 22.8 L 19.5 18.4 L 16.7 18.4 L 16.7 5.9Z M4 28 L 4 26.2 L 28.3 26.2 L 28 28Z'></path> </svg>

正如之前知識點中介紹的，path元素是SVG基本形狀中最強大的一個。只需確定一個起點，你就可以繪製你想要的圖形。比如回到頂部，使用path元素繪製圖形，所有路徑放到路線元素d中，具體繪製路徑如下：

1）從矩形左上角開始，使用M命令，M4 4.2，確定起點(4,4.2)，繪製正式開啟。

2）使用L命令，L 28 4.2，沿着X軸移動到點(4,4.2)，這樣就完成了一條水平直線。

3）使用L命令，L 28 6，沿着Y軸移動到點(28,6)，這樣就完成了一條垂直直線。

4）使用L命令，L 4 6，沿着X軸移動到點(4,6)，這樣就完成了一條水平直線。

5）使用Z命令，命令會從當前點(4,6)畫一條垂直直線到路徑的起點(4,4.2)。到此為止，矩形就繪製完成了。

6）繼續繪製箭頭圖形，從箭頭傘帽的頂端開始，使用M命令， M16 10.6，確定起點(16,10.6)。

7）使用L命令，L 19.5 15，移動到點(19.5 ,15)，這樣就完成了一條傾斜直線。

8）使用L命令，L 16.7 15，沿着X軸移動到點(16.7 ,15)，這樣就完成了一條水平直線。

9）使用L命令，L 16.7 27.5，沿着Y軸移動到點(16.7 ,27.5)，這樣就完成了一條垂直直線。

10）使用L命令，L15.3 27.5，沿着X軸移動到點(15.3 ,27.5)，這樣就完成了一條水平直線。

11）使用L命令，L 15.3 15，沿着Y軸移動到點(15.3,15)，這樣就完成了一條垂直直線。

12）使用L命令，L 12.5 15，沿着X軸移動到點(12.5,15)，這樣就完成了一條水平直線。

13）使用Z命令，命令會從當前點(12.5,15)畫一條傾斜直線到路徑的起點(16,10.6)。到此為止，箭頭圖形就繪製完成了。

經過繪製，一個回到頂部的圖形就完成了，而對path元素以及它的直線命令的運用也基本掌握了。

4.4 歎號

歎號的繪製，我想介紹另一種方式，那就是通過AI軟件繪製的方式。繪製結果如下圖：

設計師同事提供給我們的SVG圖標，我們可以通過IDE打開查看SVG代碼，比如這個歎號圖標，它的SVG代碼如下：

js <svg version='1.1' id='圖層_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 200 200' style='enable-background: new 0 0 200 200' xml:space='preserve' width='40px' height='40px'> <path fill='#5f5f5f' d='M100,183.86c-15.18,0-29.21-3.74-42.09-11.22s-23.07-17.66-30.55-30.55S16.14,115.18,16.14,100 s3.74-29.21,11.22-42.09s17.66-23.07,30.55-30.55S84.82,16.14,100,16.14s29.21,3.74,42.09,11.22s23.07,17.66,30.55,30.55 s11.22,26.92,11.22,42.09s-3.74,29.21-11.22,42.09s-17.66,23.07-30.55,30.55S115.18,183.86,100,183.86z M100,49.72 c-3.06,0-5.68,1.09-7.86,3.28c-2.18,2.18-3.28,4.8-3.28,7.86c0,3.06,1.09,5.68,3.28,7.86c2.18,2.18,4.8,3.28,7.86,3.28 s5.68-1.09,7.86-3.28c2.18-2.18,3.28-4.8,3.28-7.86c0-3.06-1.09-5.68-3.28-7.86C105.68,50.81,103.06,49.72,100,49.72z M105.57,94.43 c0-3.06-0.55-5.68-1.64-7.86s-2.4-3.28-3.93-3.28c-1.53,0-2.84,1.09-3.93,3.28c-1.09,2.18-1.64,4.8-1.64,7.86l-5.57,50.28 c0,3.06,1.09,5.68,3.28,7.86c2.18,2.18,4.8,3.28,7.86,3.28s5.68-1.09,7.86-3.28c2.18-2.18,3.28-4.8,3.28-7.86L105.57,94.43z' /> </svg>

對於複雜的圖標，如果繪製上有困難，可以找設計師同事幫忙提供SVG文件。主要考慮到網站對圖形繪製質量的要求較高，所以大家可以因地制宜。

五、總結

迴歸我們的初衷，對於SVG的學習，我們不僅僅要了解它，更重要的是能夠將它應用到項目中並解決一些問題。

如果真有一項挑戰，比如通過前端代碼繪製複雜的SVG圖形，我想我會更加有信心去勝任，而不是毫無概念，束手無策。

技術實踐的另一個“真理”，多加練習。一起加油，與君共勉。