svg 轉換 png

快速把 SVG 轉換為 PNG 圖片。支援透明背景保留、外部邊距、顏色著色、緊湊裁剪與批次匯出。

釋放檔案以匯入 SVG
支援單選或批次拖曳 SVG 檔案
共 {{ images.length }} 個圖像
點擊或將 SVG 檔案拖曳至此處
支援多選檔案批次匯入,毫秒級快速本機解析,不上傳伺服器更安全
輸出格式:
品質: {{ Math.round(globalQuality * 100) }}%
#{{ idx + 1 }} .{{ globalFormat }}
原始標籤寬高: {{ img.specified.width || '未指定' }} × {{ img.specified.height || '未指定' }}
像素換算: {{ img.absolute.width ? (img.absolute.width + 'px') : '-' }} × {{ img.absolute.height ? (img.absolute.height + 'px') : '-' }}
ViewBox: {{ img.viewBox.width ? (img.viewBox.x + ' ' + img.viewBox.y + ' ' + img.viewBox.width + ' ' + img.viewBox.height) : '無' }}
圖形外框盒: {{ img.contents ? (Math.round(img.contents.width) + ' × ' + Math.round(img.contents.height)) : '-' }}
編輯 SVG 原始碼(修改後自動重新解析並更新算繪):
⚠️ {{ img.errorMessage }}
輸出尺寸 (px):
×
外部邊距:
px
緊湊裁剪:
填滿適應 (Fit):
背景顏色:
圖形著色 (Color):
{{ img.width }} × {{ img.height }} px

怎樣把SVG轉換為PNG圖片,並保持透明背景?

在前端開發、UI設計、插畫製作以及日常辦公情境中,SVG 向量圖以其無限縮放、不失真和體積小巧等特性成為圖示與向量圖形的標準。但在日常發布至社群平台、製作 PPT、嵌入文件或分發給傳統系統使用時,通用的透明 PNG 點陣圖往往是相容性最好的選擇。本文將為您詳細解析 SVG 轉換為透明 PNG 的核心原理、具體操作步驟及常見避坑技巧。

一、SVG 與 PNG 的透明度核心原理

SVG(Scalable Vector Graphics)本質上是基於 XML 的向量圖形描述語言。在標準規範中,SVG 根畫面的背景預設就是透明的,除非程式碼內明確繪製了背景矩形(如 <rect fill="#ffffff" ...>)。

而 PNG(Portable Network Graphics)是一種點陣圖格式,其最大的優勢之一就是支援完整的 RGBA 32位元色深,包含 8 位元的 Alpha 透明度色版,能實現 256 階的平滑半透明算繪。將 SVG 轉為 PNG 時,只要透過支援 Alpha 色版的 Canvas 畫布進行點陣化對映,且不人為填滿底層純色,就能無損保留完整的透明背景。

二、5 步快速完成轉換與透明背景保留

1
匯入 SVG 向量檔案

點擊上方「上傳 SVG」按鈕或直接將一個或多個 SVG 檔案拖曳至頁面區域。系統將自動在瀏覽器本機極速解析向量檔案尺寸與圖層結構,支援單選與批次多選。

2
保持背景色留空

在各圖像設定卡片中,「背景顏色」輸入框保持留空即代表完全透明。工具預設支援黑白棋盤格預覽,您可以點擊右上角「切換深色/淺色預覽」快速檢驗圖示邊緣與透明色版效果。

3
設定高畫質匯出解析度

根據您的最終應用場景自由調節輸出寬度與高度(如 512px、1024px 或 2048px 高畫質 Retina 尺寸)。開啟「保持寬高比」開關可確保圖示縮放時不拉伸變形。

4
去除多餘留白與外邊距微調

若原 SVG 畫布周圍存在多餘空白,可勾選「去除留白」,演算法將自動偵測圖層實際邊界並緊湊裁剪;如需留出留白安全區,直接調節「邊距 (Padding)」數值即可。

5
匯出透明 PNG 圖片

確認效果滿意後,點擊「下載 PNG」即可直接儲存為高畫質透明點陣圖。您也可以點擊「複製 PNG」免去檔案存檔步驟,直接貼上至 Figma、Sketch、Photoshop 或即時通訊軟體中;批次多圖時可使用頂部「打包下載 ZIP」一鍵取得。

三、為什麼轉換後背景會出現黑底或白底?

許多使用者在使用傳統轉換軟體時,經常遇到「原圖是透明的,轉換後卻變成黑色或白色背景」的問題。主要原因通常有以下幾種:

01
格式選擇錯誤

JPEG/JPG 格式本身不支援 Alpha 透明色版,轉換時算繪引擎會自動將透明部分填滿為純白或純黑色底。轉換透明圖必須確保選擇 PNG 或 WebP 格式。

02
SVG 內部包含底色矩形

部分來自設計軟體匯出的 SVG 原始碼中,第一層往往自帶了一個不透明的背景層(如 <rect width="100%" height="100%" fill="#fff"/>)。可點擊工具中的「原始碼」展開查看並刪除該底色節點。

03
軟體預覽檢視器的視覺誤導

某些作業系統內建的相片檢視器在顯示透明 PNG 時,視窗預設用黑色或純白作為底色背景,導致看起來像有底色。將圖片置入深淺交替的棋盤格或實際設計軟體中即可確認其實際透明度。

四、常見問題解答

SVG 轉換後的 PNG 圖片放大後會失真模糊嗎?
點陣圖在超過其原有像素尺寸後放大確實會出現鋸齒。因此在轉換時,建議在尺寸輸入框中直接填寫您需要的最大尺寸(例如 1024×1024 甚至 4096×4096)。本工具基於原始向量程式碼在指定像素下即時高畫質點陣化,能輸出細節極致銳利的透明 PNG。
批次轉換數十個 SVG 圖示時能否統一保持透明?
完全支援。預設情況下所有匯入的檔案背景色均為空(純透明)。若您需要統一調整批次圖示的尺寸或內邊距,只需開啟頂部的「同步批次修改」開關,調整其中一個即可同步至全部圖像,並支援一鍵打包 ZIP 下載。
轉換過程中我的向量檔案會上傳到伺服器嗎?
不會。本工具核心轉換邏輯採用現代瀏覽器原生 HTML5 Canvas 與 Web API,全部運算均在您的本機裝置瀏覽器內部即時完成,沒有網路上傳與伺服器儲存過程,既能保護您的設計隱私與商業資料安全,轉換速度也更為迅速。