Comment optimiser vos fichiers SVG pour la performance web (2026)

Pourquoi l'optimisation SVG est importante

Les SVG non optimisés peuvent être plus lourds que les PNG. Un SVG de 500 Ko va à l'encontre de l'intérêt d'utiliser des vecteurs. Une bonne optimisation peut réduire la taille des fichiers de 50 à 80 %.

Impact réel sur la performance

La checklist d'optimisation SVG

1. Supprimer les métadonnées de l'éditeur

Les outils de design ajoutent des données inutiles :

Avant (export Illustrator) :

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 27.0, SVG Export -->
<svg xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink"
     x="0px" y="0px"
     viewBox="0 0 100 100"
     style="enable-background:new 0 0 100 100;"
     xml:space="preserve">

Après (optimisé) :

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">

Gain : 40 à 60 % rien qu'avec les métadonnées

2. Simplifier les tracés

Réduisez la précision décimale :

Avant :

<path d="M12.3456789,45.6789012 L67.8901234,12.3456789"/>

Après :

<path d="M12.35,45.68 L67.89,12.35"/>

Gain : 20 à 40 %

3. Fusionner les tracés

Combinez les tracés similaires :

Avant :

<path d="M0,0 L10,0" fill="#000"/>
<path d="M10,0 L20,0" fill="#000"/>
<path d="M20,0 L30,0" fill="#000"/>

Après :

<path d="M0,0 L30,0" fill="#000"/>

Gain : 50 à 70 %

4. Utiliser CSS au lieu des attributs

Avant :

<circle cx="50" cy="50" r="40" fill="#1cb721" stroke="#000" stroke-width="2"/>

Après :

<style>.c{fill:#1cb721;stroke:#000;stroke-width:2}</style>
<circle cx="50" cy="50" r="40" class="c"/>

Gain : 10 à 30 % (plus avec des éléments répétés)

5. Supprimer les éléments cachés

Supprimez tout ce qui n'est pas visible :

• Éléments hors du viewBox
• Formes complètement transparentes
• Groupes vides
• Définitions non utilisées

Meilleurs outils d'optimisation SVG

1. SVGO (meilleur choix global)

Outil en ligne de commande, le plus configurable :

npx svgo input.svg -o output.svg

Gain typique : 50 à 80 %

2. SVGOMG (interface web)

Version en ligne de SVGO avec aperçu visuel :

• jakearchibald.github.io/svgomg/

3. ImageOptim (Mac)

Optimisation par glisser-déposer :

• Traite SVG, PNG, JPG
• Compression sans perte

4. VectoSolve (pendant la conversion)

Les SVG de VectoSolve sont pré-optimisés :

• Tracés propres
• Code minimal
• Aucune métadonnée

Configuration SVGO pour un gain maximal

// svgo.config.js
module.exports = {
  plugins: [
    'removeDoctype',
    'removeXMLProcInst',
    'removeComments',
    'removeMetadata',
    'removeEditorsNSData',
    'cleanupAttrs',
    'mergeStyles',
    'inlineStyles',
    'minifyStyles',
    'cleanupIds',
    'removeUselessDefs',
    'cleanupNumericValues',
    'convertColors',
    'removeUnknownsAndDefaults',
    'removeNonInheritableGroupAttrs',
    'removeUselessStrokeAndFill',
    'cleanupEnableBackground',
    'removeHiddenElems',
    'removeEmptyText',
    'convertShapeToPath',
    'convertEllipseToCircle',
    'moveGroupAttrsToElems',
    'collapseGroups',
    'convertPathData',
    'convertTransform',
    'removeEmptyAttrs',
    'removeEmptyContainers',
    'mergePaths',
    'removeUnusedNS',
    'sortDefsChildren',
    'removeTitle',
    'removeDesc'
  ]
};

« Le SVG le plus rapide est un petit SVG. L'optimisation n'est pas optionnelle — c'est la différence entre une interface réactive et une interface lente. » — Addy Osmani, Google Chrome Team

Exemples avant/après

Optimisation de logo

Jeu d'icônes (50 icônes)

Techniques avancées

1. Sprites SVG

Combinez plusieurs icônes en un seul fichier :

<svg style="display:none">
  <symbol id="icon-home" viewBox="0 0 24 24">...</symbol>
  <symbol id="icon-search" viewBox="0 0 24 24">...</symbol>
</svg>

<svg><use href="#icon-home"/></svg>

Avantages :

• Une seule requête HTTP
• Mise en cache par le navigateur
• Taille totale réduite

2. Compression GZIP

Les SVG se compressent exceptionnellement bien :

Configuration serveur :

gzip on;
gzip_types image/svg+xml;

3. Chargement différé

Pour les SVG sous la ligne de flottaison :

<img src="illustration.svg" loading="lazy" alt="...">

Impact sur les Core Web Vitals

Les SVG optimisés améliorent directement :

LCP (Largest Contentful Paint)

• Fichiers plus petits = chargement plus rapide
• Objectif : < 2,5 secondes

FID (First Input Delay)

• Moins de parsing = interactivité plus rapide
• Objectif : < 100 ms

CLS (Cumulative Layout Shift)

• SVG avec viewBox = dimensions stables
• Objectif : < 0,1

Conclusion

L'optimisation SVG est essentielle pour la performance web. Quelques minutes d'optimisation peuvent réduire la taille des fichiers de 80 % et améliorer significativement vos scores Core Web Vitals.

Gains rapides :

1. Passez tous vos SVG dans SVGO
2. Activez GZIP sur votre serveur
3. Utilisez des sprites SVG pour les icônes
4. Utilisez VectoSolve pour des conversions pré-optimisées

Commencez à optimiser : Convertissez et optimisez vos images avec VectoSolve pour des SVG instantanément prêts pour le web.

Sources et lectures complémentaires

• web.dev — Guide définitif de Google sur la performance web incluant l'optimisation SVG pour les Core Web Vitals
• W3C SVG 2 Specification — Spécification officielle définissant la structure SVG valide
• MDN Web Docs — SVG — Référence technique pour les éléments et attributs SVG
• CSS-Tricks: Using SVG — Workflows d'optimisation pratiques et guides de configuration SVGO
• Smashing Magazine — Articles approfondis sur l'audit de performance SVG et études de cas