將 SVG 轉換為 PNG 意味著將向量檔案點陣化——把描述圓形、路徑或字母的數學指令，轉換成任何圖片欄位都能接受的固定彩色像素網格。向量來源沒有像素，只有方程式，因此不論尺寸大小都能保持銳利；但 PNG 鎖定於固定的像素數量，一旦以所選解析度算繪完成，就無法在不失真的情況下放大而不產生模糊。在一般工作流程中，轉換本身會在您的瀏覽器內執行：解析 SVG、以您選擇的尺寸繪製到內部畫布，然後匯出成標準 PNG 檔案，可開啟於所有作業系統、郵件用戶端和簡報軟體。此過程不需上傳，也不涉及伺服器——點陣化後的圖片會直接編碼並儲存到您的裝置，因此基於瀏覽器的工具是說明 SVG 轉換為 PNG 時實際發生什麼的最快方式。
以淺顯英文說明這兩種格式
SVG 和 PNG 解決的是不同的問題，而理解兩者之間的差異，是說明為何需要進行轉換的最清楚方式。SVG 是 Scalable Vector Graphics 的縮寫，是以 XML 撰寫的小型文字檔案。它不儲存彩色圓點，而是儲存指令：在這個位置畫一個半徑這麼大的圓、以那個顏色填滿這條路徑、使用那個字體族放置這段文字。由於這些指令是數學形式而非以像素為基礎，因此無論 SVG 是網站小圖示上的 24 像素，還是廣告看板上的兩公尺寬，都能呈現極其銳利的效果。相同檔案、相同位元組、相同完美邊緣。
PNG 是 Portable Network Graphics 的縮寫，是另一面。它是一種點陣格式——由已知寬度和高度的彩色像素所組成的完整網格。一旦該網格建立，每個像素就都已固定。您可以縮小圖片而不損失超出較小畫布顯示範圍的任何內容，但放大時會迫使瀏覽器或圖片檢視器為從未繪製的像素捏造數值，這就是模糊的成因。
| 特性 | SVG | PNG |
|---|---|---|
| 格式類別 | 向量（XML 文字） | 點陣（像素網格） |
| 解析度 | 與解析度無關 | 固定像素尺寸 |
| 檔案大小 | 通常很小，隨複雜度調整 | 隨寬度 × 高度 × 細節調整 |
| 透明度 | 有（alpha） | 有（alpha 色版） |
| 普遍支援 | 不同應用程式和編輯器之間不一致 | 幾乎普遍支援 |
| 最適用於 | 需要縮放的標誌、圖示、插圖 | 照片、應用程式商店圖片、電子郵件、投影片、網站小圖示 |
最後一列是實務上的重點。SVG 通常只需編寫一次，就能在任何地方算繪，但只有在確實能正確算繪向量檔案的環境中，才能實現這項承諾。PNG 除了基本的影像解碼器之外，不需要算繪應用程式提供任何其他支援，因此有許多目的地只接受 PNG。
轉換確實有意義的時機
您不需要轉換遇到的每個 SVG——向量檔案通常是較好的來源——但有幾種日常情況適合以 PNG 作為輸出。
- 文件、投影片和 PDF。Word、PowerPoint 和 Google Slides 要麼完全拒絕 SVG，要麼以不一致的方式算繪。PNG 可放入任何圖片欄位，並在每台機器上看起來完全相同。
- 市集和社群平台。應用程式商店、電子商務平台、社群媒體和論壇上傳工具通常只接受點陣格式，並基於安全原因拒絕 SVG MIME 類型。
- 固定尺寸的 UI 素材。網站小圖示、應用程式圖示、徽章和頭像都有固定的像素數量，而 PNG 能確保圖像不會依開啟它的裝置而拉伸或重新定位。
- 電子郵件和聊天。大多數郵件用戶端完全無法算繪 SVG。新聞簡報、簽名和聊天平台中的內嵌圖片必須是 PNG 或 JPG。
- 交給非技術同事。PNG 在每個作業系統中都能按兩下開啟，不需要任何外掛程式、字體或軟體，因此當收件者不會排查向量檔損毀問題時，這是最安全的傳送格式。
共同點在於：當尺寸、位置和算繪方式由他人掌控時，PNG 就是您會選擇使用的格式。
如何在瀏覽器中將 SVG 轉換為 PNG
免費的 SVG 轉 PNG 轉換器可在幾秒內完成技術步驟。整個流程就是貼上、調整、儲存——不需要命令列、不需安裝，也不需帳號。
- 將 SVG 原始碼貼到文字方塊中，或按一下 Upload .svg file，從您的裝載載入檔案。
- 選擇輸出比例——維持 1x 以使用 SVG 本身的尺寸，或提高倍數以產生更大、更銳利的 PNG。
- 選擇背景——維持透明以保留 alpha，或開啟 White background，將圖像平鋪到純白背景上。
- 檢查即時預覽，然後按一下 Download image.png，將轉換後的檔案儲存到您的裝置。
整個工作流程就是這樣。步驟 2 和步驟 3 中的兩個控制項，會負責塑造最終輸出的大部分效果；按一下 Download 之前，值得更深入了解它們。
輸出比例與解析度的選擇方式
第一個控制項是輸出比例，這是您會做出的最重要決定。在 1x 時，PNG 會以 SVG 本身的固有尺寸算繪，該尺寸取自其 width 和 height 屬性；若缺少這些屬性，則取自 viewBox。如果連 viewBox 也缺少，工具會改用合理的預設值，以免匯出在無預警的情況下失敗。
將倍數提高到 1x 以上，會按比例放大 PNG。對 256 x 256 的 SVG 使用 2x 倍數，會產生 512 x 512 的 PNG；使用 3x 倍數則會產生 768 x 768。這是您取得適用於現代顯示器與印刷之清晰素材的方式——倍數越高，每英吋取得的細節越多，檔案也越大。將倍數提高到實際打算使用的最大尺寸以上並沒有任何好處，因為 PNG 在事後無法在不損失銳利度的情況下放大。
實務上，常見選擇如下。1x 適合螢幕預覽、應用程式圖示，以及 SVG 本身已包含足夠細節的各種用途。2x 是 Retina 顯示器和高 DPI 筆電的標準，這些螢幕每英吋容納的像素是兩倍，圖像必須呈現銳利效果。3x 以上最適用於印刷，或預先算繪要以比來源更大尺寸快取的圖示。
透明背景或白色背景
第二個控制項是背景，而正確選擇取決於 PNG 的使用位置。
PNG 支援 alpha 色版，因此預設情況下，SVG 中圖形周圍的區域會保持透明。對於覆蓋圖層、應用程式圖示、徽章、彩色背景上的標誌，以及任何需要疊放在彩色或照片表面上、而不帶有自身矩形背景的內容，這都是正確設定。
如果您想要純色畫布，工具會提供 White background 選項，在匯出前將圖像平鋪到純白背景上。當目的地需要非透明圖片時，這就是正確設定——包括投影片範本、拒絕 PNG alpha 的市集商品資訊、印刷 handout，或任何接收系統將透明視為錯誤的情況。
值得注意的是，透明效果無法在事後加回。一旦匯出白色背景的 PNG，alpha 色版就會消失；要重新建立，就得再次執行轉換並啟用透明選項。如果之後有可能需要透明版本，請維持預設的透明設定，只有在您同時需要不透明版本時，才另外儲存白色背景的副本。
為什麼某些 SVG 無法轉換
轉換的運作方式是將 SVG 繪製到瀏覽器內的畫布上，然後讀取像素；這項運作有一項重要限制：瀏覽器的同源安全規則。
如果 SVG 載入外部資源——以 URL 參照的遠端圖片、外部託管的字體、跨來源漸層，或任何不是放在檔案本身內部的素材——瀏覽器可能會排除該素材（將其匯出為空白），或將畫布標記為已污染，並基於安全原因拒絕匯出。發生這種情況時，工具會清楚告知您，並要求提供 self-contained SVG，也就是每個圖片、字體和漸層都直接嵌入檔案中，而非從其他地方連結的 SVG。
大多數匯出的標誌、圖示和插圖都已符合這項標準——它們是以單一 SVG 撰寫，沒有外部參照。問題通常出現在從設計工具複製貼上的標記參照了遠端字體，或 SVG 檔案內嵌了從 CDN 取得的點陣圖片。解決方式很直接：用任何文字編輯器開啟檔案，找出有問題的連結（font-family 或 image href），然後將素材以內嵌方式加入，或在重新執行轉換前將其平鋪。
隱私與僅本機的工作流程
最後一項值得說明的是隱私，因為標準替代方案——將 SVG 上傳到隨機的網路服務——確實是品牌團隊、自由工作者，以及處理未發布設計者的隱憂。若要更深入了解哪些內容會留在您的裝置上、哪些不會，請參閱指南 線上 SVG 轉 PNG 轉換器是否安全可用，它從不同角度探討了同一個問題。
基於瀏覽器的方法在設計上就避開了這個問題。每個步驟——解析 SVG、將其算繪到畫布、將像素點陣化、編碼 PNG，以及觸發下載——全都發生在您自己的裝置上，您的 SVG 絕不會傳送到伺服器，因此機密品牌素材、未發布設計和私密圖表都完全留在您的電腦中。不需要登入帳號、不需追蹤配額，圖像本身也不帶有遙測資料。
以上就是 SVG 轉換為 PNG 的運作方式、各控制項的作用，以及檔案拒絕匯出時該怎麼做的簡要說明。
若想進一步了解，請參閱 為 PNG 新增背景：技巧與應避免的常見錯誤。