5月27日 15:43

SVG 性能优化有哪些常用方法？

为什么需要优化 SVG

SVG 是前端开发中常用的矢量图形格式，但未经优化的 SVG 文件往往包含大量冗余代码，文件体积是实际所需的 2-5 倍。在实际项目中，一个从设计工具导出的图标 SVG 可能有 3KB，经过优化后不到 500 字节，压缩率可达 60%-80%。

SVG 文件过大会拖慢页面加载速度，直接影响 LCP（最大内容绘制）指标；渲染复杂度过高则会影响 INP（交互延迟）和 CLS（布局偏移）等 Core Web Vitals 指标。

一、精简 SVG 代码

移除编辑器元数据

设计工具导出的 SVG 通常携带大量无用信息：

<title>Created with Figma</title> 这类声明
<desc> 描述标签
编辑器自定义属性（data-name、sketch:type 等）
XML 注释和空行
Inkscape / Illustrator 特有的命名空间声明

这些内容对渲染毫无帮助，却占用了大量字节。手动清理费时费力，推荐使用 SVGO 自动处理。

移除默认值属性

SVG 有许多属性的默认值是可以省略的：

fill="black" — fill 默认就是 black
stroke-width="1" — 默认值即为 1
stroke-linecap="butt" — 默认对齐方式
font-style="normal" — 默认正常样式
display="inline" — 默认显示方式

省略这些属性不仅能减小文件体积，还能让代码更简洁。

简化路径数据

路径（<path>）通常是 SVG 中体积最大的部分，优化路径数据的效果最明显：

使用相对坐标：相对命令（h、v、l、c）比绝对命令（H、V、L、C）更短，因为只需要记录偏移量
降低小数精度：50.123456 缩短为 50.12，在视觉上几乎无差异，但大幅减少字符数
合并相邻同类命令：两个连续的 l 命令可以合并参数
使用简写命令：水平线用 h 代替 l，垂直线用 v 代替 l

text
<!-- 优化前：绝对坐标 + 高精度 -->
<path d="M10.000000 20.000000 L30.000000 40.000000 L50.000000 20.000000 Z"/>

<!-- 优化后：相对坐标 + 低精度 -->
<path d="M10 20l20 20 20-20z"/>

二、压缩与传输优化

SVGO 工具

SVGO 是目前最主流的 SVG 优化工具，基于 Node.js，支持插件化配置，能自动完成上述所有代码层面的优化：

bash
# 单文件优化
npx svgo input.svg -o output.svg

# 批量优化整个目录
npx svgo -f ./icons -o ./optimized

# 指定精度为 2 位小数
npx svgo input.svg -o output.svg --precision 2

SVGO 默认插件包括移除元数据、移除注释、合并路径、转换样式等，大多数场景直接使用默认配置即可获得 50%-70% 的体积缩减。

SVGOMG 在线工具

如果不想安装命令行工具，SVGOMG 是 SVGO 的 Web 界面版本，可以在浏览器中实时预览优化效果，逐项开关插件并查看体积变化，适合偶尔使用或快速验证。

服务器压缩

SVG 是纯文本的 XML 格式，gzip 和 Brotli 压缩效果极好：

gzip 压缩通常可再减小 60%-70%
Brotli 比 gzip 再额外节省 10%-15%
配置 Nginx 开启 Brotli 后，一个 12KB 的 SVG 传输时可能只有 2-3KB

nginx
# Nginx 开启 gzip 压缩 SVG
gzip on;
gzip_types image/svg+xml;

# Brotli（需安装模块）
brotli on;
brotli_types image/svg+xml;

三、SVG Sprite 与复用

当页面中有多个 SVG 图标时，逐个加载会产生大量 HTTP 请求。SVG Sprite 是解决这个问题的标准方案。

symbol + use 模式

将所有图标定义在 <symbol> 元素中，通过 <use> 引用，只需一次 HTTP 请求：

html
<!-- 定义 Sprite -->
<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>

