SVG 轉 PNG：透明背景問題排解
本指南著重於檢查 SVG 轉 PNG 的結果。基本轉換步驟請參閱將透明背景 SVG 轉為 PNG。
白色背景不一定代表透明度遺失
請在能顯示透明度的編輯器中開啟 PNG，或將它放在彩色背景上。檢視器可能只是在透明像素後方顯示白色。若白色區域確實是圖片的一部分，請檢查 SVG 是否包含不透明的背景矩形、填色形狀或內嵌點陣圖。
SVG 轉 PNG 工具不會移除這些物件。可以的話，請編輯原始 SVG。若要對點陣圖去背，可另外使用透明背景製作工具，並檢查處理結果。
沒有需要啟用的透明度開關
這項工具一次讀取一個 SVG，提供像素寬度、高度與 PNG 壓縮設定。原有透明區域可保留透明度，不需要勾選「保留透明度」或「Alpha 色版」。工具沒有背景色擦除功能，也沒有 PNG-8／PNG-24 模式選擇器。
檢查邊緣與遺失元素
| 現象 | 檢查重點 |
|---|---|
| 曲線出現鋸齒 | 匯出尺寸是否足以符合顯示需求？內嵌點陣圖是否有足夠像素？ |
| 白色光暈 | 檢查原始圖稿的筆畫、陰影與主體周圍的像素；提高壓縮處理程度不會移除光暈。 |
| 文字外觀不同 | 算繪引擎可能沒有原始字型。若字形必須精確一致，請在向量編輯器中將重要文字轉為外框。 |
| 圖形或樣式遺失 | 檢查連結圖片與外部 CSS，將所需資源整合至 SVG 本身。 |
| 陰影或遮色片不同 | 比較原始效果的算繪結果，並在原始編輯器中簡化不支援的效果。 |
特殊情況
請逐一檢查下載後 PNG 中的效果，不要假設所有 SVG 算繪引擎都會產生相同像素。除非編輯內嵌照片本身，否則它原有的不透明背景仍會保留。向量路徑的不透明度無法移除下方的白色矩形。
含有內嵌點陣圖的 SVG
如果 SVG 包含點陣圖：
- 點陣圖部分會保留原有透明度
- 向量圖部分正常轉換
- 請確認內嵌圖片本身具有透明度
複雜的透明效果
若 SVG 包含以下效果：
- 模糊效果
- 陰影
- 混合模式
轉換結果可能有所不同，請測試並視需要調整。
半透明元素
具有不透明度設定值的 SVG：
- 可能增加檔案大小
- 轉換後請確認視覺效果是否正確
測試透明度
請對下載後的 PNG 進行以下檢查。若棋盤格已畫在原始圖片裡，它就是一般圖片內容；檢視器的棋盤格則是顯示輔助。請至少放在兩種不同顏色上比較，以分辨兩者。HTML 範例應放在您自己的測試頁面中。
快速檢查方式
- 在圖片編輯器中開啟 PNG
- 查看是否有棋盤格背景（代表透明）
- 在後方加入彩色圖層
- 確認圖形外觀正常
瀏覽器測試
<div style="background: linear-gradient(45deg, #333, #666)">
<img src="your-graphic.png" alt="透明度測試">
</div>
請確認沒有出現白色方框。
最佳化透明 PNG
請先採用實際需要的尺寸。無損 PNG 壓縮改變的是編碼處理程度，不是哪些像素透明。在其他編輯器中減少調色盤色彩數量，可能降低檔案位元組數，但也可能改變漸層與柔和邊緣。變更尺寸則會捨棄像素或重新取樣。
請保留原始尺寸的副本，每次只調整一項設定，再比較下載結果。每次最佳化後，都要在淺色與深色背景上檢查邊緣。沒有固定的 20–50% 或 40–80% 縮減幅度適用於所有圖形。若使用端接受 WebP，請另外匯出 WebP並與 PNG 比較，不要假設其中一種永遠比較小。
每次只比較一項變更
請保留原始 SVG，每次只變更一項原始圖稿屬性或輸出尺寸，並在淺色與深色背景上比較新的 PNG。尺寸欄位接受每邊最高 8192 px。壓縮改變的是 PNG 編碼處理程度，不是 Alpha 強度或圖片品質。
分別檢查尺寸、留白與 Alpha 色版
即使標誌具有透明背景，也可能因主體在畫布中占比太小而看起來不對。請在原始編輯器中檢查 SVG 的 viewBox 與圖稿位置，並在那裡增加或移除留白。轉換工具的寬度與高度欄位只會在限定範圍內縮放，不提供畫布留白編輯功能。
製作 2× 螢幕素材時，請將預計顯示的寬高各加倍，並維持相同比例。每個尺寸都應分別匯出並檢查。logo@2x.png 這類檔名是命名慣例，不是能產生額外細節的設定。
<img src="logo.png" srcset="logo@2x.png 2x" alt="公司標誌">
這兩個檔案都必須存在於網站上。請測試實際算繪尺寸與背景；這段標記不會為任何一張圖片增加透明度。如果兩種尺寸的標誌都有光暈，請回頭檢查原始圖稿邊緣，而非反覆放大。
常見問題
提高壓縮程度能修復透明邊緣嗎？
不能。請檢查原始圖稿與像素尺寸。壓縮不是邊緣修復功能。
可以在這裡一次修正整個資料夾嗎？
不行。此頁面每個任務只接受一個 SVG。請先在編輯器中修正原始檔，再逐一轉換並檢查。