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 会大到没有实用价值。
我的图片会被上传吗？
不会，转换在你的浏览器中完成。