2026-07-28·4 min read
PNG 與 SVG 比較：標誌和圖形你該用哪個？
PNG 和 SVG 服務於不同目的。了解點陣圖和向量圖形之間的差異，以及何時為標誌、圖示和網頁圖片使用每種格式。
PNG 和 SVG 都廣泛用於標誌和網頁圖形，但它們以根本不同的方式運作。選擇正確的格式會影響品質、可縮放性和檔案大小。以下是如何決定。
根本差異：點陣圖與向量
- PNG 是點陣圖：由像素網格組成。具有固定尺寸。放大會造成像素化。
- SVG 是向量：由描述形狀的數學公式組成。完美縮放到任何大小而不損失品質。
- 這個單一差異決定了你在任何情況下應該使用哪種。
何時使用 SVG
- SVG 最適合：
- 標誌：從 favicon 到看板完美縮放
- 圖示：在任何大小都銳利，檔案極小
- 簡單插圖：幾何形狀、扁平圖形
- 作為圖形的文字：在任何比例都保持完美銳利
- SVG 對簡單圖形通常是較小的檔案，且可用程式碼或 CSS 編輯。
何時使用 PNG
- PNG 最適合：
- 螢幕截圖：擷取基於像素的螢幕內容
- 具有許多顏色的複雜圖片：照片或細節豐富的圖形
- 當你需要點陣圖格式時：用於不支援 SVG 的平台或用途
- 非純向量的含透明度圖形
快速比較
| 特性 | PNG | SVG |
|---|---|---|
| 類型 | 點陣圖（像素） | 向量（數學） |
| 可縮放性 | 固定，會像素化 | 無限，始終銳利 |
| 最適合 | 照片、螢幕截圖 | 標誌、圖示 |
| 檔案大小（簡單圖形） | 較大 | 較小 |
| 檔案大小（照片） | 可運作 | 不適合 |
| 可用程式碼編輯 | 否 | 是 |
| 透明度支援 | 是 | 是 |
你無法（輕易）將 PNG 轉換為 SVG
重要提示：將 PNG 轉換為 SVG 不會真正使其成為向量。你可以將 PNG 描繪成向量路徑，但對於複雜圖形，結果很差。如果你需要 SVG，請在向量軟體中從頭製作，或取得原始向量檔案。然而，將 SVG 轉換為 PNG 既簡單又常見（用於需要點陣圖的平台）。
網頁圖片：考慮 WebP
如果你正在為網頁圖片選擇格式，且圖片不是適合 SVG 的簡單圖形，WebP 為點陣圖提供最佳壓縮。將 PNG 轉換為 WebP以獲得保持品質和透明度的更小檔案。