SVG 优化器，免费

工作原理

1. 粘贴或上传 SVG：直接输入 SVG 标记，或上传来自 Illustrator、Figma 或 Sketch 导出的 .svg 文件。
2. 配置优化通道：选择要应用的优化 · 移除注释、移除元数据、简化路径和规范化 viewBox。
3. 执行优化：工具运行选定的通道，并显示体积减小的百分比。
4. 下载或复制：保存优化后的 SVG，或复制标记粘贴到您的代码中。

为什么要优化 SVG？

从设计工具导出的 SVG 文件包含大量不必要的数据 · 编辑器元数据、带默认值的内联 style 声明、空组、冗余 transform 属性和注释。这些多余内容会增大体积而对渲染无影响。SVGO（此处使用的行业标准 SVG 优化器）通常能在保持像素级渲染的同时将体积减小 50–80%。更小的 SVG 加载更快、在 HTML 中内联更迅速、节省带宽 · 对每页加载数十个 SVG 的图标系统尤为重要。

应用的优化

• 移除注释 · 移除生成器和编辑器注释
• 移除元数据 · title、desc 和 XMP 元素
• 合并空组 · 移除不必要的包裹 <g> 元素
• 简化路径 · 合并并缩短冗余的路径命令
• 清理属性 · 移除默认值和展示属性
• 规范 ViewBox · 统一坐标系统

SVG 与 SVGO 简史

可缩放矢量图形(SVG)起源于两个 W3C 提案之间的竞争:Adobe、IBM、Netscape 和 Sun 提出的 Precision Graphics Markup Language(PGML),以及 Microsoft 提出的 Vector Markup Language(VML)。两者均于 1998 年提交;W3C 的妥协成为 SVG,于 2001 年 9 月作为 SVG 1.0 推荐发布。Internet Explorer 出名地拒绝提供 SVG 支持,直到 IE9(2011 年),而 Firefox、Safari 和 Opera 从 2000 年代中期就支持了。SVG 1.1 于 2003 年出现,2011 年有第二版。SVG Tiny 1.2 于 2008 年针对移动设备。SVG 2 大约在 2016 年开始起草但停滞了;今天它仍然是候选推荐草案(最后于 2018 年触及),浏览器单独推出各个部分。优化稍后出现。SVGO 由 Kir Belevich(svg-go)创建,并于 2012 年 10 月首次在 GitHub 上发布,用 JavaScript 编写。它成为事实上的标准,集成到 webpack-loader、Vite、Sketch、Figma 导出插件,以及 2015 年由 Jake Archibald(Chrome 团队)启动的 SVGOMG Web UI。SVGO 3(2023 年发布)使代码库现代化。此工具实现了 SVGO 最有影响力的插件的安全子集,完全在你的浏览器中运行。

SVG 优化器实际做什么

• 小数精度降低。Illustrator 以 6 位小数导出路径,如 M127.348293。对于典型的图标大小,3 位小数在视觉上相同;1 或 2 位通常足够。SVGO 通过 cleanupNumericValues 插件默认使用 3 位小数。精度越低 = 文件越小。
• 折叠无用的组。设计工具将每个操作包裹在 <g> 元素中;许多在简化后变空。collapseGroups 插件将单子组合并到其父级中。
• 剥离元数据。Illustrator 在每次导出时盖上包含 XMP 包的 <metadata>...</metadata> 块,Inkscape 带 sodipodi 命名空间属性,Figma 带编辑器 ID。这些都不影响渲染。removeMetadata、removeEditorsNSData 和 removeXMLProcInst 处理这些。
• 路径命令优化。将绝对坐标转换为相对坐标(通常较短),合并连续的线段(l 5,0 l 0,5 保持两个;L 5,0 L 5,5 变为 v 5),删除 z 后的无用 Z。convertPathData 插件可以在路径字符串上节省 30-50%。
• 默认属性删除。fill="black"、stroke="none"、stroke-width="1" 是默认值;SVGO 剥离它们。与 mergeStyles 结合,这通常将内联样式化的导出减半。
• 颜色缩短。#ffffff → #fff;rgb(255,255,255) → #fff;命名颜色(aliceblue)→ 如果更短则转 hex。convertColors 插件。
• 未使用 ID 删除。编辑器生成的 ID 如 id="path-7423" 通常从未被引用。SVGO 的 cleanupIds 删除孤立的 ID 并将其余的最小化为 a、b、c……

SVG 优化在哪里重要

• 图标系统。一个包含 30 个 SVG 图标的页面,每个 2 KB 是 60 KB;每个优化为 800 字节可节省 36 KB。Heroicons、Lucide、Phosphor、Feather 全部预优化 SVG;如果你从设计文件中提取它们,你需要自己做这件事。
• 徽标和品牌资产。交付给客户的徽标通常来自 Illustrator 的 50-100 KB;优化后为 5-10 KB。同样的视觉保真度、更低的带宽、更快的页面加载。维基百科徽标 SVG 在单次优化后从 39 KB 降到 11 KB。
• HTML 中的内联 SVG。当你内联 SVG 时(无需额外的 HTTP 请求),SVG 的每个字节都会膨胀阻塞浏览器解析器的 HTML 负载。200 字节的图标 vs 2 KB 对首次绘制时间很重要。
• 数据可视化。D3.js、Observable、ECharts SVG 输出和 React-vis 产生具有数千个元素的大型 SVG。带有 5,000 个点的散点图很容易是 500 KB 原始;优化后可降至 150 KB,保持相同。
• 图标字体生成。IcoMoon、Fontello 和 Fontastic 等工具将 SVG 转换为图标字体。预优化源 SVG 可确保更清洁的字体输出和更小的字体文件。
• 印刷和 PDF 资产。在 PDF 中嵌入 SVG(通过 Puppeteer、wkhtmltopdf 等 Web-to-PDF 工具)意味着 SVG 膨胀最终出现在最终 PDF 中。先优化。
• 邮件安全 SVG。许多邮件客户端(Outlook、一些 Gmail 应用)根本不渲染 SVG;对于那些渲染的(Apple Mail、Gmail web),较小的内联 SVG 使邮件保持在 Gmail 102 KB 剪切阈值之下。

