Optimiser SVG pour le web : SVGO, presets & bonnes pratiques

Guide optimisation SVG : minifier vs presets SVGO (safe, default, aggressive), exports Figma, icônes 30–70 % plus légères sans perte visuelle pour le web.

02.03.2026

10 min de lecture

Partager cet article:

SVG

Optimisation

Minification

Performance

Images

Web

Tutoriel

Pourquoi optimiser et minifier vos SVG ?

Les SVG sont parfaits pour les icones, logos et illustrations responsives. Mais les exports d'outils de design contiennent souvent des metadonnees inutiles, des attributs redondants et des chemins trop verbeux. Le minify rapide supprime espaces et commentaires ; l'optimisation SVGO va plus loin. Commencez avec notre minificateur SVG en ligne, puis utilisez optimiser SVG (SVGO) — voir le hub outils SVG. Combinez avec le minificateur HTML en ligne pour les SVG inline. Pour l'impact performance global, consultez aussi notre guide Core Web Vitals et minification.

Reduction de 30 a 70% de la taille des SVG selon la complexite

Meilleur LCP pour les pages contenant logos et illustrations hero

Moins de bande passante et chargement plus rapide sur mobile

Code SVG plus propre et plus simple a maintenir

Amelioration du score Lighthouse sur les ressources image

Impact reel sur les performances

Cas reel : icon set e-commerce

Optimisation d'un lot de 120 icones SVG utilisees sur les pages categorie et produit.

Comparaison avant apres optimisation SVG sur un set d'icones

Avant optimisation

Taille des fichiers: 620 Ko
Temps de chargement: 420ms

Après optimisation

Taille des fichiers: 248 Ko
Temps de chargement: 250ms

Impact Core Web Vitals

Des SVG plus legers reduisent le cout de telechargement et accelerent le rendu des elements critiques.

LCP : gain de 120 a 350 ms selon la taille des illustrations hero

INP : moins de travail CPU pour parser les gros SVG inline

CLS : aucun impact negatif si dimensions preservees

TBT : baisse des pics lors du parsing de pages riches en SVG

UX mobile : chargement plus stable sur reseaux 3G/4G

Bonnes pratiques SVG pour la production

Checklist avant mise en ligne

Appliquez cette routine pour garder des assets legers et robustes.

Toujours conserver l'attribut viewBox pour le responsive

Limiter la precision decimale des paths (2-3 decimales en general)

Supprimer les calques caches et groups inutilises

Eviter d'inliner les gros SVG non critiques

Tester le rendu sur mobile et ecrans retina

Versionner les SVG sources non minifies, deployer la version minifiee

Erreurs frequentes a eviter

Pour les SVG inline, pensez a minifier le container avec le minificateur HTML, et a compresser les styles associes avec le minificateur CSS. Si vous devez analyser un SVG illisible, utilisez le mode beautify ou de-minify avant re-optimisation.

Supprimer par erreur viewBox et casser le responsive

Minifier a l'aveugle des SVG animes sans tests visuels

Conserver des IDs verbeux non utilises

Oublier les attributs d'accessibilite (title, role, aria-label)

Ne pas monitorer la taille SVG dans la CI

Anatomie de l'optimisation SVG

Avant / apres minification SVG

La minification SVG retire les elements non essentiels sans modifier le rendu visuel.

Avant

<svg width="120" height="120" xmlns="http://www.w3.org/2000/svg" version="1.1" id="Layer_1">
  <!-- Exported from Illustrator -->
  <metadata>Created with Design Tool X</metadata>
  <g id="Icon_Group" fill="#1d4ed8" fill-opacity="1.000000" stroke="none">
    <path d="M 10.0000 10.0000 L 110.0000 10.0000 L 110.0000 110.0000 L 10.0000 110.0000 Z" />
  </g>
</svg>

// ~430 bytes

Après

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 120 120"><path fill="#1d4ed8" d="M10 10h100v100H10z"/></svg>

// ~150 bytes (environ 65% de reduction)

Ce qui est supprime vs preserve

