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

SVG 與 PNG 解決不同問題。SVG 描述向量幾何，也能嵌入點陣；PNG 儲存固定像素格。選擇取決於來源作品、安全邊界、無障礙、編輯路徑、繪製方式與實測檔案大小。

SVG 與 PNG 的核心差異

SVG 與 PNG 的區別正是向量與點陣圖形的差異。

SVG 以 XML 為基礎，可描述形狀、路徑、文字、濾鏡、樣式與嵌入資源。向量部分在繪製尺寸重新描繪，但清晰度仍取決於幾何、筆畫、效果、像素對齊和嵌入點陣。

PNG 儲存固定像素格。放大需要重新取樣，可能柔化或像素化。若來源遠大於顯示空間，除非回應式候選讓瀏覽器挑選，否則會增加傳輸和解碼工作。

這項差異影響大小、縮放、編輯流程，以及各格式擅長的圖片類型。

何時使用 SVG

SVG 適合已審查的向量作品，前提是安全、無障礙、繪製和嵌入需求都已理解：

• 標誌 — 乾淨 SVG 可涵蓋多種繪製尺寸而不放大點陣；非常小的標記可能需要視覺簡化、筆畫調整或專用版本。
• 圖示 — UI、導覽和社群圖示可共用幾何與樣式。SVG 可能小於多個點陣解析度，但複雜路徑或內嵌重複也可能反轉結果。
• 插圖與圖表 — 乾淨線條與平面色彩。以文字表示的 SVG 文字可選取，但無障礙與索引需要正確標記和嵌入。
• 動畫 — 可用 CSS、JavaScript 或 SVG 機制製作。仍須檢查動態偏好、CPU、CSP、無障礙與互動複雜度。
• 網站圖示 — 目前主要瀏覽器可使用 SVG，但完整圖示組仍可能需要點陣或 ICO。用Favicon 產生器建立常見輸出。

SVG 受到目前瀏覽器與設計工具廣泛支援。普及不代表個別素材一定應是向量；請比較複雜度、安全、快取、無障礙與繪製。

何時使用 PNG

需要無損點陣像素或 Alpha，且結果符合大小預算時，PNG 是有力候選。

• 透明照片 — PNG 支援 Alpha 與無損像素，但細緻照片可能很大。接收端支援時比較 Alpha WebP/AVIF；不需透明時測試JPEG 與現代照片格式。
• 螢幕截圖 — PNG 可保留編碼像素；描述檔、中繼資料、縮放和調色盤轉換仍是不同問題。
• 多色複雜作品 — 無法簡化成乾淨向量形狀的數位畫、紋理與寫實插圖。
• 含文字點陣圖 — 需要像素精確文字邊緣時，PNG 可避免有損壓縮瑕疵。

檔案大小與效能比較

對圖示、標誌和簡單插圖而言，SVG 或點陣哪個較小取決於幾何、尺寸、重複、壓縮與快取：

Brotli 或 gzip 等文字壓縮可依標記與伺服器設定降低 SVG 傳輸量。請比較壓縮後傳輸位元組，而不只是磁碟檔案。

內嵌 SVG 省去請求，但增加 HTML 且無法獨立快取。外部 SVG 可快取。向量通常不需要密度版本，但複雜或含點陣的 SVG 可能需要回應式處理。請測量整頁。

照片和細緻紋理在追蹤時會產生過多幾何或失去細節。把點陣嵌入 SVG 只增加容器和常見的 base64，並不會變成向量。請使用 PNG、JPEG、WebP 或 AVIF。

SVG vs PNG 一覽對比

實際範例：重新設計企業網站

假設企業網站有標誌、30 個導覽與功能圖示、主照片和多張產品截圖，可如此分配格式：

• 標誌 → 有乾淨向量來源時用 SVG；測試筆畫與小尺寸可讀性。
• 圖示組 → SVG sprite 或元件可重用幾何；驗證無障礙、快取、CSP 和傳輸標記。
• 主照片 → 以相同尺寸和可見品質測試 JPEG、WebP、AVIF，保留受眾需要的備援。另見圖片最佳化指南。
• 產品截圖 → 需要保留像素時從 PNG 開始，再比較其他無損候選與可接受的有損版本。

如何在 SVG 與 PNG 之間轉換

不用安裝軟體即可在瀏覽器轉換支援檔案。Vizua 在瀏覽器處理檔案，不送到影像伺服器；頁面服務仍可能使用網路：

• SVG 轉 PNG — 以可用比例點陣化支援的 SVG 並檢查結果
• 圖片向量化 — 將點陣追蹤成近似路徑；不會恢復原始向量幾何
• Favicon 產生器 — 從支援來源建立常見輸出

頁面尺寸與位元組預算請看圖片檔案大小指南。

常見問題