SVG 转换工具箱

SVG 格式转换，不装软件直接搞定

SVG 这格式确实让人又爱又恨。好处是矢量无损，做图标和 Logo 放大多少倍都不模糊。烦人的是兼容性——微信公众号后台传头像只认 PNG，Word 里插图通常要 JPG，搞个网站 Favicon 还非得是 .ico 格式，光拿着一张 SVG 根本没法交差。做这个页面就是为了解决这些痛点，不用下载全家桶软件，也不用扫码注册，浏览器打开就能干活。

我自己写前端也碰到过无数次这种琐碎需求。以前要么开笨重的 Photoshop 重新导图，要么在网上搜工具，结果发现还得把设计稿上传到别人的服务器。后来索性自己糊了一个，所有解析和转换都在你当前的浏览器本地跑，断网也能用，代码不经过网络，转完直接存本地，用起来省心得多。

PNG、JPG、WEBP 怎么挑？

PNG 最大的优势就是保留透明通道。比如抠好的不规则 Logo，转成 PNG 贴到什么颜色的背景上都融合得很好，边缘干净。代价就是文件偏大，稍微复杂点的图标可能就几十 K，页面用多了会拖慢加载速度。

JPG 去掉了透明度，换来的是极高的压缩率。它更适合做带底色的图片，比如文章封面或者 OG 抓取图。这里要提醒下：SVG 转 JPG 如果不设背景，透明部分默认会变成黑底——我刚开始做这个工具的时候就被坑过，所以现在加上了背景色选项，记得选成白色。

WEBP 算是现在的版本答案，压缩算法很猛。同样的图，它通常比 PNG 还要小三分之一，而且同样支持透明底。现在主流浏览器基本都支持了。如果你在做网页性能优化，建议优先切成 WEBP。不过偶尔会有老旧系统不认，所以我还是留了 PNG 和 JPG，具体看你的项目要兼容到什么程度。

Favicon 那点事

网站标签栏上那个小图标（Favicon）看着不起眼，折腾起来也挺麻烦。不同系统要的尺寸还不一样：浏览器标签 16x16 就够，书签栏 32x32，到了 Windows 桌面快捷方式可能就得 48x48 甚至更大。老套路是准备一堆图，再找个打包工具合在一起。

用 SVG 做源文件就舒服多了，画好矢量图，勾选几个常见尺寸一键输出。这个工具目前给了 6 种尺寸，我个人最常用的是 32x32，兼顾了清晰度和体积。拿不准的话，多勾几个尺寸一起生成就行。

顺带提一句：ICO 并不是简单的改后缀，它本质上是个容器，里面装的是多张 BMP 位图。所以直接重命名 .png 到 .ico 是会报错的，必须重新编码写入头文件，这也是我单独拎出这个功能的原因。

代码转换：Base64、CSS URL 和 React JSX

这是后来补充的面板，因为发现很多前端同行不想额外引入图片文件，更喜欢直接把 SVG 嵌到代码里。简单聊几个场景：

Base64 适合直接写死进 HTML 或 CSS，能省掉一次网络请求。不过转码后体积会膨胀 30% 左右，只适合小图标，太复杂的 SVG 这么干纯属增加页面负担。

CSS URL 编码是把 SVG 的尖括号等特殊字符做转义，然后直接丢进 background-image: url() 里。这招比 Base64 省体积，而且如果你代码里用了 fill="currentColor"，还能直接用 CSS 控制图标颜色，非常灵活。

React JSX 转换则是为了消灭“满屏红线”的痛点。把 SVG 往 React 里一粘，class 必须换 className，像 stroke-width 这种全得改成驼峰 strokeWidth。这些琐碎活儿手动改太磨人，现在点一下按钮就全处理好了。

隐私说明

再说一遍，所有转换都是在本地浏览器运行，不会上传任何数据。不管你处理的是还没解密的产品原型，还是公司内部系统资产，直接用就行——连网络请求都没有，安全得很。

这工具适合谁

• 前端开发：开发项目时，批量把 UI 给的 SVG 转换成代码或兼容图片
• 设计师：给客户交付素材时，顺手转几份常用格式，省得对方打不开
• 个人站长：给自己的博客配个 Favicon，不用专门去下个设计软件
• 普通用户：写文档或做 PPT 拿到了 SVG 却插不进去，用它救个急

这工具我会一直挂在服务器上免费给大家用，免登录不限次。以后遇到什么新的痛点，再慢慢往里加。