前端开发者经常需要将SVG图标转换为PNG格式，但市面上工具要么需要下载软件，要么质量差或需要注册登录。本文介绍了一个纯浏览器运行的在线SVG转PNG工具svg-to-png.org，支持拖拽上传、秒级转换、自定义尺寸和背景色、高质量输出，完全免费。该工具采用前端Canvas技术实现，无后端依赖，保持透明度，适合前端开发者使用。

💻 该工具纯浏览器运行，文件不离开用户电脑，支持拖拽上传，秒级转换，无需注册登录，完全免费。

🎨 支持自定义尺寸和背景色，高质量输出，保持SVG图标透明度，满足前端开发中对PNG格式图标的多种需求。

🔧 采用前端Canvas技术实现，无后端依赖，支持SVG DOM解析和光栅化，自适应尺寸算法，保持比例，响应式设计，手机也能用。

⚡ 测试用公司项目图标转换，原SVG文件2KB，转换后PNG清晰无损，耗时不到1秒，效率高。

🌐 适合前端开发者，无需转换软件或复杂操作，即可快速解决SVG转PNG问题，提高工作效率。

起因

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

拿到设计师给的 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