如何优化 SVG 以提升性能

SVG 优化对于提升网页性能和用户体验非常重要。以下是常见的 SVG 优化技巧：

1. 移除不必要的代码

• 删除编辑器添加的元数据（如 <title>Created with...</title>）
• 移除注释和空行
• 删除未使用的定义和样式
• 使用工具如 SVGO 进行自动优化

2. 简化路径

• 使用更短的路径命令（如用 h 代替 H）
• 合并相邻的相同命令
• 减少小数位数精度（如 50.123456 改为 50.12）
• 使用相对坐标代替绝对坐标

3. 优化属性

• 移除默认值属性（如 fill="black" 可以省略）
• 使用简写属性（如 stroke 代替 stroke-color）
• 合并相同的样式到 class 或 <style> 标签

4. 压缩 SVG 文件

• 使用 gzip 压缩（服务器配置）
• 使用 SVGO 等工具进行优化
• 移除 DOCTYPE 声明（不影响渲染）

5. 使用 SVG Sprite

• 将多个图标合并到一个 SVG 文件中
• 使用 <symbol> 和 <use> 元素复用图形
• 减少 HTTP 请求

示例：

svg
<svg style="display: none;">
  <symbol id="icon-home" viewBox="0 0 24 24">
    <path d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z"/>
  </symbol>
  <symbol id="icon-user" viewBox="0 0 24 24">
    <path d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"/>
  </symbol>
</svg>

<!-- 使用图标 -->
<svg><use href="#icon-home"/></svg>
<svg><use href="#icon-user"/></svg>

6. 内联关键 SVG

• 首屏渲染的关键 SVG 内联到 HTML
• 避免额外的 HTTP 请求
• 非关键 SVG 可以延迟加载

7. 使用 viewBox 代替 width/height

• 使用 viewBox 实现响应式缩放
• 通过 CSS 控制显示尺寸
• 提高灵活性

8. 减少元素数量

• 合并可以合并的路径
• 使用 <g> 分组而不是多个独立元素
• 避免不必要的嵌套

9. 优化动画性能

• 优先使用 CSS 动画（GPU 加速）
• 使用 transform 和 opacity 属性
• 避免动画 width、height、left、top 等属性

10. 工具推荐

• SVGO：强大的 SVG 优化工具
• SVGOMG：在线 SVG 优化工具
• Iconfont：图标字体和 SVG 管理
• Figma/Sketch：导出时优化 SVG

优化示例：

bash
# 使用 SVGO 优化
npx svgo input.svg -o output.svg

# 批量优化
npx svgo -f ./icons -o ./optimized

性能测试：

• 使用 Lighthouse 测试页面性能
• 检查 SVG 文件大小和加载时间
• 监控渲染性能