Ouvrez n’importe quel fichier .svg ou collez du code <svg> brut pour contrôler son rendu sur damier transparent, fond clair ou fond sombre tout en analysant ses dimensions viewBox et son arbre DOM XML — 100 % en local dans votre navigateur.
ou cliquez pour parcourir
Découvrez comment les designers UI et les développeurs frontend utilisent le Visualiseur SVG pour diagnostiquer les icônes blanches invisibles, les viewBox rognés et le code XML alourdi.
Les explorateurs de fichiers classiques affichent les icônes SVG blanches (#FFFFFF) sur un fond blanc, les faisant paraître vides ou corrompues. Le passage de l’arrière-plan du visualiseur en mode Noir ou Damier révèle immédiatement la géométrie nette du tracé de 2 px et valide la transparence alpha.
Le panneau Informations sur le fichier indique instantanément si un SVG possède une largeur/hauteur figée en pixels sans attribut viewBox adaptatif, ou si des coordonnées négatives provoquent un rognage avant la mise en production.
Exécute en temps réel les animations CSS @keyframes et les balises SMIL <animate> tout en affichant l’arbre DOM XML complet ci-dessous. Repérez facilement les blocs <metadata> superflus ou les couleurs hexadécimales figées et passez directement à l’Optimiseur SVG.
L’Explorateur Windows et le Finder macOS peinent souvent à afficher les miniatures SVG, et lancer Adobe Illustrator juste pour vérifier une icône prend plusieurs minutes. Cet outil répond à trois besoins quotidiens :
Lorsque vous exportez des icônes blanches destinées aux interfaces sombres, les ouvrir dans un onglet de navigateur standard affiche un écran blanc. Basculez entre le Damier, le Blanc, le Noir et une couleur personnalisée pour contrôler le contraste instantanément.
Avant d’intégrer un SVG dans React, Vue ou un catalogue d’assets mobile, vérifiez d’un coup d’œil sa largeur, sa hauteur, sa chaîne de coordonnées ViewBox (min-x min-y width height) et son poids exact.
Besoin de vérifier si un SVG utilise currentColor, des couleurs en dur (#3B82F6), des tracés <path> vectorisés plutôt que des balises <text>, ou des scripts indésirables ? Inspectez et copiez le code source XML directement dans le panneau dédié.
Notre analyseur DOM local et notre scène de prévisualisation prennent en charge l’ensemble des standards vectoriels :
Glissez-déposez tout fichier .svg exporté depuis Figma, Adobe Illustrator, Inkscape, Sketch, Affinity Designer ou un logiciel de CAO.
Utilisez l’onglet « Coller le code SVG » pour prévisualiser des chaînes SVG inline copiées directement depuis le code source HTML, des composants JSX ou des bibliothèques d’icônes.
Prend pleinement en charge les animations CSS @keyframes, les transitions, les dégradés (<linearGradient>, <radialGradient>), les masques <clipPath> et les éléments SMIL <animateTransform>.
Affiche toutes les primitives vectorielles (<path>, <circle>, <rect>, <polygon>, <g>) ainsi que les images matricielles intégrées en data:image/*;base64 dans un conteneur local isolé.
Déposez votre fichier .svg dans la zone de chargement, cliquez sur « Charger un SVG d’Exemple », ou passez sur l’onglet « Coller le code SVG » pour insérer votre balise XML.
Utilisez les boutons d’arrière-plan au-dessus du canevas pour tester le comportement de vos tracés, ombres portées et transparences sur différentes surfaces.
Consultez le panneau Informations sur le fichier à droite pour vérifier le nom exact, la taille en octets, les attributs width et height déclarés ainsi que les coordonnées viewBox.
Parcourez l’inspecteur Code SVG en bas pour lire ou copier le balisage XML, ou cliquez sur « Convertir en PNG » / « Optimiser le SVG » dans le panneau Actions pour poursuivre votre flux.
Une fois l’intégrité visuelle et la structure DOM de votre SVG validées, passez directement à l’action :
Copiez le code XML vérifié depuis le panneau inférieur pour l’intégrer directement dans vos composants web et remplacer les couleurs figées par fill="currentColor".
Assurez-vous qu’aucun tracé n’est coupé par le viewBox et que les contours sont parfaits avant de cliquer sur « Convertir en PNG » pour générer vos fichiers haute résolution.
Si le panneau Code SVG révèle des centaines de lignes de données propriétaires Adobe Illustrator <i:pgf> ou Inkscape sodipodi:, cliquez sur « Optimiser le SVG » pour alléger le fichier de 40 % à 80 %.
Si un SVG apparaît vide, coupé ou mal stylisé dans le visualiseur, l’inspecteur met en évidence une anomalie dans le code XML source :
Soit les tracés du SVG sont blancs (#FFFFFF) sur un fond d’aperçu blanc, soit les coordonnées des tracés <path> se trouvent en dehors de la fenêtre définie par le viewBox.
Basculez d’abord l’arrière-plan d’aperçu sur « Noir » ou « Damier ». Si rien n’apparaît, comparez les valeurs viewBox="minX minY L H" avec les coordonnées <path d="M..."> dans le panneau Code SVG.
Le SVG contient des balises <text font-family="..."> actives faisant référence à une police qui n’est pas installée sur votre appareil.
Vérifiez la présence de balises <text> dans le code XML. Pour garantir un rendu identique partout, réexportez le fichier depuis votre logiciel de design en vectorisant les textes en chemins (<path>).
Les règles de sécurité des navigateurs (CSP et CORS) empêchent les aperçus SVG isolés de télécharger des images hébergées sur des serveurs externes.
Intégrez toute image matricielle directement dans le fichier SVG sous forme de chaîne data:image/png;base64,... au lieu d’un lien HTTP externe.
Découvrez quand utiliser le Visualiseur SVG par rapport à notre Optimiseur SVG ou notre Convertisseur SVG vers PNG :
| Fonctionnalité / Scénario | Visualiseur & Inspecteur SVG (Cet Outil) | Optimiseur SVG (/svg-optimizer/) | Convertisseur SVG vers PNG (/) |
|---|---|---|---|
| Objectif Principal | Aperçu visuel multi-fond, audit des dimensions ViewBox et inspection du code source DOM XML | Minification automatique et suppression des métadonnées XML superflues pour réduire le poids du .svg |
Pixellisation de fichiers vectoriels .svg ou de code XML en images matricielles .png 32 bits |
| Résultat / Livrable | Téléchargement du .svg vérifié, copie du code source XML et diagnostic des métadonnées |
Fichier vectoriel .svg allégé de 40 % à 80 % prêt pour la production web |
Image matricielle .png haute résolution (dimensions px sur mesure & métadonnées 300 DPI) |
| Test de Contraste d’Arrière-plan | Sélecteur interactif Damier, Blanc, Noir et Hexadécimal pour le contrôle qualité visuel | Aperçu comparatif côte à côte avant/après optimisation | Fusion permanente de l’arrière-plan choisi (Transparent ou couleur unie) dans le PNG exporté |
| Lecture des Dimensions & ViewBox | Tableau dédié affichant le Nom, le Poids, la Largeur, la Hauteur et la chaîne exacte du ViewBox | Concentré sur le Poids Original vs Poids Optimisé et le pourcentage d’économie | Concentré sur la Largeur × Hauteur cible en pixels et la résolution DPI d’impression |
Oui, c’est 100 % sûr et confidentiel. Notre Visualiseur SVG en ligne fonctionne intégralement dans votre navigateur web grâce aux API locales JavaScript FileReader et DOMParser. Vos fichiers .svg et votre code XML ne quittent jamais votre ordinateur et ne sont jamais envoyés sur un serveur.
L’attribut viewBox="min-x min-y width height" définit le système de coordonnées interne (la toile virtuelle sur laquelle les tracés sont dessinés), tandis que width et height définissent la taille d’affichage externe à l’écran. Tant qu’un SVG possède un viewBox valide, il peut être redimensionné de 16 px à 4000 px sans aucun rognage.
Oui ! Contrairement aux vignettes figées de l’Explorateur Windows ou du Finder macOS, notre scène d’aperçu exécute en temps réel à 60 images/seconde aussi bien les animations CSS @keyframes que les balises natives SVG SMIL (<animate>, <animateTransform>).
De nombreux logiciels de design exportent des SVG responsives comportant uniquement un attribut viewBox (en omettant width et height afin que l’icône s’adapte à 100 % de son conteneur CSS). Si en revanche le viewBox est absent (N/A), nous vous conseillons vivement d’ajouter viewBox="0 0 L H" pour assurer un redimensionnement correct.
Oui. Dans le panneau « Actions » situé juste à droite de l’aperçu, cliquez sur « Optimiser le SVG » pour nettoyer et compresser le code XML dans notre Optimiseur SVG, ou cliquez sur « Convertir en PNG » pour générer un fichier PNG haute résolution.
Chaque outil répond à un besoin précis. Passez d’un outil à l’autre pour compléter votre flux de travail.
Nettoyez les métadonnées inutiles et réduisez le poids de vos fichiers SVG de 40 % à 80 % sans perte visuelle.
Convertissez vos fichiers SVG en PNG transparents haute définition avec dimensions personnalisées (px) et métadonnées 300 DPI.
Convertissez des dizaines ou centaines de fichiers SVG simultanément en PNG, JPG ou WebP et téléchargez-les en ZIP.
Générez un pack complet favicon.ico et icônes d’application iOS, Android, macOS et Windows à partir d’une image.