Optimisez les SVG dans votre pipeline CI avec une API REST (aucune installation SVGO requise)

Les icônes SVG exportées depuis Figma sont 3 à 5 fois plus grandes que nécessaire. Outils de conception intégrés métadonnées, vide <defs> blocs, attributs spécifiques à l'éditeur et des données de chemin détaillées que les navigateurs n'utilisent jamais. Une icône de 24 pixels qui devrait faire 800 octets est livrée à 3 200 octets. Multipliez cela par 50 icônes dans un système de conception et vous envoyez 120 Ko de données SVG inutiles à chaque chargement de page.

Le correctif standard est SVGO, un outil Node.js qui supprime cette surcharge. Mais SVGO apporte Plus de 30 dépendances npm dans votre projet ou environnement CI. Si votre frontend est construit avec Go, Rust, Python ou HTML brut, installer Node.js et npm uniquement pour réduire les SVG est exagéré.

L'API de l'optimiseur SVG botoi fait le même travail avec une seule requête HTTP. Aucune installation, pas de dépendances, pas de conflits de versions. Envoyez le SVG brut, récupérez la version optimisée avec des mesures de taille.

Une commande curl pour optimiser un SVG

Envoyez votre chaîne SVG au /v1/svg/optimize point final :

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

L'API renvoie le SVG optimisé ainsi que les données de taille avant/après :

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

La réponse inclut le nombre d'octets du SVG original et optimisé, ainsi que le pourcentage économisé. Utilisez ces chiffres pour suivre l'impact de l'optimisation sur l'ensemble de votre actif bibliothèque.

Workflow GitHub Actions pour l’optimisation automatique

Ce flux de travail s'exécute sur chaque demande d'extraction modifiant les fichiers SVG. Il trouve changé SVG, optimise chacun d'entre eux via l'API et transmet les résultats au PR branche. Les réviseurs voient les SVG optimisés sans aucune étape manuelle.

Créer .github/workflows/optimize-svgs.yml dans votre dépôt :

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

Le flux de travail traite uniquement les SVG modifiés dans le PR actuel, en conservant les appels d'API au minimum. Le --diff-filter=ACM captures de drapeau ajoutées, copiées et fichiers modifiés tout en ignorant les suppressions.

Avant et après : comparaison des tailles réelles

Voici les résultats de l'exécution de l'API sur des SVG exportés depuis Figma pour un usage typique. Jeu d'icônes et illustrations de l'application Web :

Économies moyennes sur ces dossiers : 59,4 %. Les gains les plus importants proviennent de l’illustration SVG contenant des métadonnées intégrées et des définitions de chemin détaillées. Des icônes simples toujours voyez des réductions de 55 à 65 % car Figma exporte une précision décimale et des attributs qui les navigateurs ignorent.

Script d'optimisation par lots

Pour une utilisation locale ou une intégration dans d'autres systèmes CI (GitLab CI, CircleCI, Jenkins), ce script shell optimise chaque SVG d'un répertoire :

Exécutez-le sur votre répertoire d'actifs :

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

Réglez le BOTOI_API_KEY variable d'environnement pour contourner l'anonyme limite de débit de 5 requêtes par minute. Sans clé, le script fait une pause entre demande de rester sous la limite.

Alternative : hook de pré-commit

Si vous préférez optimiser les SVG avant qu'ils n'atteignent votre référentiel, utilisez un Git hook de pré-validation. Cette approche détecte les SVG gonflés sur la machine du développeur au lieu de CI :

Le hook traite uniquement les SVG préparés pour la validation, il ne touchera donc pas les fichiers que vous n'a pas changé. Chaque fichier optimisé est automatiquement remis en scène.

Ce qui est supprimé lors de l'optimisation

L'API cible les données qui n'ont aucun impact visuel sur le SVG rendu :

• Métadonnées de l'éditeur : Spécifique aux outils d'intégration Figma, Illustrator et Sketch attributs (data-name, sketch:type) que les navigateurs ignorent.
• Commentaires XML : Les outils de conception ajoutent des commentaires comme <!-- Generator: Adobe Illustrator 28.0 --> qui ne sert à rien en production.
• Groupes et définitions vides : Les SVG exportés contiennent des éléments vides <g> et <defs> éléments restants du calque structures dans l’outil de conception.
• Attributs redondants : Les valeurs par défaut comme fill-opacity="1" et stroke-miterlimit="4" correspondre aux valeurs par défaut du navigateur et peut être supprimé.
• Excès de précision : Coordonnées du chemin avec 8 décimales (12.34567890) est arrondi à 2 (12.35) sans visible différence à la résolution de l'écran.

Quand optimiser les SVG ailleurs

L'approche API fonctionne mieux pour les jeux d'icônes, les logos et les illustrations de l'interface utilisateur. Quelques cas où une stratégie différente a plus de sens :

• SVG avec polices intégrées : Si votre SVG contient <text> éléments avec des polices personnalisées, convertissez le texte en contours dans votre outil de conception avant optimiser. L'API ne sous-ensemble ni n'intègre de polices.
• SVG animés : Les animations SMIL et les animations CSS à l'intérieur des SVG sont conservé, mais testez la sortie pour confirmer que les attributs de synchronisation restent intacts.
• SVG supérieurs à 2 Mo : Ceux-ci contiennent généralement des images raster codées en base64. Extrayez-les sous forme de fichiers PNG/JPEG distincts et référencez-les à la place.