SVG 优化压缩
SVG Optimiser
清掉编辑器留下的冗余、合并变换、缩减路径精度,并把渲染结果并排对比。
从设计工具存出来的 SVG 带着编辑器元数据、没人展开过的变换列表,以及写到小数点后七位的坐标。去掉这些很容易;知道它有没有改变画面才是难的部分,所以这里显示差异视图,而不只是一个字节数。
把 SVG 放到这里
也可以直接改下面的标记。什么都不会上传。
编辑标记
怎么用
拖入 SVG,或粘贴标记
它随输入实时优化,所以粘一个文件和就地编辑都行。
设精度
在 24 单位的 viewBox 上,两位小数在 100 倍缩放下是百分之一像素。低于一位,图标开始明显移位。
看差异视图
它用差值模式把优化后的文件叠在原文件上:纯黑说明两者渲染完全一致,任何亮起来的地方都是移动过的像素。
复制 SVG 或 data URI
这里的 data URI 是 URL 编码而不是 Base64,比原文件大约多 10% 而不是 33%。
常见问题
为什么“移除 title”默认关闭?
因为 `<title>` 是内联 SVG 的可访问名称。去掉它省大约三十个字节,并让一个有标签的图标对屏幕阅读器用户变成没标签的。
优化后我的图标稍微移位了。
精度对它的 viewBox 来说太低。viewBox 小意味着每个单位是画面的一大部分,舍入到一位小数就会明显移动。把精度调高,直到差异视图变黑。
它会压缩路径数据吗?
它舍入数字并把纯平移烘焙进去,并报告省了多少字节。它不把命令改写成更短的等价形式——那会改变曲线族,路径优化器真正的 bug 就出在那里。
可以从这些接进来
Favicon 网站图标生成
Favicon Generator
一次生成整套图标——ICO、各尺寸 PNG、苹果触摸图标、web manifest——外加可直接粘贴的 HTML。
SVG 转 PNG
SVG to PNG
按任意倍率把 SVG 渲染成 PNG、JPEG 或 WebP,背景可透明也可填色。
图片转 SVG 矢量
Image to SVG
把位图描摹成 SVG 路径,适合 logo 和线稿,不适合照片。
二维码生成
QR Code Generator
为网址、文本、Wi-Fi、名片或支付字符串生成二维码,可设纠错等级、加 logo、导出 SVG。
接下来
这些工具吃得下当前工具的产出,结果可以直接送过去。
Favicon 网站图标生成
Favicon Generator
一次生成整套图标——ICO、各尺寸 PNG、苹果触摸图标、web manifest——外加可直接粘贴的 HTML。
SVG 转 CSS 数据 URI
SVG to CSS Data URI
把 SVG 编码成可用作 CSS 背景的 data URI,只转义非转义不可的字符,把体积压到最小。
SVG 路径编辑器
SVG Path Editor
在绝对和相对命令之间转换路径数据,做平移、缩放、旋转和方向反转,并显示包围盒和实时预览。
SVG 转 PNG
SVG to PNG
按任意倍率把 SVG 渲染成 PNG、JPEG 或 WebP,背景可透明也可填色。
图片抠图去背景
Background Remover
在 OKLab 色彩空间中抠掉纯色或均匀背景,输出透明 PNG,并可用画笔修补边缘。
EXIF 信息清除
EXIF Remover
删掉照片里的相机、GPS 和编辑记录等元数据,像素本身分毫不动。