【入門】一篇短文讀懂SVG

SVG是啥？

簡單地說，SVG就是一種圖片格式，是可縮放矢量圖形（Scalable Vector Graphics）的縮寫。電腦的圖片格式往大了說，大概分成兩個陣營：

• 位圖（Bitmap）：我們平時接觸到的圖片大部分是位圖，它就像在一張白紙上描點一樣，圖像由密密麻麻的小點構成，單位面積內的點堆得越多，圖像越清晰。JPEG、PNG、GIF、BMP這些常見圖片格式，包括數碼相機、掃描儀等等設備產生的圖片，通通屬於位圖家族。位圖的優點是無論圖像是什麼類型，只要點陣足夠密集，它總能很好地還原，位圖的缺點是圖像的質量與點陣密切相關，一旦把圖片放大，圖像邊緣總會出現鋸齒，另外，位圖的圖象數據量一般都比較大。

• 矢量圖（Vector Graphics）：所謂矢量圖，就是使用直線和曲線來描述的圖形，這種作圖方式就像真實世界人類按照圖紙作圖一樣，比如這樣一段描述：“從座標（1，1）開始畫一條直線到（20，20）”，“從座標（100，95）處，畫一個直徑為6的同心圓”，等等。矢量圖的重點是對於圖形的描述（即圖紙），只要按照圖紙去執行，就產生了圖像。矢量圖的優點是與像素無關，放大後圖片質量不會受損，又因為它記載的只是圖像的“圖紙”，所以它的數據量小。它的缺點是難以對真實的世界進行表達，比如一張實景照片，你很難用一張 “圖紙” 去描述和還原。矢量圖的常見格式不如位圖那麼多，但應用範圍還是很廣的，曾經的Flash，還有一些更為專業領域如AutoCAD、AI、CoreDraw等都是建立在矢量圖基礎上的系統。

SVG有啥用？

• 因為本質上矢量圖是一張“圖紙”，屬於文本文件，因此數據量小，用在網頁能提高加載速度。
• SVG是可伸縮的，而且放大也不會出現鋸齒，特別適合用來做網頁的ICON之類
• SVG是可以動態變化的，比如可以在不同場景下改變某一幅SVG圖片的背景色，等等。

SVG入門

要精通SVG還是需要花費一定苦功的，本文化繁為簡，略去大部分概念，只講其中最基礎的幾個點，希望能起到拋磚引玉，讓諸位看官能敲開SVG的大門。

首先要明白，SVG就是一張圖，它可以通過像類似

下面就採用

• 首先是製作一張SVG矢量圖，可以通過這個網站創建一些簡單的圖片：
  https://c.runoob.com/more/svgeditor/
  畫好之後，選擇【視圖】【代碼】生成SVG代碼。另外，也可以通過【文件】【保存】將圖形保存為一個獨立的SVG文件。

• 隨便找個文本編輯器，可以看到剛才那幅愛心圖的代碼：

<code>
 
 
  <title>background/<title>
  <rect>
  
   <rect>
  
 
 
  <title>Layer 1/<title>
  <path>
 
/<code>

• 在上面這些代碼中，就本例而言，真正最關鍵的是<path>這一行，d是data的意思，也就是構成整個愛心輪廓的矢量數據（即圖紙）。為了方便起見，本例中刪除了一些與本例不相關的代碼，經過整理的代碼如下，將它保存，或者嵌入任何支持HTML5的瀏覽器中即可運行：/<path>

<code>
 

  
  <rect>
  <path>
 
/<code>

• 這段代碼實現的效果很簡單：當鼠標移動到愛心上面時，變成紅心，挪開時變成黑心，僅此而已，但在整個切換過程中，我們並沒有採用兩幅圖，也沒有任何多餘的JS代碼，純粹是靠修改SVG本身的屬性來完成的，這和處理位圖的方法存在著本質的區別。

1. <rect>是矩形框，它在本例的作用是產生一個白色的背景。/<rect>
2. <path>是矢量路徑，它構成了愛心的輪廓。/<path>
3. 是元素分組，它將背景和愛心歸為一組，當鼠標懸浮的時候愛心將整體變成紅色，如果沒有這個分組，則鼠標懸浮在愛心的“中空位置”時，不會觸發hover效果。
4. #mysvg:hover { fill: red; }，這個就不贅述了，它屬於CSS偽類的常規使用方法。

閱讀更多 編程雜家談 的文章

關鍵字: 電腦 人工智能 讀懂