REST API を使用して CI パイプライン内の SVG を最適化します (SVGO のインストールは必要ありません)

Figma からエクスポートされたアイコン SVG は、必要なサイズより 3 ～ 5 倍大きくなります。 デザインツールの埋め込み メタデータ、空 <defs> ブロック、エディター固有の属性、および ブラウザが決して使用しない詳細なパス データ。 800 バイトになるはずの 24 ピクセルのアイコンが同梱されます 3,200バイトで。 これにデザイン システム内の 50 アイコンを掛けると、120 KB を送信することになります。 ページをロードするたびに不要な SVG データを削除します。

標準的な修正は、この肥大化を取り除く Node.js ツールである SVGO です。 しかし、SVGO がもたらすのは プロジェクトまたは CI 環境への 30 以上の npm 依存関係。 フロントエンドが構築されている場合 Go、Rust、Python、またはプレーン HTML を使用し、SVG を縮小するためだけに Node.js と npm をインストールする やりすぎです。

botoi SVG オプティマイザー API は、単一の HTTP リクエストで同じ作業を実行します。 インストールはありません。 依存関係やバージョンの競合はありません。 生の SVG を送信し、最適化されたバージョンを取得します サイズメトリクス付き。

SVG を最適化する 1 つのcurlコマンド

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 と最適化された 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。 シンプルなアイコンはそのままに Figma は小数精度と属性をエクスポートするため、55 ～ 65% の削減を参照してください。 ブラウザは無視します。

バッチ最適化スクリプト

ローカルで使用する場合、または他の CI システム (GitLab CI、CircleCI、Jenkins) に統合する場合、 このシェル スクリプトは、ディレクトリ内のすべての SVG を最適化します。

アセット ディレクトリで実行します。

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

を設定します。 BOTOI_API_KEY 匿名をバイパスする環境変数 レート制限は 1 分あたり 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 ファイルとして抽出し、代わりに参照します。