Optimiseur SVG
AssainiOptimisez et nettoyez des fichiers SVG.
- Flux d'icônes
Input bytes
0
Output bytes
0
Colors
0
ViewBox
—
Colors
fill/stroke/stop-color
Preview an SVG to extract colors.
Preview
No preview yet.
Output SVG
Sanitization
SVG can execute scripts or load external resources. This tool sanitizes the markup before preview and removes risky elements/attributes.
- Removes
<script>,<foreignObject>, and event handler attributes (on*). - Strips external
href/xlink:hrefunless it’s an internal#idreference.
Qu'est-ce que le SVG ?
Le SVG (Scalable Vector Graphics) est un format d'image vectorielle basé sur XML pour les graphiques bidimensionnels, avec prise en charge de l'interactivité et de l'animation. Contrairement aux formats matriciels comme JPEG ou PNG, les SVG sont définis par des chemins mathématiques, ce qui leur permet d'être mis à l'échelle sans perte de qualité. Cela les rend parfaits pour les logos, icônes et illustrations sur le web, où ils restent nets sur tous les supports, des écrans mobiles aux moniteurs de bureau haute résolution.
Comment utiliser cet outil
Collez votre code SVG dans la zone de texte SVG d'entrée à gauche. Cliquez sur Aperçu pour voir le graphique et extraire sa palette de couleurs. Utilisez les boutons Optimiser ou Minifier pour nettoyer le balisage et réduire la taille du fichier. Optionnellement, remplacez des couleurs spécifiques en saisissant de nouvelles valeurs dans le panneau Couleurs puis en cliquant sur Appliquer. Cliquez sur Copier ou Télécharger pour enregistrer votre SVG assaini et optimisé.
Cas d'utilisation courants
Gestion d'icônes pour nettoyer les SVG exportés depuis des outils de design comme Figma ou Illustrator. Thématisation pour changer rapidement les couleurs d'un ensemble d'icônes afin de correspondre à votre palette de marque. Sécurité pour assainir les SVG provenant de sources non fiables afin de supprimer d'éventuels scripts ou références externes. Performance pour minifier le balisage SVG afin de réduire la taille des graphiques en ligne et améliorer les temps de chargement des pages.
Conseils de pro
Utilisez le bouton currentColor pour convertir tous les fill et stroke explicites en currentColor, rendant votre SVG facilement stylable via CSS. Optimisez toujours vos SVG avant de les utiliser en production pour garantir qu'ils sont aussi légers que possible. Lors de la création de SVG dans des outils de design, utilisez les fonctions Vectoriser le contour et Simplifier le tracé pour réduire la complexité du code généré avant l'optimisation.