SVG优化实战：减小体积提升加载性能的前端技巧

SVG 图标加载慢？我差点被设计师骂死

上周改一个老项目，首页一堆 SVG 图标，用户反馈“打开像卡住了一样”。我一开始没当回事，心想不就是几个小图标嘛。结果自己测了下——好家伙，首屏加载居然多了 1.2 秒！网络面板里一串 SVG 请求，每个都几十毫秒，加起来直接拖垮 LCP（最大内容绘制）。设计师路过看到还幽幽来一句：“你们前端是不是又没优化？”

其实问题挺典型：我们之前图省事，直接把 SVG 当图片用，写成 <img src="icon.svg">，或者用 CSS background-image 引入。好处是简单，坏处是——每个 SVG 都是一次 HTTP 请求，而且没法压缩、没法缓存复用，浏览器还得解析 XML 结构。尤其在弱网下，体验直接崩。

折腾了半天，试了三种方案

第一反应是转 base64 内联到 CSS 里。但马上意识到不对：SVG 本身是文本，base64 编码后反而比原始体积大 30% 左右（因为 base64 用 4 字节表示 3 字节数据），而且 CSS 文件会膨胀，影响关键渲染路径。放弃。

接着想用雪碧图（Sprite）。把所有 SVG 合并成一个大 SVG，通过 <use> 引用。这思路理论上可行，但实操麻烦：得手动维护 symbol ID，开发时改一个图标要重新生成整个 sprite，构建流程也得改。而且如果某个图标只在某个页面用，其他页面也得加载整张 sprite，浪费带宽。算了，太重。

最后回到最朴素的方案：直接把 SVG 内联到 HTML 里。但怎么内联？总不能手写几百个 <svg>...</svg> 吧？这里我踩了个坑：一开始用 Webpack 的 raw-loader 把 SVG 当字符串导入，然后用 React dangerouslySetInnerHTML 渲染。结果发现——有些 SVG 里有 <script> 标签（虽然我们项目里没有，但安全起见不能这么干），而且 React 会报 warning，说“你确定要注入 HTML 吗？”

后来试了下发现，其实更简单的办法是：用构建工具（比如 Vite）在编译时把 SVG 转成 React 组件。这样既安全，又能 tree-shaking，没用的图标根本不会打包进去。

核心代码就这几行（Vite + React）

我用的是 Vite，配个插件就行。先装 vite-plugin-svgr：

npm install -D vite-plugin-svgr

然后在 vite.config.js 里加配置：

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import svgr from 'vite-plugin-svgr'

export default define切换({
  plugins: [
    react(),
    svgr({
      // 这里可以加一些 SVGO 优化选项
      svgrOptions: {
        icon: true,
        dimensions: false
      }
    })
  ]
})

搞定之后，SVG 文件就能直接当 React 组件 import 了：

import { ReactComponent as Logo } from './logo.svg'

function App() {
  return (
    <div>
      <Logo width="100" height="100" />
    </div>
  )
}

注意那个 dimensions: false ——这是关键！默认 SVGR 会保留 SVG 的 width/height 属性，但实际使用中我们通常希望用 CSS 控制尺寸。设成 false 后，生成的组件就不会硬编码宽高，而是靠父容器或 CSS 控制，更灵活。

别忘了 SVGO，它能再砍掉 30% 体积

光转成组件还不够。很多设计师给的 SVG 里塞了一堆无用信息：编辑器元数据、注释、冗余的 path 点、甚至隐藏图层。这些对渲染毫无帮助，纯属体积垃圾。

这时候就得上 SVGO 了。它是个专门优化 SVG 的工具，能自动删掉这些脏东西。上面 Vite 插件里其实已经集成了 SVGO，但默认配置比较保守。我建议手动调一下，比如：

svgr({
  svgrOptions: {
    icon: true,
    dimensions: false
  },
  // 启用更激进的 SVGO 优化
  svgo: true,
  svgoConfig: {
    plugins: [
      { name: 'removeViewBox', active: false }, // 别删 viewBox，否则缩放会出问题
      { name: 'removeDimensions', active: true },
      { name: 'cleanupIDs', active: true },
      { name: 'convertPathData', active: true },
      { name: 'mergePaths', active: true }
    ]
  }
})

举个真实例子：一个设计师给的“购物车”图标，原始 4.2KB，经过 SVGO 优化后只剩 2.8KB，少了 1/3。而且肉眼完全看不出区别——因为删的都是 invisible 的 stuff。

这里注意我踩过好几次坑：removeViewBox 一定要关掉！ViewBox 是 SVG 响应式缩放的核心，删了之后图标在不同容器里会变形。还有 cleanupIDs 要小心，如果 SVG 里用了渐变或 mask，ID 被清理可能导致样式丢失。不过我们项目里基本都是纯色图标，所以开起来没问题。

改完后还有个小问题，但无大碍

上线后测了下，首屏加载快了 800ms，LCP 直接达标。但 QA 同学提了个 issue：某些 SVG 在 Safari 里偶尔显示错位。查了半天，发现是部分 SVG 里用了 transform 属性，而 Safari 对内联 SVG 的 transform 解析有点抽风。

解决办法很简单：让设计师导出 SVG 时勾选“转换为路径”（Expand Appearance），把所有 transform、group 都拍平成单一 path。虽然文件可能稍微大一点，但兼容性稳了。反正 SVGO 之后体积也不大，这点 trade-off 可以接受。

另外，内联 SVG 虽然快，但没法利用 HTTP 缓存。不过考虑到图标一般不会频繁变更，而且现代打包工具会做 long-term caching（文件名带 hash），其实影响不大。真要极致优化，可以把常用图标做成 sprite，但对我们这种中小型项目，直接内联 + SVGO 已经够用。

总结一下我的土办法

• 别用 <img src=".svg">，HTTP 请求是性能杀手
• 用构建工具（Vite/Webpack）把 SVG 转成 React/Vue 组件，安全又可 tree-shaking
• 必须配 SVGO，删掉设计师留下的“数字垃圾”
• 记得关掉 removeViewBox，不然响应式就废了
• 让设计师导出时“拍平”图形，避免浏览器兼容性问题

以上是我踩坑后的总结，如果你有更好的方案欢迎评论区交流。比如有没有人用 Web Components 封装 SVG 的？或者用 CSS variables 动态换色的技巧？我最近也在研究，后续会继续分享这类博客。