设计软件导出的 SVG 往往带着多余信息
SVG 文件可能包含编辑器命名、注释、隐藏元素、重复属性和过高的小数精度。SVGOMG 把 SVGO 的优化功能做成网页界面,拖入文件后能同时看到预览、源码和体积变化,适合在上线前清理图标与矢量插画。
优化不是选项开得越多越好。删除 viewBox 可能破坏响应式缩放,合并路径可能影响后续动画,颜色转换也可能改变 CSS 控制方式。保留原文件,再在副本上逐步开启设置。
一套不容易破坏图形的操作顺序
先使用默认优化并比较预览,再检查 viewBox、渐变、蒙版、剪切路径和文字。简单单色图标通常可更激进,复杂品牌标志和动画图形则应保守。
- 保存未经优化的源文件和设计软件版本;
- 在浅色、深色和不同背景上检查图形;
- 测试最小与最大实际显示尺寸;
- 在 Chrome、Firefox 与移动浏览器核对一次。
体积下降之外还要看可维护性
把所有路径压成难以阅读的一行,可能让文件更小,却增加后续修改成本。对于进入代码仓库、需要主题颜色或动画的 SVG,应保留稳定的 id、类名和结构;一次性静态插图则可以更偏向体积。
需要从 JPG 或 PNG 生成矢量图时,应先使用专门的描摹工具,SVGOMG 只负责优化已有 SVG,不会把像素图自动变成高质量矢量。工具边界明确,结果才不会被错误期待。
下载后把成品放回真实页面验证
网页预览正常仍不够。将优化后的文件放进实际组件,检查 CSS 继承、无障碍标题、缓存和布局尺寸。品牌 Logo 尤其要核对线条、留白和色值,不能只看压缩比例。
批量处理可转向 SVGO 命令行并把配置纳入构建流程;偶尔优化单个文件时,SVGOMG 的即时预览更直观。先在少量文件验证配置,再批量应用到整个图标库。
