Optimisation SVG pour développeurs : SVGO, pipelines de build et intégration CI/CD

Les fichiers SVG sont la colonne vertébrale des graphiques web modernes — scalables, stylisables, animables, et généralement plus légers que les alternatives raster. Mais un SVG mal optimisé exporté depuis Figma ou Illustrator peut être plus lourd qu'un PNG et plomber vos Core Web Vitals.

J'ai passé huit ans à livrer des SVG en production. Voici le guide que j'aurais aimé avoir dès le premier jour.

Pourquoi l'optimisation SVG est un poste du budget performance

Un SVG non optimisé peut contenir des métadonnées d'éditeur, des chemins redondants avec 12 décimales de précision, des styles inline répétés, des définitions de gradient/filtre inutilisées et du XML superflu comme xml:space. Un audit réel : une illustration hero de 52 Ko est tombée à 7,8 Ko après optimisation — 85% de réduction.

Configuration SVGO pas à pas

SVGO est l'optimiseur standard de l'industrie. Les paramètres par défaut laissent de la performance sur la table. Il vous faut une configuration affinée.

CLI vs API Node

# CLI -- fichiers ponctuels et scripts CI
npx svgo input.svg -o output.svg --config svgo.config.js

# Optimisation par lot d'un répertoire
npx svgo -f ./src/icons -o ./dist/icons --config svgo.config.js

// API Node -- intégration pipeline de build
import { optimize } from 'svgo';
import { readFileSync, writeFileSync } from 'fs';

const result = optimize(readFileSync('icon.svg', 'utf8'), {
  multipass: true,
  plugins: [
    'preset-default',
    'removeDimensions',
    { name: 'removeAttrs', params: { attrs: '(data-.*|class)' } },
  ],
});
writeFileSync('icon.opt.svg', result.data);

svgo.config.js de production

module.exports = {
  multipass: true,
  plugins: [
    {
      name: 'preset-default',
      params: {
        overrides: {
          removeViewBox: false,
          convertPathData: { floatPrecision: 2, transformPrecision: 3 },
          mergePaths: { force: true },
        },
      },
    },
    'removeDimensions',
    'sortAttrs',
    { name: 'removeAttrs', params: { attrs: ['xml:space', 'data-name'] } },
  ],
};

Avant/Après : Suppression des métadonnées et du ballast éditeur

Chaque outil de design intègre son empreinte :

<!-- AVANT : 680 octets de gaspillage -->
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
     version="1.1" id="Layer_1" x="0px" y="0px" width="200px" height="200px"
     viewBox="0 0 200 200" style="enable-background:new 0 0 200 200;"
     xml:space="preserve">
  <!-- Generator: Adobe Illustrator 28.0 -->
  <metadata><rdf:RDF><rdf:Description/></rdf:RDF></metadata>
  <defs><linearGradient id="unused_grad">...</linearGradient></defs>

<!-- APRÈS : propre, prêt pour la production -->
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200">

Disparus : version, dimensions fixes, xml:space, enable-background, commentaires du générateur, métadonnées vides, defs inutilisés. 680 octets économisés sur une petite icône — multipliez par un sprite de 40 symboles.

Simplification des chemins : Réduire les nœuds sans perte visuelle

Les chemins concentrent la majorité des octets SVG. Les designers créent des chemins avec des centaines de nœuds là où des dizaines suffisent.

<!-- AVANT : précision à 12 décimales -->
<path d="M10.123456789012 20.987654321098 C15.111111111111 25.222222222222
  30.333333333333 40.444444444444 45.555555555555 50.666666666666"/>

<!-- APRÈS : précision à 2 décimales, visuellement identique -->
<path d="M10.12 20.99C15.11 25.22 30.33 40.44 45.56 50.67"/>

Différence visuelle à la résolution d'écran ? Zéro. Économie d'octets ? 58%. Utilisez l'éditeur SVG de VectoSolve pour inspecter visuellement la réduction des nœuds.

Comparaison des techniques d'optimisation

CSS dans SVG : Inline vs feuilles de style externes

