SVG 优化完全指南：从 100KB 缩减到 10KB 的精简技巧

实用工具

SVG 优化的必要性

未优化的 SVG 包含大量冗余信息——编辑器元数据、默认属性、多余精度、空白字符。

来源 典型体积 优化后 缩减率
Figma 导出 45KB 5KB 89%
Illustrator 导出 80KB 8KB 90%
Inkscape 导出 120KB 12KB 90%
手写 SVG 15KB 3KB 80%

一、冗余信息清理

编辑器元数据

<!-- Illustrator 生成的冗余信息 -->
<svg xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink"
     xmlns:serif="http://www.serif.com/"
     id="Artboard1"
     serif:id="Artboard 1"
     viewBox="0 0 800 600">
  <!-- serif:id, xmlns:serif 等都是无用的 -->
</svg>

<!-- 优化后 -->
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 600">
</svg>

默认属性

<!-- 默认值无需显式声明 -->
<rect x="0" y="0" width="100" height="100" fill="black" stroke="none" opacity="1"/>

<!-- 优化后 -->
<rect width="100" height="100"/>
属性 默认值 可移除条件
fill black 继承自父元素
stroke none 无描边
opacity 1 完全不透明
x / y 0 位于原点
stroke-width 1 默认宽度
font-size 继承 与父元素相同

二、路径优化

精度缩减

<!-- 6 位小数精度过高 -->
<path d="M12.345678 23.456789 L34.567890 45.678901"/>

<!-- 2 位精度通常足够（SVG 坐标系单位） -->
<path d="M12.35 23.46L34.57 45.68"/>
精度 体积 视觉差异
6 位 100% 无
3 位 60% 无（1000px 视口内不可见）
2 位 50% 极微
1 位 40% 小图标可接受

命令合并

<!-- 多个 L 命令可合并 -->
<path d="M10 20 L30 40 L50 60 L70 80"/>

<!-- 合并后（隐式 L） -->
<path d="M10 20 30 40 50 60 70 80"/>

曲线简化

<!-- 复杂贝塞尔曲线 -->
<path d="M0 0C0.12 0.34 0.45 0.67 1 1C1.34 1.23 1.56 1.78 2 2"/>

<!-- 如果曲率接近直线，可简化为 L -->
<path d="M0 0L1 1 2 2"/>

三、形状合并

相同样式元素合并

<!-- 三个相同样式的圆 -->
<circle cx="10" cy="10" r="5" fill="red"/>
<circle cx="30" cy="10" r="5" fill="red"/>
<circle cx="50" cy="10" r="5" fill="red"/>

<!-- 合并为一个 path -->
<path d="M5 10a5 5 0 1 0 10 0a5 5 0 1 0-10 0M25 10a5 5 0 1 0 10 0a5 5 0 1 0-10 0M45 10a5 5 0 1 0 10 0a5 5 0 1 0-10 0" fill="red"/>

<use> 复用

<!-- 重复元素用 <use> 引用 -->
<defs>
  <circle id="dot" r="5" fill="red"/>
</defs>
<use href="#dot" x="10" y="10"/>
<use href="#dot" x="30" y="10"/>
<use href="#dot" x="50" y="10"/>

四、使用 SVGO 自动优化

安装

npm install -g svgo

命令行使用

# 单文件优化
svgo input.svg

# 指定输出
svgo input.svg -o output.svg

# 批量优化
svgo -f ./icons/

# 查看优化效果
svgo input.svg --show-results

配置文件

// svgo.config.js
module.exports = {
  multipass: true,  // 多轮优化
  plugins: [
    'removeDoctype',
    'removeXMLProcInst',
    'removeComments',
    'removeMetadata',
    'removeEditorsNSData',
    'cleanupAttrs',
    'mergePaths',
    'convertShapeToPath',
    'convertTransform',
    'removeUnusedNS',
    'minifyStyles',
    'removeEmptyAttrs',
    'removeEmptyContainers',
    'removeHiddenElems',
    'cleanupNumericValues',
    {
      name: 'cleanupNumericValues',
      params: { floatPrecision: 2 },
    },
    {
      name: 'convertPathData',
      params: {
        floatPrecision: 2,
        transformPrecision: 2,
        makeArcs: true,
      },
    },
    'removeDimensions',  // 移除 width/height，用 viewBox
    'removeViewBox',     // 或保留 viewBox，移除 dimensions
  ],
};

Node.js API

const { optimize } = require('svgo');

const result = optimize(svgString, {
  path: 'icon.svg',
  multipass: true,
  plugins: [
    { name: 'cleanupNumericValues', params: { floatPrecision: 2 } },
  ],
});

console.log(result.data); // 优化后的 SVG

五、使用工具库优化 SVG

操作步骤

  1. 打开 SVG 格式化工具
  2. 粘贴或上传 SVG 代码
  3. 点击"优化"按钮
  4. 查看优化前后对比：
    • 原始体积 → 优化体积
    • 缩减百分比
  5. 复制优化结果或下载

六、SVG Sprite 优化

内联 Sprite

<!-- 隐藏的 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-search" viewBox="0 0 24 24">
    <path d="M15.5 14h-.79l-.28-.27A6.47 6.47 0 0016 9.5 6.5 6.5 0 109.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5z"/>
  </symbol>
</svg>

<!-- 使用 -->
<svg><use href="#icon-home"/></svg>
<svg><use href="#icon-search"/></svg>

自动生成 Sprite

// 使用 svg-sprite 自动生成
const SVGSprite = require('svg-sprite');

const config = {
  mode: {
    symbol: true,  // 生成 <symbol> 模式
  },
  svg: {
    xmlDeclaration: false,
    doctypeDeclaration: false,
  },
};

const spriter = new SVGSprite(config);
// 添加 SVG 文件并编译

七、性能优化清单

优化项 效果 优先级
移除编辑器元数据 -20~40% P0
缩减数值精度 -10~30% P0
合并路径命令 -5~15% P1
移除默认属性 -5~10% P1
转换形状为路径 -5~10% P2
移除空白/注释 -2~5% P2
Gzip/Brotli 压缩 -50~70% P0

注意：SVG 是文本格式，Gzip/Brotli 压缩效果极佳，务必在服务端启用。

#SVG#图片优化#图标#压缩#前端