这是一个创建于 88 天前的主题，其中的信息可能已经有所发展或是发生改变。
起因
作为一个前端狗，经常遇到这种尴尬场景：
- 拿到设计师给的 SVG 图标，但产品说要 PNG 格式
- 想在某些不支持 SVG 的地方用矢量图
- 需要透明背景 PNG ，但手头只有 SVG
- 每次都要麻烦设计师转换，或者用 PS 慢慢导出
忍无可忍，决定自己动手！
熬夜成果
做了个在线 SVG 转 PNG 工具：svg-to-png.org
为什么又造轮子？
市面上的工具要么：
- 需要下载软件
- 要注册登录
- 转换质量差
- 上传到服务器不安全
我的工具：
- 纯浏览器运行，文件不离开你的电脑
- 拖拽上传，秒级转换
- 自定义尺寸和背景色
- 高质量输出，保持透明度
- 完全免费，无套路
技术细节（给技术老哥们）
- 纯前端 Canvas 实现，无后端依赖
- 支持 SVG DOM 解析和光栅化
- 自适应尺寸算法，保持比例
- 支持透明背景和自定义背景色
- 响应式设计，手机也能用
实测效果
刚才用公司项目的图标试了下：
- 原 SVG 文件：2KB
- 转换后 PNG：透明背景，清晰无损
- 转换耗时：不到 1 秒
终于可以跟设计师说："这个我自己搞定"
求轻拍
第一次做这种工具站，如果有 bug 或建议，欢迎各位老哥指正！
P.S. 下一步准备加个批量转换功能，有需要的+1
 | 1 chenzw2 87 天前 要是能搞个 png 转 svg 才牛 |
 | 2 zxhywork OP |
 | 3 TimeDong 73 天前 可以借鉴下怎么实现的吗？在做 svg 导出为 png 的需求，用了下 html2canvas 始终不能满意 |
Select Language