熬夜一周撸了个图片在线各种格式转换的工具，终于不用再求设计师了 😭 - svg-to-png.org

[zxhywork]

起因

作为一个前端狗，经常遇到这种尴尬场景：

• 拿到设计师给的 SVG 图标，但产品说要 PNG 格式
• 想在某些不支持 SVG 的地方用矢量图
• 需要透明背景 PNG ，但手头只有 SVG
• 每次都要麻烦设计师转换，或者用 PS 慢慢导出

忍无可忍，决定自己动手！

熬夜成果

做了个在线 SVG 转 PNG 工具：svg-to-png.org

为什么又造轮子？

市面上的工具要么：

• 需要下载软件 ❌
• 要注册登录 ❌
• 转换质量差 ❌
• 上传到服务器不安全 ❌

我的工具：

• ✅ 纯浏览器运行，文件不离开你的电脑
• ✅ 拖拽上传，秒级转换
• ✅ 自定义尺寸和背景色
• ✅ 高质量输出，保持透明度
• ✅ 完全免费，无套路

技术细节（给技术老哥们）

• 纯前端 Canvas 实现，无后端依赖
• 支持 SVG DOM 解析和光栅化
• 自适应尺寸算法，保持比例
• 支持透明背景和自定义背景色
• 响应式设计，手机也能用

实测效果

刚才用公司项目的图标试了下：

• 原 SVG 文件：2KB
• 转换后 PNG：透明背景，清晰无损
• 转换耗时：不到 1 秒

终于可以跟设计师说："这个我自己搞定" 🎉

求轻拍

网站：svg-to-png.org

第一次做这种工具站，如果有 bug 或建议，欢迎各位老哥指正！

---

P.S. 下一步准备加个批量转换功能，有需要的+1

[chenzw2]

要是能搞个 png 转 svg 才牛

[zxhywork]

已经把你要的需求加上了，你去感受下： https://svg-to-png.org
另外我还写了另一个工具： https://growagardencalculator.im

[TimeDong]

可以借鉴下怎么实现的吗？在做 svg 导出为 png 的需求，用了下 html2canvas 始终不能满意