ImgConvert
返回部落格
教學

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

作者 ImgConvert更新日期:
閱讀時間 5 分鐘
SVGPNG透明度圖片轉檔
SVG 轉 PNG:保留原有透明背景

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

為什麼需要透明 PNG?

將 SVG 圖稿轉為透明 PNG 素材,以便靈活放置的流程

以下用途需要透明 PNG:

  • 放置標誌 - 可搭配任何顏色的背景
  • 圖示組 - 在不同位置維持一致外觀
  • 疊加素材 - 用於設計與合成中的圖層
  • 網頁圖形 - 靈活放置,不會出現白色方框
  • 應用程式素材 - 可適應不同佈景主題的介面元素

SVG 與透明度

PNG 可儲存 Alpha 色版,但副檔名是 PNG 不代表像素一定透明。PNG-24 和 PNG-32 等名稱是編輯器使用的標示;這項轉換工具不提供色彩模式選擇器。SVG 內的背景形狀仍屬於圖片內容,需要在原始檔中編輯。

SVG 如何處理透明度

SVG 原生支援透明度:

  • 預設沒有背景(透明)
  • 以 RGBA 色彩設定半透明填色
  • 以不透明度屬性控制元素
  • 以混合模式呈現複雜效果

在 PNG 中保留透明度

PNG 支援完整的 Alpha 色版:

  • 256 階透明度(8 位元)
  • 平滑的反鋸齒邊緣
  • 半透明漸層

轉換單一 SVG

  1. 選擇一個不超過 20 MB 的 SVG 檔案,等待上傳完成。
  2. 將尺寸留白可保留原始大小,或輸入每邊最高 8192 px 的像素限制。寬高都輸入時,圖片會等比例放入該範圍。
  3. 先使用「平衡」PNG 壓縮。提高壓縮處理程度可能縮小檔案,但不會提升畫質或透明度。
  4. 轉換並下載 PNG,再放在淺色與深色背景上檢查。

工具沒有「保留透明度」核取方塊、Alpha 強度控制、去背選項或 PNG 色彩模式選擇器。檔案會在伺服器上處理。請及時下載,並保留原始 SVG。

準備原始圖稿

轉換前,請先在向量編輯器中移除不需要的背景矩形。盡可能將連結圖片與樣式整合至檔案本身。算繪引擎無法使用的字型,可能造成外觀改變;若字形必須精確一致,請在原始編輯器中將重要文字轉為外框。

PNG 的像素固定,不會保留可編輯的路徑或圖層。放大內嵌點陣圖無法還原已遺失的細節。請依預計顯示的大小選擇尺寸,再檢查實際輸出。

使用情境

標誌轉換

處理標誌檔案時:

  1. 移除 SVG 中的背景
  2. 匯出多種尺寸
  3. 在淺色與深色背景上確認
  4. 同時提供透明背景與白色背景版本

圖示組

處理應用程式或網頁圖示時:

  1. 統一尺寸,例如 512x512
  2. 維持一致的留白
  3. 分別轉換每個圖示,並確認原有透明度仍保留
  4. 以實際使用尺寸測試

網頁圖形

處理網站元素時:

  1. 以合適的解析度匯出
  2. 考慮提供 Retina 版本(2x)
  3. 確認檔案大小合理
  4. 測試疊加在不同背景上的效果

多個檔案或多種尺寸

此頁面每個任務只接受一個 SVG。需要多個輸出時,請逐一轉換並檢查。工具不提供資料夾上傳、全域透明度設定或全部匯出操作。請自行整理檔名與尺寸。

測試透明度

請對下載後的 PNG 進行以下檢查。若棋盤格已畫在原始圖片裡,它就是一般圖片內容;檢視器的棋盤格則是顯示輔助。請至少放在兩種不同顏色上比較,以分辨兩者。HTML 範例應放在您自己的測試頁面中。

快速檢查方式

  1. 在圖片編輯器中開啟 PNG
  2. 查看是否有棋盤格背景(代表透明)
  3. 在後方加入彩色圖層
  4. 確認圖形外觀正常

瀏覽器測試

<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,以便日後編輯。

更多工具,協助您處理下一項圖片工作

探索 ImgConvert 的轉檔、PDF 檔案與 GIF 工具。

  • 圖片轉檔工具
  • PDF 工具
  • GIF 工具
瀏覽所有工具