<!-- Styles inline : gonflés, mais autonomes -->
<path style="fill:#ff0000;stroke:#000;stroke-width:2" d="..."/>
<path style="fill:#ff0000;stroke:#000;stroke-width:2" d="..."/>

<!-- <style> consolidé : plus léger, autonome -->
<style>.a{fill:#f00;stroke:#000;stroke-width:2}</style>
<path class="a" d="..."/>
<path class="a" d="..."/>

<!-- Attributs de présentation : le plus léger, idéal pour le SVG inline -->
<path fill="#f00" stroke="#000" stroke-width="2" d="..."/>

Pour les SVG inline, utilisez les attributs de présentation — remplaçables par du CSS externe, pas de problème de scope. Pour les fichiers autonomes, les blocs <style> fonctionnent bien.

Statistiques de compression Gzip & Brotli

Le SVG est du XML — il se compresse spectaculairement :

Brotli bat Gzip de 5-15% sur le SVG. Cloudflare, Vercel et Netlify le supportent nativement.

"

Chaque kilo-octet que vous envoyez est un kilo-octet que le navigateur de votre utilisateur doit télécharger, parser et rendre. Les SVG optimisés ne sont pas un nice-to-have — c'est un poste du budget performance.

Lazy Loading des pages riches en SVG

Si votre page a plus de 20 SVG sous la ligne de flottaison, ne les chargez pas tous au premier rendu :

const observer = new IntersectionObserver((entries) => {
  entries.forEach((entry) => {
    if (entry.isIntersecting) {
      const img = entry.target;
      img.src = img.dataset.src;
      observer.unobserve(img);
    }
  });
}, { rootMargin: '200px' });

document.querySelectorAll('img[data-src$=".svg"]').forEach(img => observer.observe(img));

Le rootMargin de 200 px donne de l'avance au navigateur. Zéro décalage de layout, zéro bande passante gaspillée.

Intégration pipeline de build : Webpack, Vite, Next.js

L'optimisation manuelle ne passe pas à l'échelle. Branchez SVGO dans votre outil de build.

Vite

import svgLoader from 'vite-svg-loader';
export default defineConfig({
  plugins: [svgLoader({
    svgoConfig: { multipass: true, plugins: ['preset-default', 'removeDimensions'] },
  })],
});

Webpack

{ test: /\.svg$/, use: [
  { loader: 'svg-url-loader', options: { limit: 8192 } },
  { loader: 'svgo-loader', options: { configFile: './svgo.config.js' } },
]}

Next.js

config.module.rules.push({
  test: /\.svg$/,
  use: ['@svgr/webpack', {
    loader: 'svgo-loader',
    options: { configFile: './svgo.config.js' },
  }],
});

Avec l'intégration pipeline, l'optimisation se fait au moment du build. Pas d'étapes manuelles, pas de fichiers oubliés.

La checklist d'optimisation complète

1. Exportez proprement depuis votre outil de design
2. Lancez SVGO avec une config committée — ou optimisez avec VectoSolve pour un workflow visuel
3. Vérifiez visuellement — comparez avant/après, surtout les animations
4. Activez la compression — Gzip minimum, Brotli si le CDN le supporte
5. Lazy loadez les SVG sous la ligne de flottaison avec Intersection Observer
6. Automatisez en CI — SVGO dans votre pipeline pour que rien ne parte non optimisé

Besoin de convertir des images raster en SVG optimisé ? VectoSolve gère la vectorisation et l'optimisation en une seule étape. Ou utilisez l'éditeur SVG pour un contrôle fin des chemins et de la qualité de sortie.

Questions ou histoires de guerre d'optimisation ? Contactez-nous à contact@vectosolve.com.

Sources & Lectures complémentaires

• web.dev: Image Optimization — Guide de référence de Google sur l'optimisation SVG et la compression pour la performance web
• MDN Web Docs: SVG — Référence technique sur la syntaxe des chemins SVG et les attributs d'éléments ciblés par l'optimisation
• CSS-Tricks: Optimizing SVG — Tutoriels pratiques de configuration SVGO et exemples d'optimisation avant/après
• W3C SVG 2 Specification — Spécification officielle pour comprendre quels attributs SVG peuvent être supprimés en toute sécurité