SVG Optimizer (SVGO)

SVG 优化器可对 SVG 文件进行压缩和优化：移除冗余属性、合并路径、清理空白字符、简化数值精度、移除注释和元数据、以及优化变换矩阵等。该工具基于 SVGO（SVG Optimizer）算法，在不影响视觉呈现的前提下大幅减小 SVG 文件的大小，是前端性能优化的重要一环。

SVG 优化是 Web 性能优化的标准步骤：前端构建流程（Webpack/Vite）中自动优化 SVG 图标和插图、设计师从设计工具导出 SVG 后清理冗余代码、图标库开发者缩小发布包的体积、以及移动端开发者减小应用内 SVG 资源的大小。SVG 通常可减小 30-80% 的体积，且保持完全相同的外观。

优化后的 SVG 可使用 SVG 转 PNG 生成位图版本。SVG 预览器 可验证优化后的 SVG 是否正确渲染。图片转 Base64 可将 SVG 嵌入内联样式。SVG 占位图生成器 可创建轻量加载占位符。

SVG 优化涉及多种策略：1) 删除无用元素（空组、不可见元素、重复 ID）；2) 数值精度缩减（将 path 坐标从 6 位小数减少到 2-3 位，减少字符串长度）；3) 路径合并（将多个 path 合并为一个复合 path）；4) 属性简化（将样式属性转为更简洁的形式）；5) 清理命名空间和元数据。SVGO 使用插件架构，每个优化步骤是一个独立插件，用户可以配置启用/禁用以控制优化策略。

• 精度过度缩减：将坐标精度从 3 位减到 1 位可能导致精度丢失，产生视觉瑕疵。建议保持至少 2-3 位小数精度。
• ID 冲突：如果页面中内联使用多个 SVG，移除或缩短 ID 可能导致 CSS 引用或 use 元素引用失效。
• viewBox 移除：过于激进的优化可能移除 viewBox 属性，导致 SVG 在不同容器中无法正确缩放。
• 动画兼容性：某些优化（如合并路径）可能破坏 SVG 动画（SMIL），因为它们依赖特定的元素结构。

在手动优化个别 SVG 文件、测试优化效果或为项目设置优化参数时使用此工具。前端开发者可在项目中用它确定最佳优化配置。对于需要集成到构建管道的场景，推荐使用 SVGO 的 CLI/API（通过 vite-plugin-svg-icons 或 webpack 的 svgo-loader），它们提供自动化、可配置和批量处理能力。