L'objectif est de gagner des octets sans casser l'affichage ni l'accessibilite.

SUPPRIME : metadonnees d'editeur (Illustrator, Figma, Inkscape)

SUPPRIME : commentaires et espaces superflus

SUPPRIME : attributs par defaut redondants

OPTIMISE : precision decimale des paths

PRESERVE : viewBox, semantique et rendu visuel

PRESERVE : balises utiles pour l'accessibilite (title, desc)

Methode rapide : FastMinify SVG Optimizer

Optimiser un SVG en 3 etapes

Commencez par le minificateur SVG pour un nettoyage rapide. Pour les préréglages SVGO (safe, default, aggressive), passez à optimiser SVG — voir le hub outils SVG.

Interface FastMinify pour optimiser et minifier un SVG

Etape 1 : Collez ou importez votre SVG

Ajoutez votre code SVG brut ou importez le fichier dans l'editeur.

Etape 2 : Lancez l'optimisation

Cliquez sur Minifier pour supprimer metadonnees, espaces et attributs redondants.

Etape 3 : Copiez le resultat

Recuperez le SVG optimise pour votre build pipeline ou votre CMS.

Fonctionnalites utiles pour les equipes web

L'outil permet aussi de travailler en mode beautify/de-minify pour relire un SVG complexe, puis de repasser en version compacte avant mise en production.

Optimisation instantanee cote client

Aucun upload serveur pour les contenus sensibles

Mode de-minification/beautify pour debug rapide

Copie en un clic pour integration dans le code

Compatible avec SVG inline et fichiers externes

Optimisation SVG programmatique

SVGO (Node.js) pour CI/CD

SVGO est la reference pour automatiser l'optimisation SVG dans un pipeline frontend.

Exemple de base

import { optimize } from 'svgo'

const svg = `<svg xmlns="http://www.w3.org/2000/svg">...</svg>`
const result = optimize(svg, {
  multipass: true,
  plugins: ['preset-default']
})

console.log(result.data)

Minification de fichier

import { optimize } from 'svgo'
import fs from 'node:fs'

const input = fs.readFileSync('icon.svg', 'utf8')
const { data } = optimize(input, {
  path: 'icon.svg',
  multipass: true,
  plugins: [
    'preset-default',
    { name: 'cleanupIds', params: { minify: true } },
    { name: 'removeDimensions', active: false }
  ]
})

fs.writeFileSync('icon.min.svg', data)
console.log('SVG optimise ecrit dans icon.min.svg')

Configuration recommandee

Cette configuration conserve les dimensions logiques (viewBox) et optimise agressivement les chemins.

Configuration

export default {
  multipass: true,
  js2svg: { indent: 0, pretty: false },
  plugins: [
    'preset-default',
    { name: 'convertPathData', params: { floatPrecision: 2 } },
    { name: 'sortAttrs', active: true },
    { name: 'removeViewBox', active: false }
  ]
}

Utilisation

# npm
auto_svgo() {
  npx svgo -f src/assets/svg -o public/assets/svg
}

# ex: hook dans le build
npm run optimize:svg && npm run build

SVG inline vs fichier externe

Inliner un SVG critique dans le HTML peut etre pertinent pour le above-the-fold. Sinon, preferer les fichiers caches. Pour les SVG inline, combinez avec la minification HTML via FastMinify.

Conclusion

Optimiser vos SVG est l'un des gains performance les plus rapides a mettre en place : moins d'octets, rendu plus rapide et meilleure experience utilisateur, sans sacrifier la qualite visuelle. Combinez une methode rapide via outil en ligne pour les besoins ponctuels avec une automatisation SVGO dans votre pipeline pour industrialiser les gains.

Optimisez vos SVG gratuitement des maintenant

Utilisez FastMinify pour les optimisations rapides de SVG

Automatisez SVGO dans votre pipeline CI/CD

Conservez viewBox pour garantir le responsive

Validez visuellement chaque SVG optimise

Combinez SVG optimise + HTML/CSS minifies pour un gain maximal

Partager cet article

Partager cet article: