圖片SVG向量格式
又瘦又小的SVG向量格式，跟JPG、PNG有什麼差？天矽科技網頁設計
SVG檔案
SVG是Scalable Vector Graphics可縮放向量圖形的簡稱，它是一種可延伸標記式語言(XML)，用於描述二維向量圖型的圖片格式，是由W3C所制定的一個開放標準。資料來源：維基百科
簡單來說，SVG格式就是XML的一種，用於向量圖片，是一種普通的文字檔案，用一般的文字編輯器即可檢視或修改。
▲SVG文字檔案
SVG檔常見於網站的Logo，像是攝陽企業的Logo就是使用SVG格式，如下圖。
雖然，天矽科技的前端設計師不會主推，並要求客戶一定要提供這樣的格式檔案，因為我們知道客戶轉檔不方便，不過SVG確實是一個不錯的選擇。
另外，SVG檔案除了具有格式小的優勢之外，前端設計師也常常利用它來製作動畫，設計師透過Illustrator製作完圖像，會轉檔成SVG檔來獲取原始碼，如此一來，設計師則可比以往更快速的獲取物件，編寫animation。
像是2022台北燈節Banner的燈條閃爍動畫，就是使用SVG檔案製作。
SVG、PNG與JPG檔比較
說到圖檔，就一定會提到PNG與JPG這兩個最常見的檔案格式。PNG與JPG檔案皆屬於點陣圖模式，而SVG則屬於向量圖模式，這三種格式都有自己的優缺點。
| 向量插畫 | 透明背景 | 壓縮照片 | 點陣圖 | 檔案大小 | |
|---|---|---|---|---|---|
| SVG | V | V | 小 | ||
|
|
V | V | V | V | 大 |
| JPG | V | V | 中 |
基本上，網站上只要圖片屬於向量插圖，大多都會使用SVG的格式，因為它的檔案大小非常小，放在網頁時也不會有解析度的問題，尤其是用於近幾年流行的RWD響應式設計，無論螢幕裝置多大多小，使用SVG圖片格式都不會有失真的狀況發生。
從上圖我們可以看到PNG、JPG與SVG放大相同向量LOGO的狀況，失真情形以JPG最為嚴重，PNG雖沒有過度的失真情形，但檔案仍有模糊的情況發生，若再加以放大則會與JPG有相同的情形；而SVG雖已無法放大到與另外兩張圖片相同尺寸，但SVG仍是保持向量圖檔的銳利表現。
▲維基百科提供之SVG表現
JPG轉SVG可以嗎？
如果想要將JPG檔縮小，可以轉成SVG格式嗎？雖然實際上是可以，但我們建議盡量不要，因為這樣會造成失真的狀況發生，如果想要將JPG檔縮小，建議可以使用WebP的格式。
※ WebP是一種在精細度不降低的前提下，將圖片縮小的檔案格式。
圖檔市佔率
根據W3Techs於2022年1月10日提供的資料報告顯示，PNG檔是最多網站使用的格式，再來是JPEG(JPG)以及SVG。
- PNG：80.4%
- JPEG：74.5%
- SVG：41.8%
- Gif：20.9%
- WebP：3.1%
- ICO：0.2%
- BMP：0.1%
如何轉存SVG檔
大多數的Logo都使用Adobe的Illustrator(簡稱Ai)設計，而Ai也是一款向量圖型的繪製軟體，在向量的插畫檔案製作完成後，就可以直接轉存成SVG檔，不僅如此還能直接轉成HTML原始碼，是非常方便的選擇。
▲開啟Ai圖檔
▲另存新檔/ 選擇SVG
▲按下確定即可
▲按下「顯示SVG程式碼」則可獲得SVG的html語法
※ 更多詳細SVG選項可參閱Adobe支援：SVG
所以，想要網站中的向量圖型可以隨著畫面大小改變而不失去原有的解析度，就可以利用SVG的檔案格式唷！
