Optimiseur SVG (SVGO)
Optimisez et minifiez du code SVG avec SVGO dans votre navigateur. Supprime métadonnées d’éditeur, commentaires et balisage redondant, avec aperçu et gain de taille.
Utilise le preset par défaut de SVGO, qui conserve le viewBox, les titres et les descriptions d’accessibilité.
S'exécute entièrement dans votre navigateur. Vos données ne sont jamais envoyées.
Qu'est-ce que Optimiseur SVG ?
L’optimiseur SVG exécute SVGO, la bibliothèque standard d’optimisation SVG, sur votre code SVG. Il retire les métadonnées d’éditeur, les commentaires, les éléments cachés et vides, raccourcit les données de tracés, les nombres et les couleurs, et fusionne ce qui peut l’être. Vous obtenez le code optimisé, un aperçu avant/après et la réduction de taille.
Comment utiliser Optimiseur SVG
- Collez le code SVG dans Code SVG, ou déposez/choisissez un fichier
.svg. - Réglez les options : Plusieurs passes (résultat plus léger), Précision des nombres (décimales), Conserver les ID (nécessaire si du CSS ou des scripts les utilisent), Remplacer width/height par le viewBox (responsive), Indenter le résultat.
- Comparez les aperçus avant/après et l’indicateur de taille.
- Copiez le SVG optimisé ou téléchargez-le sous
name-min.svg.
Exemple
SVG 100×100 d’un éditeur avec déclaration XML, un commentaire, <metadata>, <defs> vide et un <g> imbriqué autour d’un rect (474 octets)
<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100"><path d="M10 10h80v80H10z" style="fill:red;stroke:none"/></svg>
Quand utiliser Optimiseur SVG
Utilisez-le sur des icônes, logos et illustrations exportés de Figma, Illustrator, Inkscape ou Sketch avant de les livrer sur un site ou une application. Activez Conserver les ID si du CSS, du JavaScript ou des références <use> ailleurs dépendent des ID d’éléments. Vérifiez toujours l’aperçu : des SVG inhabituels avec scripts ou références externes peuvent nécessiter des retouches manuelles.
Comment fonctionne Optimiseur SVG
L’outil charge à la demande la version navigateur de SVGO 4 et applique ses plugins preset-default : suppression de la déclaration XML, du doctype, des commentaires, des métadonnées et des espaces de noms d’éditeur, nettoyage des attributs et des valeurs numériques, conversion des formes en tracés, fusion des groupes, réécriture des données de tracés et des transformations, etc. Le preset par défaut de SVGO 4 conserve le viewBox, le <title> et les <desc> non liés à un éditeur : la mise à l’échelle et l’accessibilité sont préservées. Avec plusieurs passes, les plugins se répètent jusqu’à ce que la sortie cesse de diminuer.
Cas d'utilisation courants
- Alléger des icônes exportées d’outils de design avant de les ajouter à une bibliothèque de composants.
- Nettoyer un logo SVG pour l’intégrer en ligne dans du HTML.
- Réduire des sprites SVG pour accélérer le chargement des pages.
- Supprimer des métadonnées d’éditeur qui révèlent des chemins de fichiers ou des noms d’auteurs.
Note de Sécurité
Les images sont décodées, traitées et encodées localement dans votre navigateur avec l’API Canvas. Rien n’est envoyé à un serveur.
Questions Fréquentes
L’optimisation SVGO est-elle sans perte ?
Avec le preset par défaut, elle est visuellement sans perte dans presque tous les cas. Baisser trop la précision des nombres (0 à 1 décimale) peut décaler de petites formes : comparez les aperçus.
Pourquoi mon CSS ne fonctionne-t-il plus après l’optimisation ?
SVGO raccourcit ou supprime les ID inutilisés. Activez Conserver les ID si vos styles ou scripts les ciblent.
Supprime-t-il le viewBox ?
Non. Le preset par défaut de SVGO 4 conserve le viewBox. L’option Remplacer width/height par le viewBox (responsive) retire au contraire la taille fixe, ce qui rend le SVG adaptatif.