图标文件虚胖,多半是编辑器垃圾,不是位图像素太多。精简后仍是矢量。设计软件还要再改,请留一份原文件。
从阿里图标库、iconfont 或 Illustrator 导出的 SVG,经常塞满注释、多余空格和十几位小数——精简标记。LearnKu、CSDN 一类中文文会把 SVGO 写成「去元数据、简化路径」。本页能力更窄:把数字收到大约两位小数,删注释,把空白挤掉。不是完整 SVGO,也不会重写 d 路径。仓库里要上完整插件链,请在本机跑 Node 版 SVGO,不要指望这一页代替构建脚本。
要像素走 SVG 转 PNG。位图体积走图片压缩。站点多尺寸走Favicon。
下面这种注释和超长小数,精简后通常只剩路径本身:
<svg viewBox="0 0 24 24">
<!-- Generator: editor -->
<path d="M1.0000001 2.3333333h10"/>
</svg>
去多余空白,不是位图压缩
- 体积小一点的 SVG。不是设计重构,也不是转 PNG。
- 大约 32 MB。预览是否变形再提交仓库。
- 不是安全消毒。脚本、外链、实体仍可能留下。
- 滤镜、文字转路径、遮罩要多看一眼。
图标上线前先看一眼
- 贴或放入 SVG。
- 优化并对照预览。变形就回退原文件。
- 拷回仓库。还要进微信或网申,再栅格化成 PNG。
邮箱附件里塞一堆未精简的 SVG 雪碧图,对方用老版本 Outlook 可能根本不渲染。精简能瘦一点,但不能保证邮件客户端认矢量。需要对方一定看得见,还是导出 PNG。单文件大约 32 MB。
微信发图、公众号封面仍要位图,精简完的 SVG 并不能直接塞进那些后台。不是安全消毒。不是位图压缩。编辑器元数据可能被去掉。