SVG 文件体积太大，怎么优化才有效？

佳沫 Dev 提问于 2026-03-16 19:49:19 阅读 62

优化

我用设计工具导出的 SVG 图标有好几 KB，放进项目后感觉加载变慢了。试过在线压缩工具，但有些会破坏样式，比如把 fill="currentColor" 改成固定颜色，导致主题切换失效。

有没有靠谱的自动化方案？比如在构建时自动清理无用属性、保留关键样式？我现在用的是 Vite + Vue3，希望别手动一个个修。

我来解答赞 6 收藏

反馈

1 条解答

Mc.子墨 Lv1

用 Vite 的话，推荐直接上 vite-plugin-svg-icons 这货，配合 svgo 配置一下就能搞定。

先装依赖：

npm install vite-plugin-svg-icons -D

npm install svgo -D

在项目根目录建一个 svgo.config.js，配置要保留的属性：

module.exports = {

  plugins: [

    {

      name: 'preset-default',

      params: { overrides: {

          removeViewBox: false, // 这个必须关掉

          cleanupIds: false,

        },

      },

    },

    // 保留 fill="currentColor" 这种动态样式

    {

      name: 'removeAttrs',

      params: {

        attrs: ['fill', 'stroke'], // 不删除这些属性，让它们保持原样

      },

    },

  ],

}

然后在 vite.config.js 里配置插件：

import { defineConfig } from 'vite'

import vue from '@vitejs/plugin-vue'

import { createSvgIconsPlugin } from 'vite-plugin-svg-icons'

import { resolve } from 'path'



export default defineConfig({

  plugins: [

    vue(),

    createSvgIconsPlugin({

      iconDirs: [resolve(process.cwd(), 'src/assets/icons')],

      symbolId: 'icon-[name]',

      svgoOptions: true, // 自动调用 svgo 优化

    }),

  ],

})

最后在 main.js 引入样式：

import 'virtual:svg-icons-register'

用的时候这样：

或者配合 Vue 组件用更爽：

// src/components/Icon.vue

这样搞完，SVG 会被自动压缩，但 fill="currentColor" 会保留，主题切换完全没问题。构建时自动处理，不用手动一个个改。

2026-03-18 08:12