V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
爱意满满的作品展示区。
zxhywork
V2EX  ›  分享创造

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

  •  
  •   zxhywork · 15 天前 · 776 次点击

    起因

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

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

    3 条回复    2025-07-30 14:43:45 +08:00
    chenzw2
        1
    chenzw2  
       14 天前
    要是能搞个 png 转 svg 才牛
    zxhywork
        2
    zxhywork  
    OP
       7 天前
    已经把你要的需求加上了,你去感受下: https://svg-to-png.org
    另外我还写了另一个工具: https://growagardencalculator.im
    TimeDong
        3
    TimeDong  
       16 小时 38 分钟前
    可以借鉴下怎么实现的吗?在做 svg 导出为 png 的需求,用了下 html2canvas 始终不能满意
    关于   ·   帮助文档   ·   自助推广系统   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   1178 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 21ms · UTC 23:22 · PVG 07:22 · LAX 16:22 · JFK 19:22
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.