SVG 轉 PNG — 免上傳，把向量圖算繪成任意尺寸

很多人會問怎樣把 SVG 轉 PNG 才能「不損失畫質」，這個問題本身就帶著一個值得先釐清的誤解。SVG 沒有可以損失的畫質。它根本沒有像素。

向量描述形狀，像素儲存畫面

SVG 是對形狀（曲線、填色、文字）的描述，放在一套沒有固定像素尺寸的座標系統裡。PNG 則是一張固定的像素網格。因此 SVG 轉 PNG 永遠意味著選一個尺寸，而無論你選哪個尺寸，結果都是清晰的。

用文字編輯器打開一個 SVG，你看到的是一條條指令：移動到這個點，畫曲線到那個點，用這個顏色填滿。沒有任何地方寫著這張圖有多少像素寬。瀏覽器在顯示時才決定，而且每次都可以決定得不一樣。

viewBox、width 和 height 到底是什麼意思

根元素上的三個屬性控制尺寸。viewBox 定義座標系統——「這張圖橫向從 0 到 240，縱向從 0 到 160」。width 和 height 如果存在，則建議一個預設顯示尺寸。很多 SVG 只有 viewBox，有些只有 width 和 height，還有少數兩者都沒有。

這個轉換器會讀取存在的屬性，像瀏覽器那樣推算出固有尺寸，並把它當作 1× 基準。如果什麼都沒宣告，就回退到 1,024 像素，確保你仍能得到一張可用的圖片。

為什麼「不損失畫質」是個錯誤的問題

因為同一份指令可以把 SVG 算繪成任意尺寸，一張 4,000 像素的 PNG 和一張 400 像素的 PNG 一樣清晰——算繪器只是畫出了更多細節。唯一會損失畫質的做法，是先算繪得很小，然後再把 PNG 放大。解法就是在這裡、在轉換時就選定最終尺寸，之後絕不放大 PNG。

這個工具在瀏覽器中讀取你的 SVG 檔案，移除所有可執行內容，用瀏覽器自己的引擎按你選擇的尺寸逐一算繪，然後交回保留透明度的無損 PNG——可以單獨下載，也可以打包成 ZIP。

和你的瀏覽器同一個算繪器

伺服器端轉換器使用獨立的函式庫——librsvg、Inkscape、ImageMagick——每一個都有缺口：不支援的濾鏡、被替換的字型、畫得略有差異的漸層。你拿回來的 PNG 可能和你看到的 SVG 對不上。

而在這裡，算繪由 Blink、Gecko 或 WebKit 完成——取決於你用的是哪個瀏覽器——直接把 SVG 畫到畫布上。只要 SVG 在你的瀏覽器裡顯示正常，PNG 就會一模一樣，因為它們本來就是同一幅畫。

移除指令碼，不做上傳

SVG 是 XML，可以包含 <script> 元素、onload 處理器和內嵌 HTML。來源不明的檔案不該隨手就打開。算繪前，轉換器會移除指令碼、事件屬性和 foreignObject 區塊，然後把結果放進一個本來就無法執行程式碼的圖片元素裡算繪。兩層防護，全在本機。

整個過程沒有任何上傳。批次轉換時，瀏覽器開發者工具的 Network 面板始終是空的。

既然尺寸是一個選擇，那就有必要知道每個選項是做什麼用的。兩種模式幾乎涵蓋所有場景。

1×、2×、3× — 對應螢幕密度

一般螢幕每個 CSS 點顯示一個像素。Retina 或 HiDPI 螢幕顯示兩個；大多數現代手機顯示三個。所以一個在螢幕上佔 32 點的圖示，分別需要 32、64 和 96 像素的 PNG。這就是 1×、2×、3× 的全部意思。

網頁和 App 開發通常會把同一個 SVG 依三種倍率各匯出一份。拖入檔案一次，按 1× 轉換，改一下設定，再轉一次——或者乾脆按 3× 匯出，讓平台自己縮小。

常見目標的尺寸參考

Favicon：16、32 和 48 像素，最好先做一張 512 像素的 PNG，再用 PNG 轉 ICO 工具產生。App 圖示：應用商店要 1024 像素，之後用圖示集產生器。社群頭像：400 到 800 像素。Open Graph 圖片：1200 × 630。電商平台商品圖：長邊通常 2000 像素。

自訂寬度：印刷與電商平台

印刷場景請依 300 DPI 從實體尺寸回推：A4 頁面寬 2,480 像素，A3 是 3,508，6 英吋貼紙是 1,800。切換到寬度模式，輸入數字，高度會依 SVG 的長寬比自動計算。轉換器把輸出的長邊上限設為 16,384 像素——這是瀏覽器對畫布的限制——如果你的要求被縮減，它會告訴你。

大多數 SVG——Logo、圖示、插畫——都沒有背景：形狀懸浮在空無一物之上。PNG 能保存這一點，這也是這項工作選 PNG 而非 JPG 的兩大理由之一。

保持背景透明

