一个「强迫症」程序员的坦白：我是如何把 SVG 图标体积缩小 30%

本文手把手教你在前端项目中实现 SVG 图标批量清理自动化，通过 Node.js 脚本移除 fill、class、version 等冗余属性，配合多目录支持与递归遍历，实现图标体积普遍缩减 30%，显著提升首屏加载性能

1. 背景与痛点分析

在前端项目中，SVG 图标因其矢量特性被广泛使用。然而从设计工具（如 Sketch、Figma）导出的 SVG 文件往往携带大量冗余属性，导致文件体积臃肿。以一个普通图标为例：

svg 复制代码

<svg version="1.1" class="icon" fill="#000000" width="24" height="24" viewBox="0 0 24 24" p-id="1234" t="1699999999" xmlns="http://www.w3.org/2000/svg">
  <path fill="#ffffff" class="path-1" d="M12 2L2 7v10l10 5 10-5V7L12 2z"/>
</svg>

实际有用的渲染属性可能只有 viewBox 和 path 的 d 属性，其他如 fill、class、version、width、height 等在使用 CSS 或组件封装后完全多余。这些冗余属性会导致：

单个图标增加 200-500 字节
大量图标累积后影响网络传输
解析时产生不必要的 DOM 节点开销

2. 技术方案设计

针对上述痛点，设计一个 Node.js 批量清理脚本，核心目标包括：

精准匹配：通过正则表达式精确移除冗余属性，不破坏有效属性
多目录支持：可配置多个 SVG 目录路径
递归遍历：自动处理嵌套文件夹中的所有 SVG
原地修改：直接覆盖原文件，无需生成新文件
无变化跳过：文件无冗余属性时直接跳过，减少不必要的 IO 操作

技术选型上仅使用 Node.js 内置模块 fs/promises 和 path，零外部依赖，可直接在任何项目中运行。

3. 核心实现详解

3.1 冗余属性定义与正则构造

定义要移除的属性数组，构造支持批量匹配的正则表达式：

typescript 复制代码

const REMOVE_ATTRS = ['fill', 'class', 'version', 't', 'p-id', 'width', 'height']

const REMOVE_REGEX = new RegExp(`\\s+(${REMOVE_ATTRS.join('|')})=(["'])[^"']*?\\2`, 'gi')

正则设计解析：\s+ 匹配属性前的空格，(${REMOVE_ATTRS.join('|')}) 匹配任意要移除的属性名，=(["'])[^"']*?\2 精准匹配属性值，支持单引号或双引号包裹。

3.2 单文件清理逻辑

typescript 复制代码

async function cleanSvgFile(filePath: string) {
  try {
    const originalContent = await readFile(filePath, 'utf8')
    let content = originalContent

    content = content.replace(REMOVE_REGEX, '')
    content = content.replace(/\s+/g, ' ').replace(/ >/g, '>').trim()

    if (content === originalContent) return

    await writeFile(filePath, content, 'utf8')
    console.log(`✅ 已清理：${filePath}`)
  } catch (error: unknown) {
    const errorMsg = error instanceof Error ? error.message : '未知错误'
    console.error(`❌ 处理失败：${filePath}`, errorMsg)
  }
}

核心流程：首先读取文件内容，移除冗余属性后进行空白清理，文件无变化时直接跳过避免无效写入，最后捕获异常确保单个文件错误不影响整体执行。

3.3 目录递归遍历

typescript 复制代码

async function processDirectory(dir: string) {
  try {
    console.log(`📂 处理目录：${dir}`)
    const entries = await readdir(dir, { withFileTypes: true })

    for (const entry of entries) {
      const fullPath = resolve(dir, entry.name)

      if (entry.isDirectory()) {
        await processDirectory(fullPath)
      } else if (entry.isFile() && entry.name.endsWith('.svg')) {
        await cleanSvgFile(fullPath)
      }
    }
  } catch (error: unknown) {
    const errorMsg = error instanceof Error ? error.message : '未知错误'
    console.error(`❌ 目录处理失败：${dir}`, errorMsg)
  }
}

通过 withFileTypes: true 获取目录条目信息，区分文件与文件夹，递归处理子目录，仅处理 .svg 结尾的文件。

3.4 多目录启动配置

typescript 复制代码

const ICON_DIRS = [resolve(process.cwd(), 'apps/admin/src/assets/icons')]

async function bootstrap() {
  console.log('🚀 开始批量清理 SVG 属性（多目录模式）...\n')

  for (const dir of ICON_DIRS) {
    await processDirectory(dir)
  }

  console.log('\n🎉 所有目录的 SVG 清理完成！')
}

bootstrap()

ICON_DIRS 数组支持配置多个 SVG 目录路径，可根据项目结构调整，process.cwd() 确保路径相对于项目根目录。

4. 使用方法与效果验证

4.1 快速上手

将脚本保存为 clean-svg.ts，在 package.json 中添加执行脚本：

json 复制代码

{
  "scripts": {
    "clean:svg": "tsx clean-svg.ts"
  }
}

执行命令：

bash 复制代码

npm run clean:svg

4.2 清理效果对比

以一个含冗余属性的 SVG 为例，清理前 486 字节，清理后 312 字节，体积减少约 35.8%。常见图标库实测体积缩减普遍在 25%-40% 之间。

bash 复制代码

📂 处理目录：/path/to/icons
✅ 已清理：/path/to/icons/home.svg
✅ 已清理：/path/to/icons/user.svg
✅ 已清理：/path/to/icons/settings.svg

🎉 所有目录的 SVG 清理完成！

4.3 注意事项

脚本会直接修改原始 SVG 文件，执行前建议备份或使用 Git 管理
部分 SVG 的 fill 属性可能具有语义意义（如纯色图标），清理前请确认图标使用场景
若项目使用 iconfont 字体图标方式，清理后需确保 CSS 样式覆盖正常

5. 进阶拓展方向

5.1 接入构建流程

可将脚本集成到项目构建的 prebuild 或 prepare 阶段，实现 SVG 图标的自动清理，无需手动执行。

5.2 自定义属性配置

根据项目实际需求，灵活调整 REMOVE_ATTRS 数组，如添加 style、data-* 等需移除的自定义属性。

5.3 清理报告生成

扩展脚本输出 JSON 格式的清理报告，包含处理文件数、节省字节数、失败文件列表等信息，便于集成到 CI/CD 流程。

核心总结

本文通过 Node.js 脚本实现了 SVG 图标冗余属性的批量清理，核心技术点包括正则精准匹配、多目录递归遍历、原地批量修改与异常容错处理。使用该脚本可将 SVG 图标体积普遍缩减 30%，配合构建流程集成可实现自动化清理，适合前端项目图标管理场景。

评论互动

你的项目中 SVG 图标是如何管理的？有哪些优化经验或踩坑经历？欢迎在评论区分享交流