SVG 轉 PNG — 免費在線，批量處理，自定義尺寸與 DPI

SVG 和 PNG 各有適用場景，瞭解它們的本質區別有助於做出正確的格式選擇。

SVG（可縮放矢量圖形） 是分辨率無關的格式——它用數學公式描述形狀，可以在任何尺寸下完美渲染，不會失真。SVG 是 Logo、圖標、插畫等需要多尺寸顯示的素材的理想格式。文件本身是可讀的 XML，可以用 CSS 和 JavaScript 進行樣式修改和動畫處理。

PNG（便攜式網絡圖形） 是光柵格式——在固定分辨率下存儲像素網格。支持無損壓縮和完整的 Alpha 通道透明度，是 Web 圖標、應用資源的標準格式，也是不支持 SVG 的平臺（郵件客戶端、部分 CMS、舊版應用）上的通用選擇。

需要轉換為 PNG 的場景

• 郵件模板——大多數郵件客戶端無法可靠渲染 SVG
• 應用商店和系統圖標——iOS、Android、macOS 要求特定像素尺寸的 PNG
• 社交媒體上傳——各平臺普遍接受 PNG，SVG 支持參差不齊
• 設計稿交付——對於不使用 SVG 工具鏈的開發者，PNG 更易使用
• 第三方平臺——CMS、廣告平臺、數據分析工具通常只接受 PNG

多倍率 PNG 導出是 iOS、Android 和 Web 圖標交付的標準工作流。

為什麼需要多個倍率

現代設備屏幕的像素密度各不相同——手機屏幕可能將 3 個物理像素壓縮到 1 個邏輯像素中（即 3x / @3x）。如果只導出 1x PNG 並在 Retina 或高 DPI 屏幕上顯示，操作系統會將其放大，結果會模糊。導出 2x 和 3x 版本可以為設備提供所需的額外像素密度。

倍率命名規範

• 1x — 基礎分辨率，適用於標準顯示屏。文件名：icon.png
• 2x（@2x） — 雙倍像素密度，適用於 Retina 顯示屏（大多數現代手機和 MacBook）。文件名：icon@2x.png
• 3x（@3x） — 三倍像素密度，適用於最新款 iPhone 和高端 Android 機型。文件名：icon@3x.png

DPI 與 Apple @2x 識別

將 DPI 元數據設置為 144，macOS 和 iOS 會將該 PNG 識別為 @2x 素材——直接拖入 Xcode 或 macOS Finder 時特別有用。DPI 值不改變像素尺寸，只寫入一個元數據標籤，應用程序通過它判斷圖片的預期顯示尺寸。

currentColor 是 CSS 關鍵字，告訴 SVG 元素繼承父元素的文字顏色（color 屬性）。這是圖標庫實現主題化的標準技術——圖標顏色跟隨上下文自動變化。

將 SVG 內聯嵌入 HTML 時，currentColor 會繼承父元素設置的 color 值。但導出為 PNG 時，沒有 CSS 上下文，瀏覽器會將 currentColor 解析為默認值（通常是黑色），可能與預期的顏色不符。

顏色替換的工作原理

在光柵化之前，工具會掃描 SVG 源代碼，將所有 currentColor（fill、stroke、stop-color 等屬性中的）替換為你指定的 Hex 顏色值。最終生成的 PNG 會以你選擇的顏色精確渲染。

什麼時候需要開啟

• PNG 預覽中圖標完全顯示為黑色或不可見
• 需要在彩色背景上導出白色圖標
• 圖標需要以品牌色輸出用於設計稿交付

工具會自動檢測包含 currentColor 的 SVG，並在文件行顯示藍色提示徽標，提醒你按需開啟顏色替換功能。