SVG、PNG、JPG 該怎麼選？

網頁上九成的圖片都屬於 SVG、PNG 或 JPG 其中之一。乍看之下差不多，但適合的場景差別很大，選錯了不是浪費體積就是犧牲畫質。

一句話判斷法

先問自己一個問題：來源是形狀組成的，還是像素組成的？

• 形狀（圖示、Logo、示意圖、圖表）→ SVG
• 像素 + 銳利邊緣（螢幕截圖、UI 稿、像素畫）→ PNG
• 像素 + 漸層（照片、算圖）→ JPG

這條規則可以涵蓋九成情況，剩下一成再微調就好。

一覽表

格式	圖形類型	壓縮方式	透明	動畫	平面圖形典型體積	適合	不適合
SVG	向量	無損	支援	支援（CSS/SMIL/JS）	最小	圖示、Logo、示意圖、圖表	照片、複雜濾鏡
PNG	點陣	無損	支援（alpha）	不支援	中到大	截圖、像素畫、含文字的圖	照片（檔案大）
JPG	點陣	有損	不支援	不支援	照片體積小	照片、漸層	銳利邊緣、文字、透明

SVG：可縮放、體積小、可編輯

SVG 存的是向量路徑，所以在任何大小下都是清晰的。以平面圖形來說，它通常是三者中體積最小的，而且可以用文字編輯器改，用 CSS 套樣式，用 JS 或 SMIL 做動畫。

適合： 圖示、Logo、插畫、資料視覺化，任何需要縮放的圖。

注意： 複雜漸層與濾鏡會讓檔案變大；不同瀏覽器對 SVG 濾鏡的支援也不一致。

PNG：無損點陣

PNG 是一種基於像素、無損壓縮並支援透明通道的格式。你放進去的每個像素都原樣輸出，因此特別適合截圖、像素畫、UI 稿這類需要銳利邊緣的圖。

適合： 截圖、像素畫、含文字的圖、任何在有損壓縮下會變模糊的情境。

注意： 用在照片上體積會急遽膨脹。一張 1920×1080 的照片，PNG 可能是同品質 JPG 的十倍大。

JPG：適合照片的有損格式

JPG 會捨棄人眼不容易察覺的資訊，換來明顯更小的檔案。在品質 80–90 下，它與原圖幾乎無法區分，但體積可以縮小 5–10 倍。

適合： 照片、算圖、任何含有平滑漸層的圖。

注意： 銳利邊緣（UI 截圖、文字）會出現肉眼可見的光暈。

互轉

• SVG → PNG / JPG： 目標平台不支援 SVG 時，使用我們的 SVG 轉 PNG 或 SVG 轉 JPG。
• PNG → SVG： 向量化（tracing）對平面圖形有效，對照片效果很差。PNG 轉 SVG 工具適合圖示與 Logo。
• JPG → PNG： 使用率不高，但當你需要透明通道時就得轉，因為 JPG 沒有 alpha 通道。

拿不定主意時，先回到那一句話規則，再依需求微調。

參考資料

• MDN：圖片檔案類型與格式指南（英文）介紹了 SVG、PNG、JPEG 的技術細節。
• web.dev：選擇合適的圖片格式（英文）說明了格式選擇對頁面效能的影響。