这种模式下，所有图标共享一个 SVG 文件，浏览器只需请求一次，后续通过 <use> 引用时直接从缓存读取。

defs 复用元素

对于页面中重复出现的图形元素（渐变、形状等），用 <defs> 定义一次，多次引用：

html
<svg>
  <defs>
    <linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%">
      <stop offset="0%" style="stop-color:#f00"/>
      <stop offset="100%" style="stop-color:#00f"/>
    </linearGradient>
  </defs>
  <rect fill="url(#grad1)" width="100" height="50"/>
  <circle fill="url(#grad1)" cx="150" cy="25" r="25"/>
</svg>

四、渲染性能优化

内联关键 SVG

首屏需要立即显示的 SVG（如 Logo、关键图标）建议直接内联到 HTML 中，省去 HTTP 请求，加快首次渲染。非首屏的 SVG 则应使用外部文件引用，以便浏览器缓存。

使用 viewBox 实现响应式

为 SVG 设置 viewBox 而非固定的 width/height，通过 CSS 控制显示尺寸，实现响应式适配：

html
<svg viewBox="0 0 24 24" width="24" height="24">
  <path d="..."/>
</svg>

设置 viewBox 后，SVG 会在任何尺寸下保持清晰，同时浏览器能提前计算布局空间，避免 CLS（累积布局偏移）。

减少元素与嵌套层级

合并能合并的路径，减少 DOM 节点数
用 <g> 分组替代多个独立元素
去掉不必要的嵌套 <g> 包裹
对于纯展示的元素，设置 pointer-events="none" 跳过事件检测

DOM 节点越少，浏览器解析和渲染越快，这在大量 SVG 图标的页面上差异尤为明显。

优化 SVG 动画

动画性能的关键是选择正确的属性：

优先使用 transform 和 opacity：这两个属性可以被 GPU 加速，不会触发重排
避免动画 width、height、left、top、x、y：这些属性会触发布局重计算，性能开销大
CSS 动画通常比 SMIL 动画性能更好，且兼容性更可控

css
/* 推荐：GPU 加速 */
.icon:hover {
  transform: scale(1.2);
  opacity: 0.8;
}

/* 避免：触发重排 */
.icon:hover {
  width: 30px;
  height: 30px;
}

降低渲染复杂度

减少滤镜（filter）的使用，尤其是 blur 和 drop-shadow，它们消耗大量 GPU 资源
限制渐变数量，合并重复的渐变定义
使用 shape-rendering="optimizeSpeed" 替代抗锯齿渲染，在图标等小尺寸场景下差异不大但性能更好
用 fill-opacity/stroke-opacity 替代整体 opacity，前者不会创建合成层

五、构建工具集成

在实际项目中，SVG 优化应该集成到构建流程中，而不是手动处理。

Webpack 配置

bash
npm install svgo svgo-loader --save-dev

js
// webpack.config.js
module.exports = {
  module: {
    rules: [
      {
        test: /\.svg$/,
        use: ['@svgr/webpack', 'svgo-loader']
      }
    ]
  }
}

Vite 配置

bash
npm install vite-plugin-svgr --save-dev

js
// vite.config.js
import svgr from 'vite-plugin-svgr';

export default {
  plugins: [svgr()]
}

构建工具集成后，每次构建都会自动优化 SVG，无需手动干预。

性能验证

优化完成后，需要实际验证效果：

Lighthouse：检测页面整体性能，关注 LCP 和 FCP 指标
Chrome DevTools Coverage：查看 SVG 文件的实际使用率，找出未使用的代码
Network 面板：对比优化前后的传输大小（注意查看压缩后体积）
Performance 面板：录制 SVG 渲染过程，检查是否有长任务

优化一个 SVG 图标从 3KB 降到 500B 看似微小，但当页面有 20-30 个图标时，总体节省可达 50-70KB，对首屏加载速度的影响不可忽视。

标签：SVG