Pourquoi le SVG a-t-il besoin d'optimisation ?
Un SVG exporté depuis Figma, Illustrator ou Inkscape est souvent 5 à 10 fois plus gros que nécessaire. Ils ajoutent des piles de métadonnées (`<metadata>`, `<title>`, l'éditeur qui a produit le fichier), de longs noms de classes, des attributs par défaut (`fill="black"` alors que c'est le défaut), des coordonnées avec 15 décimales (`d="M12.345678901234567,5.987654321"`) et des commentaires d'éditeur.
L'optimiseur retire tout le superflu tout en préservant un rendu identique. Un fichier de 12 ko devient 2 ko. Moins à télécharger, FCP plus rapide, bundle plus léger.
Collez votre SVG, choisissez les options (ce qu'il faut retirer, le nombre de décimales pour l'arrondi), inspectez le visuel côte à côte pour confirmer que rien n'a cassé, copiez ou téléchargez le résultat. Tout tourne dans votre navigateur : le fichier ne quitte jamais.
Mode d'emploi
- Collez le code SVG dans le panneau de gauche ou cliquez sur « Upload file » pour charger depuis le disque.
- À droite, vous voyez la version optimisée. En dessous : une comparaison visuelle avant/après ; ils doivent paraître identiques.
- Dans la section options : cochez ce que vous voulez retirer. Les défauts sont agressifs (économies max).
- Le curseur precision contrôle les décimales pour les chemins. 2 suffit pour la plupart des icônes, 4 pour les graphismes de précision.
- Cliquez sur « Copier » pour mettre le résultat dans le presse-papiers ou « Télécharger » pour l'enregistrer comme fichier.
Quand ça aide
Situations typiques où le nettoyage SVG est rentable :
- Icônes dans une app. Vous exportez 50 icônes depuis Figma, chacune fait 3 ko : après optimisation, 400 octets. Soit 150 ko de moins dans votre bundle.
- Logo sur la home. Un export Illustrator a souvent 30-50 ko de métadonnées. Après nettoyage, 3 ko : meilleure performance.
- Arrière-plans SVG. Un motif de hero section doit être léger parce qu'il bloque le rendu above-the-fold.
- SVG inline dans un composant React. Moins de code, plus lisible. Optimisez avant de coller dans un composant.
- Sprite SVG. Des centaines d'icônes dans un seul fichier : chaque octet compte.
- Email. Le SVG dans les emails (là où il est pris en charge) gagne beaucoup à être minifié.
- CSS-in-JS. Un SVG inline en chaîne dans un fichier TypeScript doit rester court.
Ensuite, convertissez votre SVG en composant React avec SVG vers composant. Pour l'édition d'images raster, voir compresseur d'images.