Comment utiliser l'optimiseur SVG
- Collez le code SVG dans le panneau gauche ou chargez un fichier
.svg. - Choisissez les optimisations à appliquer.
- Cliquez sur Améliorer: le SVG nettoyé apparaît à droite avec un rapport de gain.
- Copiez le résultat ou téléchargez le fichier
.svgamélioré.
Ce que chaque option supprime
- Commentaires: blocs
<!-- ... -->souvent laissés par Illustrator, Figma ou Sketch. Inutiles pour le rendu. - Métadonnées: balises
<metadata>et espaces de noms éditeur (xmlns:inkscape,xmlns:sodipodi). Utiles uniquement dans l'outil de design. - Éléments masqués: nœuds avec
display:noneouvisibility:hiddenqui ne contribuent pas au graphique visible. - Réduire les espaces: espaces, tabulations et sauts de ligne superflus entre les balises. Le SVG résultant est moins lisible mais significativement plus petit.
- Minifier les styles inline: compacte les valeurs d'attributs style en supprimant les espaces redondants.
Pourquoi améliorer les SVG ?
Les SVG exportés depuis Illustrator ou Inkscape contiennent beaucoup de balisage utile pour l'édition mais inutile pour l'affichage. Une icône SVG typique peut être réduite de 30 à 70 % en supprimant ces métadonnées.
Pour un usage en production
Cet outil est un optimiseur léger côté client. Pour un pipeline de build, envisagez SVGO (l'optimiseur SVG Node.js standard) ou intégrez-le via un plugin de bundler (Vite, Webpack).
Confidentialité
Toutes les optimisations s'effectuent dans votre navigateur. Aucun code SVG n'est envoyé à un serveur.