PNG 轉 SVG使用教學
- 拖放 PNG、GIF 或 WebP 精靈圖。
- 選擇輸出模式：每種顏色一條路徑（最小）、合併矩形，或每像素一個矩形。
- 設定顯示尺寸；viewBox 一律以像素為單位，所以 SVG 不管怎樣都能乾淨縮放。
- 可選擇加上純色背景。
- 下載 .svg 或複製程式碼。
你會得到什麼
- 含 shape-rendering="crispEdges" 的 SVG
- 各模式的檔案大小比較
- 可複製的 SVG 原始碼
來自實際做遊戲的技巧
- 路徑模式通常檔案最小，適合網頁、圖示與雷射切割機。
- 矩形模式最方便手動編輯或用 CSS 做動畫，因為每個色塊都是獨立元素。
- 精靈圖盡量小。64×64 的精靈圖瞬間就能轉換；有上千種顏色、接近照片的圖片會產生巨大的 SVG。
- 半透明像素會轉為 fill-opacity，柔和陰影在轉換後依然保留。
使用情境
- 把精靈圖當作清晰的圖示或 Logo 用在網站上
- 大尺寸印製像素畫（海報、貼紙、周邊）
- 把像素畫匯入 Figma、Illustrator 或 Inkscape
- 用像素設計進行雷射切割與割字
常見問題
轉換是無損的嗎？
是的。每個像素都剛好被一個形狀覆蓋，顏色與 Alpha 完全相同。把 SVG 以原始尺寸點陣化，就能得到原本的 PNG。
為什麼不直接描圖？
描圖工具會把邊緣平滑成曲線，這會毀掉像素畫。這個轉換器讓邊緣維持在像素網格上的 90° 硬角。
哪種模式的檔案最小？
路徑模式。同色矩形共用一個 path 元素，並使用簡短的相對指令。工具會顯示每種模式的大小，方便你比較。
放大後會模糊嗎？
不會。SVG 使用 shape-rendering="crispEdges" 與整數座標，所以任何縮放下邊緣都保持銳利。
有尺寸限制嗎？
最大 512×512 像素。更大的圖片產生的 SVG 會大到沒有實用價值。
我的圖片會被上傳嗎？
不會，轉換在你的瀏覽器中完成。