SVG 轉 PNG:保留原有透明背景

網站、文件或編輯器需要向量圖的點陣圖副本時,可使用 SVG 轉 PNG。SVG 算繪後原本透明的區域,可在 PNG 中保留透明度。轉換工具不會移除不透明背景。
為什麼需要透明 PNG?

以下用途需要透明 PNG:
- 放置標誌 - 可搭配任何顏色的背景
- 圖示組 - 在不同位置維持一致外觀
- 疊加素材 - 用於設計與合成中的圖層
- 網頁圖形 - 靈活放置,不會出現白色方框
- 應用程式素材 - 可適應不同佈景主題的介面元素
SVG 與透明度
PNG 可儲存 Alpha 色版,但副檔名是 PNG 不代表像素一定透明。PNG-24 和 PNG-32 等名稱是編輯器使用的標示;這項轉換工具不提供色彩模式選擇器。SVG 內的背景形狀仍屬於圖片內容,需要在原始檔中編輯。
SVG 如何處理透明度
SVG 原生支援透明度:
- 預設沒有背景(透明)
- 以 RGBA 色彩設定半透明填色
- 以不透明度屬性控制元素
- 以混合模式呈現複雜效果
在 PNG 中保留透明度
PNG 支援完整的 Alpha 色版:
- 256 階透明度(8 位元)
- 平滑的反鋸齒邊緣
- 半透明漸層
轉換單一 SVG
- 選擇一個不超過 20 MB 的 SVG 檔案,等待上傳完成。
- 將尺寸留白可保留原始大小,或輸入每邊最高 8192 px 的像素限制。寬高都輸入時,圖片會等比例放入該範圍。
- 先使用「平衡」PNG 壓縮。提高壓縮處理程度可能縮小檔案,但不會提升畫質或透明度。
- 轉換並下載 PNG,再放在淺色與深色背景上檢查。
工具沒有「保留透明度」核取方塊、Alpha 強度控制、去背選項或 PNG 色彩模式選擇器。檔案會在伺服器上處理。請及時下載,並保留原始 SVG。
準備原始圖稿
轉換前,請先在向量編輯器中移除不需要的背景矩形。盡可能將連結圖片與樣式整合至檔案本身。算繪引擎無法使用的字型,可能造成外觀改變;若字形必須精確一致,請在原始編輯器中將重要文字轉為外框。
PNG 的像素固定,不會保留可編輯的路徑或圖層。放大內嵌點陣圖無法還原已遺失的細節。請依預計顯示的大小選擇尺寸,再檢查實際輸出。
使用情境
標誌轉換
處理標誌檔案時:
- 移除 SVG 中的背景
- 匯出多種尺寸
- 在淺色與深色背景上確認
- 同時提供透明背景與白色背景版本
圖示組
處理應用程式或網頁圖示時:
- 統一尺寸,例如 512x512
- 維持一致的留白
- 分別轉換每個圖示,並確認原有透明度仍保留
- 以實際使用尺寸測試
網頁圖形
處理網站元素時:
- 以合適的解析度匯出
- 考慮提供 Retina 版本(2x)
- 確認檔案大小合理
- 測試疊加在不同背景上的效果
多個檔案或多種尺寸
此頁面每個任務只接受一個 SVG。需要多個輸出時,請逐一轉換並檢查。工具不提供資料夾上傳、全域透明度設定或全部匯出操作。請自行整理檔名與尺寸。
測試透明度
請對下載後的 PNG 進行以下檢查。若棋盤格已畫在原始圖片裡,它就是一般圖片內容;檢視器的棋盤格則是顯示輔助。請至少放在兩種不同顏色上比較,以分辨兩者。HTML 範例應放在您自己的測試頁面中。
快速檢查方式
- 在圖片編輯器中開啟 PNG
- 查看是否有棋盤格背景(代表透明)
- 在後方加入彩色圖層
- 確認圖形外觀正常
瀏覽器測試
<div style="background: linear-gradient(45deg, #333, #666)">
<img src="your-graphic.png" alt="透明度測試">
</div>
請確認沒有出現白色方框。
特殊情況
請逐一檢查下載後 PNG 中的效果,不要假設所有 SVG 算繪引擎都會產生相同像素。除非編輯內嵌照片本身,否則它原有的不透明背景仍會保留。向量路徑的不透明度無法移除下方的白色矩形。
含有內嵌點陣圖的 SVG
如果 SVG 包含點陣圖:
- 點陣圖部分會保留原有透明度
- 向量圖部分正常轉換
- 請確認內嵌圖片本身具有透明度
複雜的透明效果
若 SVG 包含以下效果:
- 模糊效果
- 陰影
- 混合模式
轉換結果可能有所不同,請測試並視需要調整。
半透明元素
具有不透明度設定值的 SVG:
- 可能增加檔案大小
- 轉換後請確認視覺效果是否正確
常見問題
壓縮程度較高的預設選項,能保留更多透明度嗎?
不能。預設選項改變的是無損 PNG 編碼的處理程度,不會改變原始圖片中哪些區域透明。
為什麼背景是白色,或邊緣看起來不同?
請先確認白色是原始圖片的一部分,還是只有檢視器背景是白色。原始圖稿、字型與邊緣的檢查方式,請參閱 SVG 透明背景問題排解。
可以將 PNG 轉回可編輯的 SVG 嗎?
這項工具不提供向量描圖。請保留原始 SVG,以便日後編輯。