Optimieren Sie SVGs in Ihrer CI-Pipeline mit einer REST-API (keine SVGO-Installation erforderlich)

Aus Figma exportierte Icon-SVGs sind 3-5x größer als nötig. Design-Tools einbetten Metadaten, leer <defs> Blöcke, editorspezifische Attribute und Ausführliche Pfaddaten, die von Browsern niemals verwendet werden. Im Lieferumfang ist ein 24-Pixel-Symbol enthalten, das 800 Byte groß sein sollte bei 3.200 Byte. Multiplizieren Sie das mit 50 Symbolen in einem Designsystem und Sie senden 120 KB unnötiger SVG-Daten bei jedem Seitenladevorgang.

Die Standardlösung ist SVGO, ein Node.js-Tool, das dieses Aufblähen beseitigt. Aber SVGO bringt Über 30 NPM-Abhängigkeiten in Ihrem Projekt oder Ihrer CI-Umgebung. Wenn Ihr Frontend erstellt ist mit Go, Rust, Python oder einfachem HTML, wobei Node.js und npm ausschließlich zur Minimierung von SVGs installiert werden ist übertrieben.

Die botoi SVG-Optimierungs-API erledigt die gleiche Arbeit mit einer einzigen HTTP-Anfrage. Keine Installationen, Keine Abhängigkeiten, keine Versionskonflikte. Senden Sie das Roh-SVG und erhalten Sie die optimierte Version zurück mit Größenangaben.

Ein Curl-Befehl zum Optimieren einer SVG

Senden Sie Ihre SVG-Zeichenfolge an die /v1/svg/optimize Endpunkt:

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>"
  }'

Die API gibt das optimierte SVG zusammen mit Vorher/Nachher-Größendaten zurück:

{
  "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
  }
}

Die Antwort enthält die Byteanzahl des ursprünglichen und optimierten SVG sowie die Prozentsatz gespart. Verwenden Sie diese Zahlen, um die Optimierungsauswirkungen auf Ihre gesamte Anlage zu verfolgen Bibliothek.

GitHub Actions-Workflow für die automatische Optimierung

Dieser Workflow wird bei jedem Pull-Request ausgeführt, der SVG-Dateien ändert. Es findet verändert SVGs, optimiert jedes einzelne über die API und überträgt die Ergebnisse zurück an die PR Zweig. Prüfer sehen optimierte SVGs ohne manuellen Schritt.

Erstellen .github/workflows/optimize-svgs.yml in Ihrem Repository:

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

Der Workflow verarbeitet nur SVGs, die sich im aktuellen PR geändert haben, und behält API-Aufrufe bei auf ein Minimum. Der --diff-filter=ACM Flaggenfänge hinzugefügt, kopiert und geänderte Dateien, während Löschvorgänge übersprungen werden.

Vorher und nachher: ​​Größenvergleich in der Praxis

Hier sind die Ergebnisse der Ausführung der API auf SVGs, die für einen typischen Fall aus Figma exportiert wurden Symbolsatz und Abbildungen der Webanwendung:

Durchschnittliche Einsparungen bei diesen Dateien: 59,4 %. Die größten Gewinne ergeben sich aus der Illustration SVGs, die eingebettete Metadaten und ausführliche Pfaddefinitionen enthalten. Immer noch einfache Symbole sehen Sie eine Reduzierung um 55–65 %, da Figma die Dezimalgenauigkeit exportiert und diese zuschreibt Browser ignorieren.

Skript zur Stapeloptimierung

Zur lokalen Nutzung oder Integration in andere CI-Systeme (GitLab CI, CircleCI, Jenkins), Dieses Shell-Skript optimiert jedes SVG in einem Verzeichnis:

Führen Sie es in Ihrem Assets-Verzeichnis aus:

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

Stellen Sie die ein BOTOI_API_KEY Umgebungsvariable, um die Anonymität zu umgehen Ratenlimit von 5 Anfragen pro Minute. Ohne Schlüssel pausiert das Skript dazwischen Anfragen, unter dem Grenzwert zu bleiben.

Alternative: Pre-Commit-Hook

Wenn Sie SVGs lieber optimieren möchten, bevor sie Ihr Repository erreichen, verwenden Sie ein Git Pre-Commit-Hook. Dieser Ansatz fängt aufgeblähte SVGs auf dem Rechner des Entwicklers ab statt in CI:

Der Hook verarbeitet nur SVGs, die zum Festschreiben bereitgestellt werden, sodass Ihre Dateien nicht berührt werden haben sich nicht geändert. Jede optimierte Datei wird automatisch neu bereitgestellt.

Was wird während der Optimierung entfernt?

Die API zielt auf Daten ab, die keinen visuellen Einfluss auf das gerenderte SVG haben:

• Editor-Metadaten: Figma, Illustrator und Sketch sind werkzeugspezifisch eingebettet Attribute (data-name, sketch:type), die Browser überspringen.
• XML-Kommentare: Designtools fügen Kommentare wie hinzu <!-- Generator: Adobe Illustrator 28.0 --> die keinen Zweck erfüllen in der Produktion.
• Leere Gruppen und Defs: Exportierte SVGs enthalten leere Dateien <g> Und <defs> Elemente, die von der Ebene übrig geblieben sind Strukturen im Designtool.
• Redundante Attribute: Standardwerte wie fill-opacity="1" Und stroke-miterlimit="4" entsprechen den Browser-Standardeinstellungen und können entfernt werden.
• Übermäßige Präzision: Wegkoordinaten mit 8 Dezimalstellen (12.34567890) werden auf 2 gerundet (12.35) ohne sichtbar Unterschied bei der Bildschirmauflösung.

Wann sollten SVGs anderswo optimiert werden?

Der API-Ansatz eignet sich am besten für Symbolsätze, Logos und UI-Illustrationen. Ein paar Fälle wo eine andere Strategie sinnvoller ist:

• SVGs mit eingebetteten Schriftarten: Wenn Ihr SVG enthält <text> Wenn Sie Elemente mit benutzerdefinierten Schriftarten erstellen möchten, konvertieren Sie den Text zuvor in Ihrem Designtool in Konturen optimieren. Die API unterteilt oder bettet keine Schriftarten ein.
• Animierte SVGs: SMIL-Animationen und CSS-Animationen in SVGs sind erhalten, aber testen Sie die Ausgabe, um sicherzustellen, dass die Timing-Attribute intakt bleiben.
• SVGs über 2 MB: Diese enthalten typischerweise Base64-kodierte Rasterbilder. Extrahieren Sie diese als separate PNG-/JPEG-Dateien und verweisen Sie stattdessen darauf.