任務路徑 / 從輸入到結果
如何把 SVG 點陣化為 PNG
- 01
加入 SVG
「選擇檔案」一次接受一個 .svg。原始標記碼絕不會放進頁面；預覽只會在淨化後的算繪完成後出現。
- 02
選擇尺寸
在「匯出比例」下點選 1x、2x、3x 或 4x，或在「輸出寬度」與「輸出高度」輸入精確的像素值。
- 03
淨化並轉換
按下「淨化並轉換」。摘要會列出最終像素尺寸，以及因不安全或不受支援而移除的項目數。
- 04
檢查並下載
若移除數量大於零，請先把預覽與原始圖稿比對，再下載 PNG。
SVG 轉 PNG
開啟一個 SVG，本頁會先用嚴格的允許清單清理它，再把安全的版本依你選的倍率算繪到透明 PNG 上，全部在瀏覽器內完成。指令碼絕不會執行，檔案也不會上傳。需要知道的是：允許清單以外的內容，例如 CSS 樣式、濾鏡、標記與內嵌影像，會在算繪前被移除。
工具速覽
- SVG 大小上限
- 標記碼 2 MiB，且須辨識為 image/svg+xml
- 縮放
- 1x、2x、3x、4x 按鈕，本頁預設 2x；「匯出比例」也接受 0.01 到 32
- 輸出上限
- 縮放後單邊 8,192 px、總計 24 MP
- 算繪前移除
- 指令碼、事件處理常式、style 屬性與 <style>、濾鏡、標記、<image>、foreignObject、外部 URL 及 data: URL
- 直接拒絕
- 含 DOCTYPE 或 ENTITY 宣告的檔案，以及既無 width/height 也無 viewBox 的檔案
- 背景
- PNG 中維持透明；只有切換到 JPEG 時才會填入底色
把向量圖稿變成像素
SVG 描述的是形狀，所以在任何尺寸下都清晰銳利，但簡報工具、文件編輯器、商店頁面等許多地方需要固定的點陣圖。點陣化為 PNG 能保留透明度，除了你選定的像素格線之外不會損失任何東西。
真正要決定的就是這個格線。縮放倍率會乘上 SVG 自身的 width 與 height（缺少這兩個屬性時改用 viewBox），所以 64×64 的圖示在 2x 時會變成 128×128。之後再放大 PNG 會變模糊，因此請以需要的最大尺寸算繪。
多數意外都能用淨化來解釋。路徑、基本形狀、文字、漸層、裁剪路徑、遮罩、圖樣與本機 <use> 參照都會保留，fill、stroke 等呈現屬性也一樣。寫在 CSS 類別、style 屬性或 <style> 區塊中的樣式會被捨棄，因此用這種方式匯出的圖稿可能算繪成黑色或沒有填色。
常見問題
為什麼 PNG 變黑或失去顏色？
顏色很可能是用 CSS 設定的：<style> 區塊、類別規則或 style 屬性。這些都會被移除，而 SVG 形狀預設以黑色填滿。請改用呈現屬性（fill、stroke）而非 CSS 重新匯出 SVG，或在設計工具中選擇內嵌屬性的匯出方式。
高解析度螢幕該選哪個倍率？
本頁預設為 2x，會把 SVG 宣告的尺寸加倍，適合大多數高像素密度螢幕。較大的版位可用 3x 或 4x，但結果仍須在單邊 8,192 px 與 24 MP 以內。
為什麼箭頭或陰影不見了？
在 SVG 中，箭頭用 marker 元素繪製，陰影用 filter 元素繪製，兩者都不在淨化器的允許清單中。匯出 SVG 前，請先在編輯器中把這些效果轉換成一般路徑。
為什麼我的 SVG 被拒絕？
常見原因包括：含 DOCTYPE 或 ENTITY 宣告、檔案超過 2 MiB、檔案未被辨識為 image/svg+xml，或根元素沒有 width、height 與 viewBox。會讓算繪超出像素上限的縮放倍率也會被拒絕，並註明對應的限制。
連結的字型與圖片會出現在 PNG 中嗎？
不會。外部 URL、data: URL 與 <image> 元素都會被移除，所以連結的圖片與網頁字型永遠不會載入。文字會以瀏覽器中已有、對應所指定 font-family 的字型繪製；若字形必須精確，請在編輯器中把文字轉為外框。