SVG Optimizer
Understand SVG Optimizer
Retire des balises SVG les métadonnées d'éditeur, les commentaires et les attributs inutilisés, et indique le gain exact en octets.
How it works
Un SVG exporté depuis Inkscape, Illustrator, Figma ou Sketch transporte quantité d'informations que le navigateur ne lit jamais : instructions de traitement XML, DOCTYPE, commentaires, bloc `<metadata>` en RDF, et des espaces de noms entiers d'attributs privés à l'éditeur, tels que `inkscape:label` et `sodipodi:docname`. Tout cela est supprimé, les déclarations `style` simples comme `style="fill: #5C5BFE"` sont promues en attributs de présentation (`fill="#5C5BFE"`), les attributs `id` que rien ne référence dans le document sont abandonnés, et les espaces entre balises sont réduits. Les tailles sont mesurées en octets UTF-8 avant et après, si bien que le pourcentage affiché est le gain réel sur le réseau avant compression.
When to use it
- Nettoyer un jeu d'icônes avant de l'intégrer dans une bibliothèque de composants ou de construire une planche de sprites
- Réduire la charge utile d'un SVG intégré dans du HTML, où chaque octet se trouve sur le chemin critique
- Retirer le nom de document, les noms de calques et les métadonnées d'auteur d'un éditeur avant de publier un fichier
- Rendre un SVG généré par une machine assez lisible pour être modifié à la main
Watch out for
- Un `id` référencé uniquement depuis un CSS ou un JavaScript externe paraît inutilisé et se fait supprimer. Si votre feuille de style cible `#logo-path` ou si votre script appelle `getElementById`, vérifiez la sortie avant de la livrer.
- Promouvoir un `style` en ligne en attributs abaisse sa spécificité. Un style en ligne bat toutes les règles de feuille de style ; un attribut de présentation perd contre toutes, si bien qu'une règle jusque-là supplantée peut désormais l'emporter.
- Les données de tracé ne sont pas touchées. Les coordonnées ne sont pas arrondies, les tracés ne sont pas fusionnés et les formes ne sont pas converties — les gains les plus profonds sur une illustration détaillée exigent un optimiseur complet comme SVGO.
- Le gain en octets fond après gzip ou brotli. Des métadonnées répétitives se compressent bien, si bien qu'une réduction brute de 60 % peut se rapprocher de 25 % sur le réseau.
Not the right tool for: Assainir un SVG non fiable. Ceci est un optimiseur de taille, pas un filtre de sécurité — un SVG accepté d'un utilisateur peut porter des `<script>`, des gestionnaires d'événements et des `foreignObject`, et doit être assaini côté serveur avant tout rendu.
Frequently Asked Questions
De combien l'optimisation SVG réduit-elle la taille d'un fichier ?
Les réductions typiques vont de 20 à 70 %. Les SVG exportés depuis Inkscape, Adobe Illustrator ou Figma contiennent de nombreuses métadonnées d'éditeur, des commentaires et des attributs redondants. Un SVG exporté de 50 Ko tombe souvent à 10–20 Ko après optimisation — une amélioration décisive pour un sprite d'icônes.
L'optimisation va-t-elle casser mes animations SVG ?
C'est possible. Cet optimiseur supprime les attributs id qu'il ne voit référencés ni par url(#id) ni par href="#id", si bien qu'un CSS ou un JavaScript ciblant un élément par son identifiant peut cesser de correspondre. Les animations CSS fondées sur des classes et le SMIL contenu dans le fichier ne sont pas affectés. Vérifiez la sortie avant de remplacer un SVG animé.
Quelle est la différence entre minification et optimisation ?
La minification ne retire que les espaces et les commentaires. L'optimisation réécrit aussi le contenu : suppression des métadonnées d'éditeur, promotion des propriétés de style simples en attributs de présentation, et suppression des identifiants non référencés. Cet outil fait les deux. Il ne fusionne pas les tracés, ne réduit pas les groupes et ne convertit pas les formes en tracés — c'est ce que fait SVGO.
How to Use SVG Optimizer
- Paste or type your input in the input area above.
- The tool processes your input automatically or click Run.
- Copy or download the result using the action buttons.
- Use Ctrl+Enter to run quickly from the keyboard.