Comment visualiser, recolorer et optimiser du code SVG en ligne

Que vous génériez une icône <svg> avec Claude ou ChatGPT ou que vous téléchargiez un vecteur depuis SVGRepo ou Figma, lire le code XML brut ne suffit pas à vérifier le rendu visuel. Un espace de travail dans le navigateur permet d’inspecter, de recolorer, d’alléger et d’exporter vos fichiers en quelques secondes.

Aperçu sur grille transparente, fond clair et fond sombre

Collez votre code ou déposez un fichier .svg dans la Visionneuse et Optimiseur SVG. L’outil extrait automatiquement les dimensions du viewBox même lorsque les attributs width et height sont absents, et vous permet de tester le contraste sur différents fonds.

Remplacez les couleurs en direct au curseur

Inutile de chercher chaque code hexadécimal dans des dizaines de balises <path> :

1. Consultez la barre des Couleurs détectées sous l’aperçu dans la Visionneuse et Optimiseur SVG.
2. Cliquez sur une pastille et déplacez le curseur du sélecteur de couleur pour voir le graphique se mettre à jour en temps réel.
3. Combinez ce flux avec le Sélecteur de couleur pour affiner votre palette.

Minifiez le XML ou exportez en PNG 2x / 4x

Cliquez sur Optimiser pour supprimer les commentaires et espaces superflus, ou copiez directement le Data URI pour votre CSS. Pour vos présentations, choisissez l’échelle 2x ou 4x afin d’exporter un PNG ou WebP parfaitement net, ou utilisez le Convertisseur d’images pour d’autres formats.