在 Inkscape 中將 SVG 檔案轉換為 PNG 影像,是一個簡單的匯出操作,可以將可縮放的向量指令轉成固定大小的像素網格。SVG(可縮放向量圖形)格式以一個包含幾何指令的小型文字檔儲存圖稿,而 PNG(可攜式網路圖形)則以固定的寬度和高度儲存一格光柵化的彩色像素。Inkscape 透過內建的「匯出 PNG 影像」對話框來處理此轉換,讓你可以設定明確的像素尺寸、用於將向量單位對應到像素的 DPI,以及選擇透明或不透明的背景。整個流程只需要幾次點擊,安裝 Inkscape 後即可完全離線執行,而且產生的 PNG 可在任何影像檢視器、瀏覽器、文件和聊天視窗中開啟。由於 PNG 無法在不失銳利度的情況下放大,因此匯出步驟就是決定最終像素尺寸的地方,也是整個工作流程中最重要的決定。

how to convert svg to png in inkscape
how to convert svg to png in inkscape

為什麼要將 SVG 轉成 PNG

SVG 和 PNG 解決的是兩個不同的問題,了解何時在兩者之間切換可以省去許多麻煩。SVG 根本不是由像素構成的。它是一個充滿指令的小型文字檔 —— 在這裡畫一個圓、用那個顏色填滿這條路徑、在那裡放上這段文字。由於這些指令與解析度無關,無論是在名片上兩公分,還是在廣告看板兩公尺寬,SVG 都能保持銳利清晰。這就是為什麼標誌、圖示和插畫通常一開始就會以 SVG 格式製作。

相較之下,PNG 是一種具有固定像素寬度和高度的光柵影像。它無法在不失清晰度的情況下放大,但享有幾乎無所不在的支援。幾乎所有應用程式、聊天視窗、圖片欄位、簡報工具、市集上架、郵件用戶端和作業系統預覽都能毫無疑問地顯示 PNG,而同樣的許多地方卻會直接拒絕上傳 SVG,或是顯示效果不一致。

在以下幾個常見情況中,你可能會選擇將 SVG 轉成 PNG:

  • 你需要將標誌附加到文件、簡報或社群貼文中,但這些地方不接受向量檔案。
  • 你希望使用固定的像素尺寸,讓圖片在每個地方看起來都一樣,而不會隨容器縮放。
  • 你正在準備應用程式商店截圖、網站圖示、電子郵件圖片或縮圖,而這些場合需要使用光柵格式。
  • 你想要交付一個檔案給非技術背景的同事,讓他們能在任何裝置上按兩下就開啟。

如何在 Inkscape 中將 SVG 轉換成 PNG

Inkscape 是桌機上最受歡迎的免費向量編輯器,它內建一個專屬的 PNG 匯出工具,可讓你精細控制輸出尺寸。請依照下列步驟,使用 Inkscape 原生工作流程將任何 SVG 轉換成 PNG:

  1. 開啟你的 SVG。啟動 Inkscape 並選擇檔案 > 開啟,然後從電腦中選取 .svg 檔案。圖稿會以目前的文件尺寸出現在畫布上。
  2. 設定文件尺寸。開啟檔案 > 文件屬性,確認頁面的寬度和高度符合你希望匯出的尺寸。如果你的 SVG 已經宣告了 width 和 height 屬性,則會使用那些值。
  3. 開啟 PNG 匯出對話框。前往檔案 > 匯出 PNG 影像。會出現一個對話框,要求輸入點陣圖大小和檔名。
  4. 設定輸出尺寸。以像素為單位輸入所需的寬度或高度。另一個尺寸會根據長寬比自動更新。你也可以調高 DPI 欄位 —— 96 DPI 會將一個向量單位對應到一個像素,而較高的數值(例如 192 或 300)則能在 Retina 螢幕或印刷上產生更銳利的輸出。
  5. 選擇匯出範圍。選擇頁面以匯出整份文件;選擇選取範圍僅匯出你已選取的物件;或選擇自訂以繪製一個特定的矩形。
  6. 設定背景。預設保持背景透明,或勾選背景方塊並選擇一種顏色(通常是白色),將圖稿壓平到純色畫布上。
  7. 匯出並儲存。點選匯出,選擇目的地資料夾,使用 .png 副檔名命名檔案,然後確認。Inkscape 會將 PNG 寫入磁碟,完成轉換。

對於批次轉換,Inkscape 也支援使用命令列搭配 --export-type=png 和 --export-filename 選項進行匯出,當你需要一次處理數十個圖示而不想手動開啟每個檔案時,這非常方便。

不安裝軟體也能將 SVG 轉成 PNG

如果你只有單一檔案要轉換,而且不想安裝 Inkscape 或任何其他桌面應用程式,那麼使用瀏覽器內的工具就能在短時間內完成任務。SVG 轉 PNG 轉換器完全在瀏覽器中執行 —— 資料不會上傳到任何伺服器,因此機密的品牌素材和未公開的設計都會留在你的裝置上。介面上只有四個控制項,只要你按下匯出按鈕,就能立即下載輸出檔案。

