SVG vs PNG：向量格式與點陣格式的抉擇

SVG（Scalable Vector Graphics）和 PNG（Portable Network Graphics）都是網頁設計的常用格式，但它們從根本上就是兩種不同的圖形類型。SVG 是以數學公式描述的向量圖，PNG 是記錄每個像素的點陣圖。了解兩者的本質差異，是選擇正確格式的關鍵。

縮放特性：SVG 的核心優勢

SVG 可無限縮放而不失真，因為它儲存的是形狀的數學描述，而非固定像素。無論在手錶螢幕還是 4K 顯示器上，SVG 圖形都保持完美清晰。這使 SVG 成為 Logo、圖示、插圖和資訊圖表的理想選擇。PNG 則是固定解析度格式，放大後會出現明顯的像素化失真。在高 DPI 設備（如 Retina 螢幕）上顯示 PNG 時，通常需要提供 2x 甚至 3x 的大尺寸版本。

檔案大小

對於簡單圖形（如 Logo、圖示），SVG 通常比 PNG 小得多。一個簡單的向量圖示可能只有 1–5KB，而同樣清晰度的 PNG 可能需要 10–50KB（加上各種螢幕解析度版本）。然而對於複雜的插圖或照片，SVG 會因為大量路徑節點變得非常大，此時 PNG 更合適。

透明度支援

兩個格式都原生支援透明度。PNG 支援完整的 8-bit Alpha 通道，處理半透明效果非常精確。SVG 可透過 CSS 或屬性設定不透明度，也支援複雜的遮罩和漸變透明效果。

動畫

SVG 支援 CSS 動畫和 SMIL 動畫，可直接在瀏覽器中實現流暢的向量動畫，無需額外的圖片資源。PNG 本身不支援動畫，需搭配 APNG 規範，但支援程度有限。

網頁使用方式

SVG 可作為圖片嵌入（`<img src=”icon.svg”>`），也可直接內嵌 HTML 程式碼，後者允許用 CSS 和 JavaScript 動態修改顏色、路徑等屬性，是 UI 元件庫的首選。PNG 只能作為圖片標籤或 CSS 背景使用，無法以程式碼修改其內容。

設計工具支援

Figma、Illustrator、Sketch 等主流設計工具都完整支援 SVG 匯入匯出。SVG 作為設計原始碼可在工具間無損傳輸。PNG 幾乎所有圖像工具都支援，是通用的截圖和合成格式，但匯出後即為靜態點陣圖，無法再編輯向量細節。

比較總表

特性	SVG	PNG
縮放	無限縮放不失真	固定解析度，放大失真
簡單圖形的檔案大小	極小（1-5KB）	較大（需多種解析度）
複雜圖像（照片）	不適合	適合
透明度	支援	支援
動畫	支援（CSS/SMIL）	APNG（有限）
可用 CSS/JS 修改	是	否
瀏覽器相容性	所有現代瀏覽器	100%
適用場景	Logo、圖示、插圖、UI 元件	截圖、照片、複雜插圖

結論

規則很簡單：幾何圖形、Logo、圖示、UI 元件用 SVG；照片、截圖、複雜插圖用 PNG（或 JPG/WebP）。許多現代設計系統同時使用兩者：SVG 負責所有可縮放圖示和插圖，PNG 或 WebP 負責照片和複雜影像。

在瀏覽器裡直接完成，檔案不會離開你的電腦：圖片格式轉換