如何將 SVG 轉換成 PNG
- 1. 選擇 SVG 檔案點選「選擇 SVG 檔案」,或把檔案拖曳到框內。
- 2. 點選「轉換」在「尺寸」選擇 1× 到 8×,然後點選「轉換」。
- 3. 下載可以逐一下載 PNG,也可以打包成 ZIP 一起下載。
關於 SVG 和 PNG
SVG 是向量格式。它用指令描述形狀和文字,所以放到任何大小都很清晰。網頁上的標誌和圖示通常用 SVG。
PNG 是固定尺寸的像素格。社群網站、電子郵件簽名檔、Office 文件和大多數聊天 App 都接受 PNG,但很少接受 SVG。
| SVG | PNG | |
|---|---|---|
| 類型 | 向量 | 像素 |
| 放大不模糊 | 是 | 否 |
| 透明 | 支援 | 支援 |
| 可當作文字編輯 | 可以 | 不行 |
| 社群網站、電子郵件、Office 是否接受 | 很少 | 幾乎都接受 |
| 適合 | 網頁上的標誌和圖示 | 需要一般圖片的任何地方 |
選擇輸出尺寸
「尺寸」選項會把 SVG 設定的寬度和高度放大相應倍數。如果 SVG 沒有設定寬高,就使用 viewBox。下表是以 200 × 100 繪製的標誌為例。
| 尺寸 | PNG 大小 | 適合 |
|---|---|---|
| 1× | 200 × 100 | SVG 本身的尺寸 |
| 2×(預設) | 400 × 200 | 高解析度螢幕 |
| 4× | 800 × 400 | 簡報和列印 |
| 8× | 1600 × 800 | 大尺寸輸出和橫幅 |
可能看起來不同的地方
每個 SVG 都會以瀏覽器顯示圖片的方式繪製,所以裡面的指令碼永遠不會執行。有些內容可能無法呈現。
- 從外部載入的網頁字型可能不會套用,文字會改用預設字型。要精確呈現字體,請在設計軟體中把文字轉成外框。
- 以網址連結的圖片可能不會顯示。內嵌在 SVG 中的圖片可以正常顯示。
- 動畫或互動式 SVG 會變成一張靜態畫面。
- SVG 沒有填色的區域會保持透明。如果出現白色方框,表示 SVG 在圖稿後面有一個白色矩形。
隱私
轉換在您的瀏覽器中進行。檔案不會上傳到伺服器。
常見問題
怎麼用 SVG 產生高解析度的 PNG?
點選「轉換」前,把「尺寸」設為 4× 或 8×。SVG 是向量格式,所以大張的 PNG 和小張的一樣清晰。
可以把 SVG 轉成 4K 的 PNG 嗎?
取決於 SVG 本身的尺寸。寬 480 像素的 SVG 用 8× 轉換後,寬度是 3840 像素,也就是 4K 的寬度。
可以設定精確的寬度和高度嗎?
不可以。「尺寸」選項只能放大 1×、2×、4× 或 8×。請先在 SVG 中設定寬高,或選擇最接近的倍數,再調整 PNG 的大小。
SVG 轉 PNG 會保留透明背景嗎?
會。SVG 中空白的區域在 PNG 中仍然是透明的。
為什麼 PNG 裡的文字看起來不一樣?
SVG 可能使用了沒有內嵌的網頁字型,所以顯示的是替代字型。請在設計工具中把文字轉成路徑,再試一次。
轉換時 SVG 裡的指令碼會執行嗎?
不會。SVG 會以圖片方式繪製,所以裡面的指令碼都不會執行。