Comment utiliser : Optimiseur SVG
- Collez le code SVG ou ouvrez un fichier
.svg. - Conservez les réglages par défaut pour un gain maximal, ou baissez la précision pour obtenir des tracés encore plus légers.
- Comparez les aperçus original et optimisé pour vous assurer que rien n'a bougé.
- Copiez le code optimisé ou téléchargez le fichier
.svg.
Pourquoi optimiser les fichiers SVG ?
Les SVG exportés depuis les outils de design contiennent beaucoup de éléments superflus : métadonnées de l'éditeur, commentaires, calques masqués, valeurs d'attributs par défaut, groupes vides et coordonnées à six décimales. Rien de tout cela n'affecte l'apparence de l'image, mais ces éléments peuvent multiplier par deux à cinq la taille du fichier. Les icônes SVG intégrées directement dans le HTML répètent ce surpoids sur chaque page.
Ce que fait SVGO
SVGO est l'optimiseur SVG de référence, utilisé par la plupart des outils de build. Il applique un ensemble de greffons sans risque :
- Supprime la déclaration XML, les commentaires, les
<metadata>, les espaces de noms des éditeurs (Illustrator, Inkscape, Sketch) et les éléments masqués. - Supprime les groupes inutiles, fusionne les tracés lorsque c'est possible et convertit les formes en données de tracé plus courtes.
- Arrondit les nombres à la précision choisie et réécrit les commandes de tracé sous leur forme la plus courte.
- Minifie les styles et les couleurs en ligne (
#FFFFFF→#fff) et supprime les valeurs par défaut. - Raccourcit les ID et supprime ceux qui ne sont référencés nulle part.
Cet outil conserve systématiquement le viewBox, indispensable pour que le SVG se redimensionne correctement.
Choisir la précision
| Précision | Idéal pour |
|---|---|
| 1 | Icônes simples dessinées sur une grille de pixels |
| 2–3 | La plupart des icônes, logos et illustrations (3 par défaut) |
| 4–5 | Illustrations détaillées, cartes et graphiques aux courbes fines |
Une précision plus faible signifie moins de chiffres et des fichiers plus légers, mais les courbes peuvent légèrement se déplacer : c'est à cela que sert l'aperçu.
Largeur, hauteur et viewBox
Supprimer width et height permet au SVG de s'adapter à son conteneur grâce au CSS, ce qui convient généralement aux icônes et aux SVG intégrés en ligne. Conservez-les si le SVG est utilisé dans une balise <img> sans dimensions explicites.
Pour la suite : transformez le SVG optimisé en fond CSS, en composant React ou en élément Webflow.
Aussi recherché comme : optimiser svg en ligne, compresser svg, minifier svg, minifieur svg, réduire taille svg, compresseur svg, svgo en ligne.
Outils complémentaires : Optimiseur SVG
- Redimensionner viewBox SVG — Normalisez vos icônes vers un nouveau viewBox (par exemple 24×24) en recalculant les coordonnées réelles de chaque path, circle, rect et polygon, sans recourir à des astuces comme transform="scale()".
- Compresseur d’images — Réduisez la taille de vos photos et de vos graphiques de 50 à 90 % sans perte de qualité visible.
- Compression Gzip — Compressez du texte ou n'importe quel fichier en gzip, zlib ou deflate brut, ou collez du Base64 ou ouvrez un fichier .gz pour le décompresser.
- Compression Brotli — Compressez du texte ou des fichiers avec Brotli à n’importe quel niveau de 0 à 11, décompressez des données .br et comparez le résultat avec gzip, le tout localement dans votre navigateur.