破坏 SVG 的优化错误

• 删除被引用的 ID。SVG 经常使用带有通过 fill 或 stroke 中的 url(#gradient-1) 引用 ID 的 <defs>。激进的 ID 删除会破坏渐变、蒙版、剪辑路径、滤镜。使用跟踪引用的工具,而不是盲目的正则表达式。
• 盲目删除 width/height 属性。丢失自然纵横比。结果:<img src="icon.svg"> 拉伸以填充其容器而没有内在大小,导致 CLS(累积布局偏移)。至少保留 viewBox;最好也保留 width/height。
• 过于激进的小数减少。在小图标上减少到 0 位小数会使路径明显参差不齐。3 位小数是安全的默认值;只在大于 64×64 的图标或不需要像素完美的情况下降至 1。
• 内联时删除 xmlns。独立的 SVG 文件需要 xmlns="http://www.w3.org/2000/svg"。HTML 中的内联 SVG 不需要(HTML5 解析器处理它),但如果你以后可能将 SVG 提取到文件中,保留 xmlns。这里的混淆会破坏 Safari 的 SVG 渲染。
• 用硬编码 fill 替换 currentColor。fill="currentColor" 是一个强大的 CSS 钩子:图标继承文本颜色。激进的优化器用计算出的值替换它,破坏暗模式和主题化图标系统。
• 合并应该保持分离的路径。一些动画针对特定的路径 ID;一些可访问性工具依赖于带有单独 <title> 文本的多个 <path> 元素。mergePaths 插件会破坏这些。为动画或可访问的 SVG 禁用它。
• 剥离可访问的 <title> 和 <desc>。作为独立图像或在 <img> 标签中使用的 SVG 需要 <title> 供屏幕阅读器使用(类似于 alt 文本)。激进的元数据删除会剥离这个。要么保留标题,要么在内联 SVG 元素上添加 aria-label。

更多常见问题

SVG 优化实际能节省多少?

这在很大程度上取决于来源。Adobe Illustrator 导出在首次通过时通常缩小 60-80%,主要来自元数据、编辑器命名空间和小数精度减少。Figma 导出开箱即用就更干净(通常 20-40% 的节省)。开发人员手写的 SVG?通常 5-15%,因为没有太多可剥离的。维基百科徽标,Illustrator 膨胀的极端案例,从 39 KB 降到 11 KB。Figma 中典型的 24×24 图标从 1.4 KB 降到 0.6 KB。

我什么时候应该内联 SVG vs 作为外部文件使用?

内联(HTML 中的 <svg>...</svg>)用于小图标(2 KB 以下)、关键的首屏内容,以及你需要 CSS 来设置 SVG 样式的任何地方(例如 currentColor、悬停状态、暗模式)。外部文件(<img src="icon.svg"> 或 CSS background-image)用于重复使用的相同图标(浏览器缓存)、较大的插图、不需要 CSS 主题化的内容。SVG 雪碧图(单个文件具有多个 <symbol> 元素,由 <use> 引用)是 2014-2019 年的图标系统模式,现在大多被 React/Vue/Svelte 中的内联 svg 组件取代。

未优化的 SVG 中是否存在安全风险?

是的。SVG 可以嵌入 <script> 标签和 onload、onclick 事件处理程序;用户上传的 SVG 是 XSS 向量。SVG 可以通过 <image href="..."> 引用外部资源,泄漏查看者的 IP。SVG 字体(已弃用但仍可解析)历史上有缓冲区溢出。良好的优化器作为清理的一部分剥离 <script> 和事件处理程序;如果你接受用户 SVG 上传,在提供服务之前通过强化的清理器(带有 SVG 配置文件的 DOMPurify)运行它们。

我可以使用命令行优化 SVG 吗?

可以。npx svgo input.svg -o output.svg 使用规范的 SVGO 库。通过 svgo.config.js 配置插件。CI 集成:webpack 中的 imagemin-svgo、vite-plugin-svgo、GitHub Action antfu/svg-opt。批量优化:svgo -f ./icons -o ./icons-optimised。这里的浏览器工具对于一次性操作更快,并且无需安装 Node 即可工作。

我在这里优化时,我的 SVG 是否会发送到服务器?

不。优化完全在你的浏览器中通过 JavaScript 在你粘贴的 SVG 标记上运行。优化时在 DevTools 中打开 Network 标签;你会看到零出站请求。对专有徽标、未发布的图标设计、内部公司 SVG 以及任何受 NDA 约束的内容都安全。

相关工具