SVG vs PNG：向量圖片與點陣圖片的完整比較說明

SVG 和 PNG 解決的是根本不同的問題。SVG 將影像儲存為可無限縮放的數學形狀，品質不因尺寸而變化。PNG 將影像儲存為彩色像素網格，放大超過原始解析度就會模糊。選錯格式，你付出的代價是效能損失、視覺品質受損，或兩者兼有。

兩者的差距比人們預期的大：同一個 Logo，SVG 可能只有 8 KB，PNG（多種尺寸的集合）可能累計超過 100 KB。但對一張照片而言，SVG 根本不是選項。

SVG 與 PNG 的根本差異

SVG 與 PNG 的差異，反映了向量圖形與點陣圖形這個更廣泛的區別。

SVG（可縮放向量圖形）是以 XML 為基礎的格式，使用形狀、線條、曲線和顏色的數學定義來描述影像。你放大 SVG 時，瀏覽器以新的尺寸重新計算並重繪每個形狀。結果永遠清晰，無論是顯示為 16 px 的網站圖示還是 16,000 px 的大型橫幅。

PNG（可攜式網路圖形）是點陣格式，以像素網格的形式儲存影像，每個像素有特定的顏色值。影像有固定解析度。超過原始尺寸放大，就會模糊和出現像素化；縮小時，則是在下載比所需更多的資料。

這個根本差異決定了一切：檔案大小、可縮放性、編輯工作流程，以及每種格式擅長處理的影像類型。

適合使用 SVG 的情境

SVG 在任何原本以向量藝術創作的圖形上都表現出色。以下情境建議使用 SVG：

• Logo——Logo 需要在每種尺寸下都看起來清晰，從 32 px 的瀏覽器分頁圖示到全版橫幅。SVG 用一個檔案搞定所有尺寸。若用 PNG，你需要準備多種解析度的版本。
• 圖示——UI 圖示、導航圖示、社群媒體圖示。實際案例：一個電商網站將 50 個分類圖示從 PNG 格式（共 1.2 MB）改為 SVG 後，合計只有約 95 KB——節省了 92%。
• 插圖和圖表——技術圖表、流程圖、地圖、採用清晰線條和平塗色彩的資訊圖表。SVG 讓其中的文字可以被選取和搜尋。
• 動畫——SVG 元素可以用 CSS 或 JavaScript 製作動畫，無需影片檔案就能實現輕量的載入旋轉圖示、微互動和互動式圖表。
• 網站圖示（Favicon）——現代瀏覽器支援 SVG 格式的 Favicon，在任何螢幕密度下都保持清晰。使用我們的Favicon 產生器從任何影像建立 Favicon 檔案。

根據 W3Techs 的統計，目前已有 65.5% 的網站使用 SVG，使其成為繼 PNG 和 JPEG 之後第三常見的圖片格式，且每年的採用率持續增長約 8%。

SVG 的安全考量

開發者應了解 SVG 的一個獨特特性：SVG 是以 XML 為基礎的文字格式，可以包含 JavaScript 程式碼（透過 <script> 標籤）和事件處理器（如 onload、onclick）。這意味著：

• 若直接在頁面中以 <img> 標籤嵌入外部 SVG，瀏覽器通常會阻止其中的腳本執行。
• 若以 <object>、iframe 或直接內嵌（inline SVG）形式使用，SVG 中的腳本可以執行。
• 若你的應用程式接受使用者上傳的 SVG，務必在服務前進行消毒（移除 <script> 標籤和事件處理器屬性），否則可能面臨 XSS 攻擊風險。

對於你自己製作或來自可信設計師的 SVG，以及以 <img> 標籤嵌入的 SVG，沒有實際安全風險。

適合使用 PNG 的情境

PNG 在像素層面的細節重要、或影像內容本質上是點陣的情況下是正確選擇：

• 帶透明度的照片——透明背景上的商品去背圖、多層合成照片。PNG 支援完整的 Alpha 透明度，同時保留攝影細節。（不需要透明度的照片，JPEG 通常更合適。）
• 螢幕截圖——截圖包含像素精確的 UI 元素、反鋸齒文字和細緻漸層，本質上是點陣的。PNG 完整保留它們。
• 顏色豐富的複雜藝術作品——詳細的數位繪畫、紋理和無法簡化成乾淨向量形狀的寫實插圖。
• 帶文字疊加的點陣圖形——當你需要像素精確的照片與文字組合內容時，PNG 確保文字邊緣不出現壓縮偽影。

檔案大小與效能

對 SVG 擅長處理的圖形類型（圖示、Logo、簡單插圖），檔案大小的節省相當可觀：

SVG 檔案在 Gzip 或 Brotli 壓縮下表現出色（大多數網頁伺服器標準支援），傳輸時通常再縮小 50–70%。一個 20 KB 的 SVG，透過網路傳輸可能只有 6–8 KB。

效能增益不止於此。SVG 可以直接內嵌到 HTML 中，完全消除 HTTP 請求。它在裝置的原生解析度下渲染，不需要 srcset 屬性或響應式圖片標記。由於是純文字，在快取和版本控制的 diff 比對中也更友善。

從 PNG 到 SVG：向量化

若你目前使用 PNG 格式的 Logo 或圖示，可以考慮將其向量化為 SVG。Vizua 的圖片向量化工具能將點陣影像（PNG、JPEG）轉換為 SVG 向量格式，完全在瀏覽器中本機處理。

最佳效果：顏色較少、邊緣清晰的 Logo 和圖示。細節豐富的照片不適合向量化，結果會是體積龐大、細節全失的 SVG。

SVG vs PNG：快速比較表

實際情境示範

假設你正在重新設計一家公司的網站。品牌有一個 Logo、30 個導航和功能圖示、一張主視覺照片，以及幾張產品截圖。以下是格式分配方式：

• Logo → SVG。它出現在頁頭（小）、頁尾（中）和關於頁面（大）。一個 SVG 檔案搞定三種尺寸，在 Retina 螢幕上保持清晰，大約只有 5 KB。
• 30 個圖示 → SVG 精靈圖。全部 30 個圖示放在一個檔案，大約 40–60 KB。比兩三個 PNG 圖示還輕。CSS 控制顏色和大小。
• 主視覺照片 → 不是 SVG，也不是 PNG。使用 JPEG 或 WebP 在可接受品質下獲得最小檔案。詳見我們的圖片最佳化指南。
• 產品截圖 → PNG。截圖包含 UI 文字和需要無損保留的精確像素渲染。

如何在 SVG 與 PNG 之間轉換

你可以直接在瀏覽器中進行格式轉換——不需要上傳至任何伺服器，也不需要安裝軟體。Vizua 在你的裝置本機處理所有檔案：

• SVG 轉 PNG——以任何所需解析度將 SVG 點陣化
• 圖片向量化——將點陣影像（PNG、JPEG）轉換為 SVG 向量格式
• Favicon 產生器——從任何影像建立 Favicon 檔案，包括適合現代瀏覽器的 SVG 輸出

若想更全面地了解如何為網站上每張圖片選擇正確格式，我們的圖片檔案大小指南列出了各種用途的建議尺寸和格式。

常見問題