SVG、PNG、JPG 該怎麼選？

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

一句話判斷法

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

• 形狀（圖示、Logo、示意圖、圖表）→ SVG
• 像素 + 銳利邊緣（螢幕截圖、UI 稿、像素畫）→ PNG
• 像素 + 漸層（照片、算圖）→ 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 通道。

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