svgfmt

项目简介

svgfmt 是一个专门用于优化 SVG 图标的开源工具库，采用 monorepo 架构，包含两个核心包：

• @svgfmt/cli：命令行工具，提供便捷的文件处理能力，支持单文件和批量处理
• @svgfmt/core：核心库，可以轻松集成到自定义脚本和构建流程中

该工具通过自动化处理，让从设计工具导出的 SVG 图标变得更加轻量、易维护，并支持通过 CSS 灵活控制样式。

核心特性

• 自动颜色优化：智能检测并移除固定颜色值，让图标支持通过 CSS 的 color 属性动态控制
• 路径智能合并：使用基于 Potrace 算法的图像追踪技术，将多个路径元素合并为单一路径
• 冗余代码清理：自动移除不必要的容器元素（<defs>、<g>、<clipPath> 等）、属性和元数据
• 双模式使用：提供 CLI 工具和编程 API，满足命令行快速处理和构建流程集成两种场景
• 高度可定制：支持自定义转换函数（同步/异步），灵活扩展处理逻辑

解决的问题

在日常开发中，从 Figma 等设计工具导出的 SVG 文件往往存在以下问题：

1. 代码冗余 - 包含大量不必要的容器元素和属性
2. 颜色固定 - 颜色值被硬编码为 fill="#333333" 等，无法通过 CSS 的 color 属性动态控制
3. 文件体积大 - 包含不必要的元数据和属性，影响加载性能
4. 可读性差 - 多个未合并的路径元素，维护困难

svgfmt 通过自动化处理解决这些问题，让开发者可以直接使用设计稿导出的 SVG，无需手动清理。

技术实现

• 核心库：TypeScript
• 图像处理：Potrace 算法实现路径追踪和合并
• SVG 优化：SVGO 专业优化引擎
• 代码美化：Prettier 格式化
• 构建工具：Rslib + Turborepo
• 包管理：pnpm workspace

使用指南

CLI 工具（@svgfmt/cli）

安装：

npm install -g @svgfmt/cli

基础用法：

# 格式化单个文件（原地修改）
svgfmt icon.svg

# 批量处理并输出到指定目录
svgfmt "icons/**/*.svg" -o dist/icons

# 自定义转换
svgfmt icons/*.svg --transform ./transform.js

核心库（@svgfmt/core）

安装：

npm install @svgfmt/core

使用示例：

import { format } from '@svgfmt/core';

// 基础用法
const optimized = await format(svgContent);

// 高级配置
const custom = await format(svgContent, {
  traceResolution: 800, // 提高路径追踪精度
  transform: (svg) => svg.replace(/<svg/, '<svg class="icon"'),
});

优化效果

让我们看一个实际的优化案例：

优化前

<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
  <g opacity="0.6" clip-path="url(#clip0_144244_67656)">
    <circle cx="6" cy="6" r="5" stroke="#333" style="stroke:#333;stroke-opacity:1;" />
    <path d="M6 3.5V6L7.25 7.25" stroke="#333" style="stroke:#333;stroke-opacity:1;" />
  </g>
  <defs>
    <clipPath id="clip0_144244_67656">
      <rect width="12" height="12" fill="#333" style="fill:#333;fill-opacity:1;" />
    </clipPath>
  </defs>
</svg>

优化后

<svg viewBox="0 0 12 12" xmlns="http://www.w3.org/2000/svg">
  <path
    d="M5.660 0.521 C 4.899 0.566,4.190 0.760,3.500 1.111 C 2.479 1.630,1.630 2.479,1.111 3.500 C 0.702 4.303,0.516 5.086,0.516 6.000 C 0.516 6.748,0.635 7.374,0.904 8.050 C 1.386 9.261,2.332 10.295,3.500 10.889 C 4.085 11.187,4.680 11.369,5.332 11.451 C 5.675 11.494,6.325 11.494,6.668 11.451 C 8.173 11.262,9.516 10.479,10.410 9.270 C 10.792 8.753,11.059 8.227,11.248 7.620 C 11.517 6.754,11.562 5.741,11.369 4.842 C 11.027 3.241,9.959 1.853,8.500 1.111 C 7.617 0.662,6.653 0.461,5.660 0.521 M6.720 1.549 C 7.447 1.673,8.126 1.965,8.720 2.408 C 8.964 2.590,9.410 3.036,9.592 3.280 C 10.040 3.880,10.330 4.559,10.454 5.298 C 10.505 5.599,10.505 6.401,10.454 6.702 C 10.330 7.441,10.040 8.120,9.592 8.720 C 9.410 8.964,8.964 9.410,8.720 9.592 C 8.120 10.040,7.441 10.330,6.702 10.454 C 6.401 10.505,5.599 10.505,5.298 10.454 C 4.559 10.330,3.880 10.040,3.280 9.592 C 3.035 9.410,2.589 8.963,2.408 8.720 C 1.955 8.111,1.671 7.445,1.546 6.702 C 1.495 6.401,1.495 5.599,1.546 5.298 C 1.671 4.556,1.955 3.891,2.408 3.280 C 2.588 3.036,3.036 2.588,3.280 2.408 C 3.968 1.898,4.680 1.618,5.560 1.512 C 5.729 1.492,6.537 1.517,6.720 1.549 M5.500 4.845 L 5.500 6.190 6.200 6.890 L 6.900 7.590 7.245 7.245 L 7.590 6.900 7.045 6.355 L 6.500 5.810 6.500 4.655 L 6.500 3.500 6.000 3.500 L 5.500 3.500 5.500 4.845"
    fill-rule="evenodd"
  />
</svg>

主要改进包括：

• 移除冗余标签：去除了 <defs>、<g>、<clipPath> 等容器元素
• 颜色属性移除：删除固定的 fill 和 stroke 属性，图标将继承父元素的 color，可通过 CSS 灵活控制
• 路径合并：多个图形元素被智能合并为单一路径，代码更简洁

应用场景

• 图标系统构建：统一处理设计稿导出的图标文件，建立一致的图标库
• 构建流程集成：在 build 阶段自动优化 SVG 资源，提升加载性能
• 批量文件处理：快速处理大量历史图标文件，统一优化标准
• 组件库开发：为 React/Vue 组件库准备优化的 SVG 素材，支持主题切换

项目价值

1. 提升开发效率：自动化处理替代手动清理，节省大量时间
2. 增强可维护性：统一的处理标准，代码更简洁易读
3. 灵活样式控制：移除固定颜色后，可通过 CSS 灵活控制图标样式，支持主题切换

注意事项

仅支持单色图标：该工具专为单色图标设计。多色 SVG 在路径追踪过程中会被转换为单色，因为工具会将 SVG 转换为 PNG 再转回 SVG，这个过程会丢失颜色信息。

快速开始

# 克隆项目
git clone https://github.com/moecasts/svgfmt.git
cd svgfmt

# 安装依赖
pnpm install

# 构建
pnpm build

# 测试
pnpm test

开源贡献

项目采用 MIT 许可证，完全开源。欢迎提交 Issue 或 Pull Request 参与改进。访问 GitHub 仓库 了解更多详情和完整文档。

鸣谢

• oslllo/svg-fixer