本文目录
什么是 SVG 优化？
SVG（可缩放矢量图形）是一种基于 XML、用于描述二维矢量图形的格式。虽然 SVG 与分辨率无关、可以完美缩放到任意尺寸，但从 Figma、Illustrator 或 Inkscape 等设计工具导出的文件往往包含不必要的元数据、注释、隐藏元素和冗长的标记，这些内容在不影响视觉效果的前提下显著增大了文件体积。
SVG 优化是通过移除冗余数据、简化 SVG 标记来减小文件体积、同时保持视觉保真度的过程。一个经过良好优化的 SVG 可以比未优化版本小 30% 到 80%，从而加快页面加载、降低带宽消耗，并改善核心 Web 指标（Core Web Vitals）的得分。
SVG 优化如何工作
SVGO 等现代 SVG 优化工具会分析 SVG 文档结构，并应用一系列变换来减小文件体积，同时不改变渲染出的效果。
- 移除元数据——剥离编辑器元数据、XML 注释、隐藏元素、空分组以及未使用的定义，这些内容由设计工具嵌入，但浏览器会忽略
- 路径优化——通过降低小数精度、将绝对坐标转换为相对坐标，并在可能的情况下合并相邻的路径段，来简化路径数据
- 属性清理——移除默认属性值，缩短颜色值（例如将 #ffffff 缩短为 #fff），合并冗余的变换，并内联小型样式块
免费试用 —— 无需注册
优化你的 SVG →何时优化 SVG
凡是在网页上使用矢量图形的地方，SVG 优化都很有价值，尤其是在性能和加载速度至关重要时。
- 网页性能——优化后的 SVG 加载更快、减小了页面总体积，直接改善最大内容绘制（LCP）和整体核心 Web 指标
- 图标系统——包含数十甚至数百个 SVG 的图标库能从优化中获益匪浅，因为众多小文件累积的节省会迅速累加
- 动画准备——干净、精简的 SVG 标记更易于用 CSS 或 JavaScript 制作动画，并能以更低的 DOM 复杂度产生更流畅的动画效果
常见问题解答
SVG 优化是有损的还是无损的？
大多数 SVG 优化实际上是无损的——视觉输出保持完全一致。降低路径数据小数精度等某些操作在亚像素层面上技术上属于有损，但这种差异人眼无法察觉。你可以控制精度级别，在减小文件体积与保持数学精度之间取得平衡。
什么情况下不应该优化 SVG？
如果 SVG 使用了优化工具可能会错误改动的特性，例如复杂的滤镜、依赖特定元素 ID 的动画，或被外部 CSS 或 JavaScript 引用的 SVG，就应避免优化。在投入生产前，请务必对优化后的输出进行视觉比对。如果配置不当，某些 SVGO 插件还可能破坏无障碍属性。
SVG 与 PNG 相比性能如何？
对于图标、徽标和插画等简单图形，SVG 通常比 PNG 更小，在高分辨率下尤为明显。单个 SVG 就能取代针对不同屏幕密度所需的多种 PNG 尺寸。然而，对于复杂的照片图像或拥有数千条路径的高精细度插画，WebP 或 AVIF 等栅格格式可能更高效。经验法则是：几何形状和图标用 SVG，照片用栅格格式。