使用 REST API 优化 CI 管道中的 SVG（无需安装 SVGO）

从 Figma 导出的图标 SVG 比实际需要的大 3-5 倍。 设计工具嵌入 元数据，空 <defs> 块、特定于编辑器的属性，以及 浏览器从不使用的详细路径数据。 一个 24px 的图标应该是 800 字节 3,200 字节。 将其乘以设计系统中的 50 个图标，您将发送 120 KB 每次页面加载时都会删除不必要的 SVG 数据。

标准修复方法是 SVGO，这是一个可以消除这种臃肿现象的 Node.js 工具。 但SVGO带来了 您的项目或 CI 环境中有 30 多个 npm 依赖项。 如果您的前端已构建 使用 Go、Rust、Python 或纯 HTML，安装 Node.js 和 npm 只是为了缩小 SVG 太过分了。

botoi SVG 优化器 API 对单个 HTTP 请求执行相同的工作。 没有安装， 没有依赖关系，没有版本冲突。 发送原始 SVG，返回优化版本 与尺寸指标。

一个curl命令来优化SVG

将您的 SVG 字符串发送到 /v1/svg/optimize 端点：

curl -s -X POST https://api.botoi.com/v1/svg/optimize \\
  -H "Content-Type: application/json" \\
  -d '{
    "svg": "<svg xmlns=\\"http://www.w3.org/2000/svg\\" width=\\"24\\" height=\\"24\\" viewBox=\\"0 0 24 24\\"><!-- Figma metadata --><defs></defs><g id=\\"Layer_1\\"><path d=\\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2z\\" fill=\\"#1a73e8\\"/></g></svg>"
  }'

API 返回优化的 SVG 以及之前/之后的尺寸数据：

{
  "success": true,
  "data": {
    "optimized": "<svg xmlns=\\"http://www.w3.org/2000/svg\\" width=\\"24\\" height=\\"24\\" viewBox=\\"0 0 24 24\\"><path d=\\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2z\\" fill=\\"#1a73e8\\"/></svg>",
    "original_size": 12450,
    "optimized_size": 5180,
    "savings_percent": 58.4
  }
}

响应包括原始和优化 SVG 的字节数，以及 节省百分比。 使用这些数字来跟踪整个资产的优化影响 图书馆。

用于自动优化的 GitHub Actions 工作流程

此工作流在每个修改 SVG 文件的拉取请求上运行。 发现有变化 SVG，通过 API 优化每一个，并将结果提交回 PR 分支。 审阅者无需任何手动步骤即可看到优化的 SVG。

创造 .github/workflows/optimize-svgs.yml 在你的存储库中：

name: Optimize SVGs

on:
  pull_request:
    paths:
      - '**/*.svg'

jobs:
  optimize-svgs:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout repository
        uses: actions/checkout@v4

      - name: Find changed SVG files
        id: changed
        run: |
          FILES=\$(git diff --name-only --diff-filter=ACM origin/\${{ github.base_ref }} HEAD -- '*.svg')
          echo "files=\$FILES" >> \$GITHUB_OUTPUT
          echo "Found SVGs: \$FILES"

      - name: Optimize SVGs
        if: steps.changed.outputs.files != ''
        run: |
          TOTAL_SAVED=0
          for FILE in \${{ steps.changed.outputs.files }}; do
            SVG_CONTENT=\$(cat "\$FILE")
            PAYLOAD=\$(jq -n --arg svg "\$SVG_CONTENT" '{"svg": \$svg}')

            RESPONSE=\$(curl -s -X POST https://api.botoi.com/v1/svg/optimize \\
              -H "Content-Type: application/json" \\
              -H "Authorization: Bearer \${{ secrets.BOTOI_API_KEY }}" \\
              -d "\$PAYLOAD")

            SUCCESS=\$(echo "\$RESPONSE" | jq -r '.success')
            if [ "\$SUCCESS" = "true" ]; then
              echo "\$RESPONSE" | jq -r '.data.optimized' > "\$FILE"
              SAVINGS=\$(echo "\$RESPONSE" | jq -r '.data.savings_percent')
              ORIGINAL=\$(echo "\$RESPONSE" | jq -r '.data.original_size')
              OPTIMIZED=\$(echo "\$RESPONSE" | jq -r '.data.optimized_size')
              echo "Optimized \$FILE: \$ORIGINAL -> \$OPTIMIZED bytes (\$SAVINGS% saved)"
              TOTAL_SAVED=\$((TOTAL_SAVED + ORIGINAL - OPTIMIZED))
            else
              echo "::warning::Failed to optimize \$FILE"
            fi
          done
          echo "Total bytes saved: \$TOTAL_SAVED"

      - name: Commit optimized SVGs
        run: |
          git config user.name "github-actions[bot]"
          git config user.email "github-actions[bot]@users.noreply.github.com"
          git add '*.svg'
          git diff --cached --quiet || git commit -m "chore: optimize SVG assets"
          git push

