在 Mac 上优化和压缩 SVG 文件
去除 Figma、Illustrator 和 Inkscape SVG 中的编辑器残留并对坐标取整：文件更小，外观不变。
Mac 上的SVG 优化
App 截图，使用的是示例文件。
如何使用SVG 优化
- 1
拖入 SVG
添加从 Figma、Illustrator、Inkscape 或 Sketch 导出的 SVG 文件，一个或多个均可。
- 2
选择精度
两位小数适合大多数图标和插图。
- 3
决定 ID 和标题
移除未使用的 ID；如果 SVG 需要向屏幕阅读器描述，请保留标题。
- 4
点按“优化”
注释、元数据和编辑器残留会被移除，数字会被取整。App 会显示处理前后的总大小。
- 5
比较它们
优化后的副本会以“optimised”命名，存储在“下载 › OneMacTools”中以日期命名的文件夹里。可用“预览”（眼睛）按钮确认它们看起来一样。
SVG 优化的功能
移除注释、元数据、仅供编辑器使用的元素和属性、空组、未使用的 ID 以及多余的小数位，而形状保持不变。可选择 1、2 或 3 位小数，以及是否为屏幕阅读器保留标题，然后用“预览”进行比较。
适合
- 网站上线前先缩小图标
- 清理导出的插画
- 让 SVG 代码更易读
选项说明
- 小数位数
- 1、2 或 3，默认为 2。形状、位置和尺寸中的数字会保留这么多位小数。细小或细节丰富的图形用 3，大而简单的形状用 1。
- 移除未使用的 ID
- 默认打开。移除文件中没有任何地方引用的 id 属性。如果你的 CSS 或 JavaScript 通过 ID 选择元素，请关闭此项。
- 保留标题（供屏幕阅读器使用）
- 默认打开。保留屏幕阅读器用来描述图像的 <title> 和 <desc> 元素。纯装饰性的 SVG 可以关闭此项。
最佳实践
- 小图标请用 2 或 3 位小数检查。取整到 1 位小数可能会让 16 或 24 px 图标上的细节发生偏移。
- 对于需要通过 ID 制作动画或设置样式，或使用 aria-labelledby 指向标题的 SVG，请关闭“移除未使用的 ID”。
- 对于图表和示意图等有意义的图像，请保持标题开启，以确保无障碍访问。
- 在将 SVG 内嵌到 HTML 或用“图像转 Base64”转换之前先优化；节省的每个字节，在每次页面加载时都会省下来。
- 保留原始导出文件。优化后的文件用于发布，不适合再在设计 App 中编辑。
兼容
- 输入
- SVG 文件。
- 输出
- 一个文件名加上“optimised”的优化后 SVG。
- 移除注释、元数据、仅供编辑器使用的元素和属性（来自 Inkscape、Sketch、Illustrator、Figma 等）、空组以及 XML 声明。
- 不是有效 SVG 的文件会被报告出来，而不会被更改。
关于SVG 优化的问题
如何减小 SVG 文件的大小？
将它拖到“SVG 优化”上并点按“优化”。编辑器残留、注释和元数据会被移除，长小数会被取整，文件变小而外观不变。
优化会改变 SVG 的外观吗？
不应该。形状保持不变，数字只会按你选择的小数位数取整。用“预览”按钮对比一下；对于非常小、细节丰富的图标，请使用 3 位小数。
为什么从 Figma 或 Illustrator 导出的 SVG 这么大？
设计 App 会添加元数据、编辑器专用属性以及浏览器并不需要的多位小数。移除它们通常能明显减小文件。
什么是未使用的 ID？
文件中没有任何地方引用的 id 属性，通常是图层名称遗留下来的。除非你自己的 CSS 或 JavaScript 用到了它们，否则可以放心移除。
SVG 中的标题需要保留吗？
需要，如果图像有实际含义（例如图标按钮或图表），这样屏幕阅读器才能描述它。纯装饰性的图像可以去掉。
可以一次优化多个 SVG 吗？
可以。拖入一整套图标，每个文件都会得到各自的优化副本。
SVG 优化会上传我的文件吗？
不会。SVG 优化完全在你的 Mac 上运行，文件绝不会离开你的 Mac，离线也能用。
SVG 优化会改动我的原文件吗？
不会。结果会存储为新文件，放在“下载 › OneMacTools”中带日期的文件夹里；除非你打开了另有说明的选项，否则原文件会原封不动。
SVG 优化需要什么？
只需一台运行 macOS 26 或更高版本的 Mac，无需安装其他任何东西。
下一步
将图像转为 Base64 Data URI，可直接粘贴到 HTML、CSS 或 JSON 中。
精灵图生成器将图标打包到一张图像中，附带显示每个图标的 CSS，以及 HTML 预览。