這種做法特別適合以下情況:你使用的是受管理的公司筆電,無法安裝新軟體;你需要在 Chromebook 或平板上進行快速轉換;或是單純不想為了一次性任務而讓重量級的向量編輯器一直保持開啟。由於每一步驟 —— 解析 SVG、將其渲染到畫布上、將像素光柵化,以及編碼 PNG —— 全都在 JavaScript 中於本機完成,因此檔案從未離開你的裝置。

相同的方法也適用於相關的轉換。如果你的目的地只接受 JPG 而非 PNG,SVG 轉 JPG 操作指南涵蓋了相同的瀏覽器工作流程,只是輸出格式不同。

SVG 與 PNG:格式比較

這兩種格式都能顯示相同的圖稿,但檔案離開你的設計工具後,它們的表現方式截然不同。下表總結了取捨重點,讓你在匯出前能選對格式。

屬性 SVG(向量) PNG(光柵)
內部結構 包含幾何指令的文字檔 經壓縮的像素網格
縮放時不失銳利度 可以,無限縮放 不行,放大後會變模糊
標誌的典型檔案大小 非常小,通常只有幾 KB 較大,會隨像素尺寸增加
透明支援 支援,全 Alpha 通道 支援,全 Alpha 通道
瀏器與應用程式支援 在瀏覽器中良好,其他平台不一 幾乎所有軟體皆通用
日後仍可作為向量編輯 可以,路徑和文字皆可編輯 不行,僅有像素
最佳用途 標誌、圖示、可在任何尺寸重複使用的插畫 社群貼文、簡報、附件、應用程式截圖

若想深入討論日常工作中該選擇 PNG 還是 JPG,請參考JPG 與 PNG 決策指南

疑難排解常見的轉換錯誤

大多數 SVG 轉 PNG 的轉換不是乾淨成功,就是因為一個眾所皆知的問題而失敗。如果你的匯出結果是空白的、缺少部分內容,或根本無法執行,請在認定工具故障之前,先逐一檢查這份清單。

SVG 引用了外部資源

轉換失敗最常見的原因,就是 SVG 指向了外部資源。當 SVG 引用了託管在某個 URL 上的圖片、從 CDN 載入的字型,或任何其他跨來源資源時,基於安全性考量,瀏器會拒絕將這些像素從畫布中讀回。匯出工具可能會將該資源省略(導致呈現空白),或完全封鎖下載。解決方法是使用自包含的 SVG,將所有圖片、字型和漸層直接嵌入檔案內,而不是從其他地方連結。

SVG 沒有 width 或 height

當來源 SVG 省略明確的尺寸時,轉換器會回退使用 viewBox 屬性。如果 viewBox 也缺失,則會套用一個合理的預設大小,使匯出作業不會默默地失敗。在 Inkscape 中,只要開啟檔案 > 文件屬性並確認頁面大小,就能從根本解決來源檔案的這個問題。

輸出結果太小或太大

由於 PNG 是光柵格式,你在匯出時設定的像素尺寸,就是永遠固定的像素尺寸。如果結果在 Retina 螢幕上看起來模糊,請以目標尺寸的 2 倍或 3 倍重新匯出。如果檔案太大且載入緩慢,請將尺寸調降到實際顯示大小,並接受 PNG 之後無法再放大的事實。

透明度消失了

PNG 支援 Alpha 通道,因此 SVG 中的透明區域預設會保持透明。如果匯出的 PNG 顯示的是純白色背景,代表你在 Inkscape 的匯出對話框中啟用了背景選項,或是在瀏覽器工具中勾選了「白色背景」切換鈕。只要將其關閉,即可恢復透明效果。

選擇正確的解析度與背景

在所有因素中,有兩個決定對最終的 PNG 影響最大:像素尺寸和背景。在螢幕上使用時,以預期顯示尺寸的 2 倍匯出,可以在不無謂增加檔案大小的情況下,讓 Retina 幕呈現清晰銳利的效果 —— 一個寬 400 像素的標誌以 800 像素匯出,在所有現代裝置上看起來都會很清晰。對於印刷用途,請將所需的實際尺寸乘以印表機的 DPI 來得出像素數;一個 5 公分寬的標誌在 300 DPI 下,橫向約為 591 像素。

關於背景,只要 PNG 會疊在另一個表面之上(投影片上的標誌、網頁上的圖示、照片上的貼圖),就應保持透明。當圖稿需要明確的邊緣時,則改用純色背景,例如個人大頭照、市集上架圖片,或是會顯示在固定顏色容器內的縮圖。這兩個選項都可以反悔,因此如果不確定目的地需要哪一種,不妨各匯出一次透明版與純色背景版。

將 SVG 透過 SVG 轉 PNG 轉換器,以 2 倍縮放和正確的背景設定執行後,所產生的 PNG 就能用於投影片、附件、社群貼文,以及任何需要一般影像檔案的地方。