要把 SVG 轉換成具有透明背景的 PNG,只要把 SVG 原始碼貼上,或將 .svg 檔案上傳到 SVG 轉 PNG 轉換器,將背景設定保留在預設的透明選項,然後下載產生的 PNG 即可。整個轉換過程完全在你的瀏覽器內進行,所以向量圖稿絕不會被上傳到伺服器。在內部,這個工具會將 SVG 繪製到一個你所選擇大小的記憶體畫布上,讀回像素,再將其編碼為保留 alpha 通道的 PNG —— alpha 通道是檔案中儲存每像素透明度的部分。由於 PNG 支援真正的透明度,而不是單一的開/關切換,因此當檔案置於照片、彩色面板、投影片背景、網頁或其他設計之上時,圖形周圍的空白區域會保持不可見。這正是人們要求「透明背景」時所期待的行為,也是大多數標誌、圖示和徽章素材在投影片、電子郵件、應用程式介面和印刷文件中所需要的一致行為。本文接下來將說明為何這兩種格式的行為差異如此明顯、透明 PNG 何時確實是正確的交付格式、如何逐步執行匯出,以及當結果與原始檔案不符時該怎麼辦。
SVG 和 PNG 以不同的方式處理透明度
SVG 檔案是一個充滿繪圖指令的小型文字文件 ——「在這裡畫一個圓形」、「用那個顏色填滿這條路徑」、「把這些文字放在那些座標上」。它根本不包含像素,這也是為什麼同一個 SVG 無論是在名片上只有兩公分寬,還是在展覽橫幅上放大到兩公尺寬,都能保持極致的銳利。透明度從一開始就內建在這個模型中:指令沒有繪製的部分會保持空白,而 SVG 中的「空白」就直接代表透明。
PNG 是點陣影像 —— 一個具有宣告寬度和高度的固定彩色像素網格。它無法在不失去銳利度的情況下放大,但在日常使用中相較於 SVG 有一個主要優勢:PNG 支援 alpha 通道,也就是說每個像素都會儲存自己的不透明度,從完全透明到完全不透明。這就是為什麼 PNG 可以乾淨地疊在照片、彩色面板或有紋理的背景之上,而不會在周圍顯示出有色方框。PNG 格式也幾乎具有普遍支援度;幾乎每個聊天軟體、文件編輯器、投影片工具、市集上架表單和作業系統預覽都能順利顯示 PNG,但其中許多相同的地方卻拒絕 SVG 上傳,或對 SVG 的顯示效果不一致。
這兩種格式解決的是不同的問題。向量在任何尺寸下都保持銳利;點陣則能與其他所有東西和平共處。SVG 轉 PNG 轉換器的存在正是為了填補這個落差,將向量圖匯出為乾淨的點陣圖,讓你能隨意放到任何需要普通圖片的地方,同時保持其透明度。
透明 PNG 何時是正確的選擇
每當圖稿需要融入設計師無法掌控的表面時,透明 PNG 就是正確的交付格式。標誌是最明顯的例子:同一個標誌在白色網站頁首、黑色主視覺圖、彩色社群媒體橫幅和印刷傳單上,都必須看起來正確無誤,而且周圍不能出現白色或彩色的矩形。同樣的邏輯也適用於:
- 置於淺色、深色和主題化介面上的應用程式圖示和 UI 符號。
- 需要在任何色彩配置的瀏覽器分頁上保持乾淨的網站圖示和 PWA 素材。
- 疊在行銷素材上的印章、徽章和貼紙。
- 嵌入文件、投影片或 PDF 中的圖表和示意圖。
- 置於照片之上的裝飾性疊加層和浮水印。
當圖稿無論出現在哪裡都必須看起來一模一樣,而且背景顏色也不重要時 —— 例如產品照片或掃描文件 —— 透明 PNG 就是錯誤的選擇。在這些情況下,使用實心背景反而更能誠實地呈現素材實際包含的內容。這款轉換器兩種情況都能處理:預設為透明,當你想要平面畫布時也能使用白色背景。
將 SVG 轉換為具有透明背景的 PNG
整個匯出過程都在瀏覽器中執行,只需要點幾下。SVG 轉 PNG 轉換器會引導你完成四個簡短的步驟。
- 把你的 SVG 原始碼貼到文字方塊中,或點擊「上傳 .svg 檔案」從你的裝置載入一個檔案。
- 選擇輸出比例 —— 保留 1x 以維持 SVG 本身的大小,或調高倍率以獲得更大、更銳利的 PNG。
- 選擇背景:保留透明以維持 alpha 通道,或開啟白色背景將圖稿攤平在純白之上。
- 檢查即時預覽,然後點擊「下載 image.png」將轉換後的檔案儲存到你的裝置。
預設的背景設定是透明,這正是你為了獲得透明 PNG 所需要的設定。開啟白色背景選項會在匯出前將圖稿攤平到純白上,主要用於目的地不支援透明度的情況(某些較舊的電子郵件用戶端、特定的印刷佇列),或當你想要把圖稿預覽成完成品時。
為何有些 SVG 無法正確匯出
SVG 無法乾淨轉換的最常見原因,在於它引用了外部資源 —— 透過 URL 參考的遠端圖片、外部託管的字型,或其他跨來源素材。瀏覽器會拒絕將這些外部元件繪製到與本機圖稿同一個畫布上,無論是因為遠端伺服器未選擇啟用跨來源共享,還是因為讓腳本讀回這些像素會構成資安漏洞。結果就是匯出檔案缺少某些元素,或在某些情況下匯出會被完全阻擋,並顯示明確的訊息要求使用自包含的 SVG。
所謂自包含的 SVG,是指所有的圖片、字型、漸層和圖樣都直接內嵌在檔案中,而不是從外部連結。從設計工具匯出的多數標誌、圖示和插畫已經符合這個條件;問題通常出在使用網路字型的人工編輯檔案,或由第三方服務產生、透過 HTTP 參考原始影像的 SVG。把這些素材內嵌進來(或下載後以資料形式內嵌),重新載入檔案到轉換器,匯出就能正常完成。
選擇符合工作需求的輸出比例
輸出比例倍率是第二個會對最終 PNG 產生實質影響的控制項。在 1x 下,PNG 會以 SVG 本身的內建大小渲染,也就是其 width 和 height 屬性中所設定的值。若缺少這些屬性,轉換器會改用 viewBox 的尺寸;若連 viewBox 也沒有,則會採用一個合理的預設值,確保匯出不會默默地失敗。提高倍率會等比例地放大點陣輸出 —— 2x 會產生寬度和高度皆為兩倍像素的 PNG,這正是你在 Retina 顯示器和多數印刷標的物上所需要的。
| 使用情境 | 建議比例 | 背景 | 原因 |
|---|---|---|---|
| 網頁圖示或小型 UI 素材 | 1x 至 2x | 透明 | 在標準和高 DPI 螢幕上皆保持銳利 |
| 用於投影片、文件和電子郵件的標誌 | 2x 至 3x | 透明 | 在投影機和 Retina 筆電上保持清晰 |
| 現代瀏覽器的網站圖示 | 2x 或 3x,然後縮小 | 透明 | 匯出後再裁剪為 16、32 和 48 px 的目標尺寸 |
| 印刷或大尺寸輸出 | 4x 或更高 | 透明或白色 | 高像素數能在大型實體尺寸下保持邊緣乾淨 |
| 在固定畫布上預覽 | 1x | 白色 | 將圖稿攤平到實心背景上以便檢視 |
最終得到的確切像素尺寸取決於 SVG 本身;把倍率想成是品質旋鈕而非固定大小。較大的倍率會消耗更多像素、產生更大的檔案,但對向量圖稿而言,原始來源保持完全乾淨,所以輸出不會像放大照片那樣出現模糊的邊緣。
在轉換過程中保持向量檔案留在本機
轉換的每一個步驟 —— 解析標記、將向量渲染到畫布、將像素編碼為 PNG —— 都在你自己的裝置上進行。SVG 檔案絕不會被上傳到遠端伺服器,這在圖稿屬於機密、尚未發布,或受到品牌或客戶限制時格外重要。這裡沒有帳號、不需要註冊、沒有任何分析資料會在背景把你的檔案帶走。
這種純本機的模式,也是為何上述跨來源素材規則如此重要的原因。伺服器端的轉換器可以輕易地替你擷取遠端圖片並將其縫合進輸出,但瀏覽器端的工具做不到,因為瀏覽器刻意封鎖了這條路徑以維護資安。這樣的取捨是有意為之:你的圖稿保持私密,作為回報,你需要確保餵入的 SVG 是自包含的。
PNG 下載到裝置後該怎麼做
下載完成後,你就擁有了一個保留 alpha 通道的標準 PNG。從此它的行為就和任何其他點陣圖一樣:你可以把它拖入投影片、貼到聊天視窗、附加到電子郵件,或交給從未聽過向量圖形的同事。如果你後來決定圖稿其實適合放在彩色表面上 —— 例如放在品牌背景上的電子郵件簽名,或不支援透明度的上架縮圖 —— 在 為電子郵件附件的 PNG 加上背景教學中,涵蓋了如何在保持原始像素尺寸的情況下,將透明 PNG 攤平到單一顏色上。若想更廣泛地了解 PNG 何時是正確的格式(相較於 JPG),關於在 JPG 和 PNG 之間選擇及互相轉換的指南更詳細地說明了其中的取捨。