這裡預設就是透明。SVG 沒有繪製的每個像素都保持透明，包括曲線和斜邊上那些被部分覆蓋的像素。正是這些柔和的邊緣像素，讓 PNG 放在深色投影片、彩色按鈕或照片上時不會出現明顯輪廓。

結果會顯示在棋盤格背景上，方便你在下載前確認透明效果。

什麼時候該壓平成純色

有些目標場景不支援 alpha 通道——較舊的郵件用戶端、某些印刷流程、少數會在背後悄悄轉成 JPG 的平台上傳器。這種情況就在背景設定裡選白色、黑色或自訂顏色。形狀會被合成到那個顏色上，PNG 完全不透明。

請選擇與圖片最終所在位置一致的顏色。壓平成白色後再把 PNG 放到深色背景上，邊緣像素——此時是淡橘、淡藍，或者形狀本身的淺色版本——就會呈現為一圈淡淡的光暈。這圈光暈是轉換後 Logo 最常見的抱怨，而它是背景選擇的問題，不是算繪的錯。

在瀏覽器裡算繪意味著 PNG 和螢幕一致，但同時也繼承了瀏覽器對「圖片允許載入什麼」的規則。

字型缺失

SVG 中的文字會用它指定的字型算繪。如果這個字型既沒安裝在你的電腦上，也沒嵌入檔案裡，瀏覽器就會換一個替代字型，PNG 裡顯示的就是替代字型。透過 URL 引用的網頁字型也不會載入：作為圖片算繪的 SVG 不允許擷取外部資源。

可靠的解法是在匯出 SVG 之前，在設計工具裡把文字轉為外框。字母變成路徑後，在任何地方都能算繪得一模一樣。

連結圖片缺失

同樣的規則也適用於 <image href="https://…">。從 URL 拉取的點陣圖會算繪成空白。改成內嵌即可——大多數編輯器都有「嵌入圖片」的匯出選項，它會把連結變成 SVG 內部的 data URI。內嵌圖片可以正常算繪。

輸出空白或極小

既沒有 viewBox 也沒有 width 和 height 的 SVG，在這裡會依回退尺寸算繪；如果圖形離原點很遠，就可能落在可見區域之外。加一個能框住整幅作品的 viewBox 就好。輸出極小幾乎總是因為 SVG 宣告了很小的 width 和 height——切換到寬度模式，輸入你真正想要的尺寸。

既然 SVG 可以完美縮放，為什麼還要把 SVG 轉 PNG？因為大量軟體至今仍然吃不下向量。

圖示集與 Favicon

應用商店、favicon 格式和許多圖示系統都要求固定尺寸的 PNG。依你需要的最大尺寸轉換一次，其餘的用圖示產生器或 PNG 轉 ICO 裁出來。

拒收 SVG 的平台

社群網站、電商平台、社群論壇和大多數 CMS 媒體庫都拒絕上傳 SVG——部分是出於安全考量，因為 SVG 可以夾帶指令碼。帶透明背景的 2× PNG 是通用的替代品。

郵件簽名與電子報

郵件用戶端會剝除 SVG 或顯示一張破圖。郵件裡的 Logo 用的都是 PNG，最好依 2× 匯出，再以一半尺寸顯示，這樣在 Retina 螢幕上依然清晰。

印刷與大圖輸出

印刷廠接受 PDF 和高解析度點陣圖。用寬度模式把 Logo 算繪到 3,000 或 4,000 像素，海報尺寸也能印得乾淨俐落——向量在目標尺寸上直接點陣化，不存在放大帶來的模糊。

網路上幾乎所有 SVG 轉 PNG 轉換器都會上傳檔案，然後在伺服器上用 librsvg、Inkscape 或無頭瀏覽器算繪。簡單圖形沒問題，稍微複雜一點就會走樣。

還原度

每個算繪函式庫支援的 SVG 規範範圍都略有不同。濾鏡、遮罩、混合模式、檔案內的 CSS 以及沿路徑排列的文字是最常見的犧牲品。瀏覽器引擎是現存最完整的 SVG 算繪器，用你機器上的這一個來算繪，PNG 就不可能和預覽不一致。

隱私與限制

未發布的 Logo、產品圖面、帶內部數字的圖表：把它們上傳到轉換器是一次誰都不想要的小外洩。伺服器端工具還會限制檔案大小和每日用量，因為算繪要花他們的錢。在自己的裝置上算繪，兩個問題一起消失——沒有什麼可外洩，也沒有什麼可計量。

伺服器贏在哪裡：非常老舊的硬體算繪一批複雜 SVG 會比資料中心慢。但對十個 Logo 來說毫無差別。

輸出是標準 PNG，所以這裡的每個工具都能直接接手，不必再次上傳。

用於網頁，可以跑一遍 壓縮 PNG，或轉成 WebP——兩者都保留透明度並縮小體積。用於郵件或照片，PNG 轉 JPG 可以壓平並縮小。事後需要精確尺寸，用調整圖片尺寸。如果你手上是點陣圖、卻希望有一份向量，PNG 轉 SVG 可以反向走一遍。