该工作流程仅处理当前 PR 中更改的 SVG，保留 API 调用 降到最低限度。 这 --diff-filter=ACM 标记捕获已添加、复制和 修改文件，同时跳过删除。

之前和之后：现实世界的尺寸比较

以下是在从 Figma 导出的 SVG 上运行 API 的结果，以获得典型的结果 Web应用程序的图标集和插图：

这些文件的平均节省：59.4%。 最大的收获来自插图 包含嵌入元数据和详细路径定义的 SVG。 依然是简单的图标 减少 55-65%，因为 Figma 导出小数精度和属性 浏览器会忽略。

批量优化脚本

用于本地使用或集成到其他 CI 系统（GitLab CI、CircleCI、Jenkins）， 此 shell 脚本优化目录中的每个 SVG：

在您的资产目录中运行它：

chmod +x optimize-svgs.sh
./optimize-svgs.sh src/assets/icons

设置 BOTOI_API_KEY 环境变量绕过匿名 每分钟 5 个请求的速率限制。 如果没有按键，脚本会在 要求保持在限制以下。

替代方案：预提交挂钩

如果您希望在 SVG 到达存储库之前对其进行优化，请使用 Git 预提交挂钩。 这种方法可以在开发人员的机器上捕获臃肿的 SVG 而不是在 CI 中：

该钩子仅处理为提交而暂存的 SVG，因此它不会触及您的文件 没有改变。 每个优化的文件都会自动重新暂存。

优化过程中删除了什么

API 的目标数据对渲染的 SVG 具有零视觉影响：

• 编辑器元数据： Figma、Illustrator 和 Sketch 特定嵌入工具 属性（data-name, sketch:type）浏览器会跳过。
• XML 注释： 设计工具添加注释，例如 <!-- Generator: Adobe Illustrator 28.0 --> 毫无意义的 在生产中。
• 空组和定义： 导出的 SVG 包含空 <g> 和 <defs> 图层留下的元素 设计工具中的结构。
• 冗余属性： 默认值如 fill-opacity="1" 和 stroke-miterlimit="4" 匹配浏览器默认值并且可以删除。
• 超额精度： 路径坐标，小数点后 8 位 （12.34567890) 四舍五入为 2 (12.35) 不可见 屏幕分辨率的差异。

何时在其他地方优化 SVG

API 方法最适合图标集、徽标和 UI 插图。 几个案例 不同的策略更有意义：

• 带有嵌入字体的 SVG： 如果您的 SVG 包含 <text> 具有自定义字体的元素，之前在设计工具中将文本转换为轮廓 优化。 API 不会子集或嵌入字体。
• 动画 SVG： SVG 中的 SMIL 动画和 CSS 动画是 保留，但测试输出以确认时序属性保持不变。
• 超过 2 MB 的 SVG： 这些通常包含 base64 编码的光栅图像。 将它们提取为单独的 PNG/JPEG 文件并引用它们。