SVG 轉 PNG

功能介紹

這個工具能把 SVG 程式碼或 .svg 檔案轉換成 PNG、JPG 或 WebP 圖片。貼上標記或拖入檔案，選擇倍數或確切寬度，就能下載點陣圖。算繪在你的瀏覽器中進行，所以圖示、Logo 和圖表都不會離開你的電腦。

只要遇到不接受 SVG 的地方就很好用：App 圖示、社群媒體圖片、簡報、文件、電子郵件簽名檔，或較舊的軟體。即時預覽會顯示在棋盤格背景上，讓你清楚看到哪些部分是透明的。

使用方式

1. 把 <svg> 程式碼貼到編輯器、按 上傳 開啟檔案，或把檔案拖曳到頁面上。範例 會載入一個小 Logo。
2. 選擇 尺寸：1× 使用 SVG 本身的尺寸，2×–4× 則按倍數放大。也可以輸入以像素為單位的 自訂寬度，高度會依比例調整。
3. 選擇 格式：PNG 為無損輸出並支援透明，JPG 適合照片且相容性好，WebP 檔案較小。
4. 選擇 背景：透明、白色或任何顏色。
5. 按 下載。預覽下方那一行會顯示最終的像素尺寸、格式和檔案大小。

尺寸如何計算

工具會檢查根 <svg> 元素。以 px、pt、mm、cm、in 或 em 表示的 width 和 height 會換算成像素。如果它們不存在或以百分比表示，就改用 viewBox 的寬度和高度。接著套用所選的倍數或自訂寬度，並把 SVG 改寫成明確的像素尺寸，讓每個瀏覽器都以相同方式繪製。

範例

一個 viewBox="0 0 24 24" 且沒有寬高的圖示，在 1× 時會變成 24 × 24 的 PNG。4× 時變成 96 × 96；自訂寬度 512 時則變成 512 × 512 的 PNG，適合當作應用程式商店的圖示，而且因為是從向量算繪而不是放大點陣圖，依然非常清晰。

小提示

• 無效的 XML 會回報行號，讓你直接跳到問題所在。
• 內嵌的點陣圖片（<image href="data:...">）可以正常顯示；外部連結則不行。
• 文字會使用你電腦上安裝的字型。若要在任何地方都得到像素級一致的結果，請先在設計工具中把文字轉成外框。
• 最大輸出尺寸受瀏覽器 canvas 大小限制，每邊約 16,000 像素。