Visionneuse de code SVG - Un code propre en un clin d'oeil

Chargez n'importe quel fichier SVG pour visualiser le rendu, verifier sa structure et copier le code formate instantanement.

Televersez votre fichier SVG

Deposez votre SVG ici

Supports SVG jusqu'a 5 Mo. Le fichier reste sur votre appareil.

ou faites glisser le fichier dans cette zone.

Code SVG formate

Exemples d'utilisation

Icone SVG simple

Une etoile a cinq branches creee avec un seul element polygon.

<svg viewBox="0 0 100 100" xml...

Logo SVG avec degrade

Un logo circulaire utilisant un degrade lineaire pour un look moderne.

<svg viewBox="0 0 100 100" xml...

Animation SVG

Un carre en rotation utilisant SVG animateTransform.

<svg viewBox="0 0 100 100" xml...

Pourquoi utiliser cette visionneuse ?

Apercu instantane

Affichez immediatement l'illustration pour verifier couleurs et traces.

Markup lisible

Met en forme le XML avec une indentation propre pour faciliter la lecture.

Analyse rapide

Compte les paths, groupes et affiche le ViewBox ainsi que les dimensions.

Traitement local

Aucun fichier n'est envoye : tout se passe dans votre navigateur.

Comment afficher le code SVG ?

Importez le SVG

Selectionnez un fichier ou glissez-le dans la zone de depot.

Analysez l'apercu

Consultez l'apercu et les compteurs (paths, groupes, ViewBox).

Copiez ou telechargez

Recuperez le code formate ou telechargez le SVG nettoye.

Questions fréquentes

Collez votre markup SVG dans l'éditeur de code ou importez un fichier .svg. Le panneau d'aperçu en direct se met à jour instantanément au fil de la saisie. Vous pouvez voir le graphique rendu et le code source côte à côte, ce qui permet d'identifier facilement quels éléments produisent quel rendu visuel.

Oui. L'éditeur de code est entièrement modifiable — changez n'importe quel attribut, couleur, chemin ou propriété et l'aperçu se met à jour en temps réel. Idéal pour des retouches rapides comme les couleurs de remplissage, les épaisseurs de trait ou les valeurs viewBox sans ouvrir un éditeur vectoriel complet.

Vous pouvez consulter le markup complet mis en forme, inspecter les éléments individuels et leurs attributs, vérifier le viewBox, la largeur et la hauteur, compter les éléments et visualiser la structure SVG. Utile pour déboguer les problèmes de rendu des SVG exportés depuis Figma, Illustrator ou d'autres outils.

La cause la plus fréquente est l'absence ou l'inadéquation des attributs viewBox et width/height. Si le viewBox est absent ou si les dimensions ne correspondent pas, différents moteurs de rendu mettent le SVG à l'échelle différemment. Vérifiez ces attributs en premier. Assurez-vous également que les polices référencées, les images externes ou les styles CSS sont correctement intégrés ou accessibles.

Oui. Utilisez le bouton Formater pour auto-indenter et mettre en forme le markup SVG brut. Cela le rend lisible lorsque vous exportez depuis des outils produisant une sortie compressée sur une seule ligne (comme Figma ou la plupart des bibliothèques d'icônes). Vous pouvez ensuite supprimer manuellement les attributs ou métadonnées inutiles.

Jusqu'à 5 Mo. Cela couvre la majorité des icônes, logos et illustrations. Les SVG très volumineux (cartes complexes, illustrations détaillées avec des milliers de nœuds de chemin) peuvent approcher cette limite — vous devrez peut-être les simplifier ou les optimiser au préalable.

Oui. Cliquez sur le bouton Copier pour copier le markup SVG complet dans votre presse-papiers. Vous pouvez également télécharger le fichier modifié au format .svg via le bouton Télécharger.

Non. Tout le traitement s'effectue localement dans votre navigateur via JavaScript. Votre code SVG et vos fichiers ne sont jamais transmis à un serveur ni stockés où que ce soit.

Qu'est-ce qu'une visionneuse de code SVG ?

Un outil en ligne qui vous permet d'ouvrir, d'analyser et de copier des fichiers SVG sans installer de logiciel lourd. Ideal pour verifier des icones exportees ou partager des extraits de code rapidement.

Pourquoi inspecter un SVG en ligne ?

Vous detectez les elements inutiles, ameliorez l'accessibilite et gagnez du temps lors de l'integration dans vos projets. Le formatage automatique rend meme les SVG complexes faciles a lire.

Analyse instantanee

Deposez un fichier SVG et obtenez immediatement le nombre de paths, de groupes, les valeurs du ViewBox et les dimensions. Ces informations vous aident a evaluer la complexite du fichier avant de l'integrer.

Code propre, pret a copier

Le markup est formate avec une indentation lisible pour que vous puissiez le coller directement dans vos composants, design systems ou documentations sans nettoyage manuel.

Sécurité et Confidentialité

La sécurité de vos données est notre priorité

Traitement Local

Tout le traitement se fait dans votre navigateur

Aucun Transfert de Données

Vos données ne sont pas envoyées à nos serveurs

Aucun Stockage de Données

Aucune donnée n'est stockée ou partagée

Chiffrement SSL

Chiffrement SSL pour une connexion sécurisée

Étape Suivante

Optimiseur SVG

Optimiser et minifier les fichiers SVG

SVG to Image Converter

Optimisez et affinez les images sans perte de qualité.

Cet outil vous a-t-il été utile ?

Visionneuse de code SVG - Un code propre en un clin d'oeil

Televersez votre fichier SVG

Deposez votre SVG ici

Analyse du SVG

Code SVG formate

Apercu en direct

Exemples d'utilisation

Icone SVG simple

Logo SVG avec degrade

Animation SVG

Pourquoi utiliser cette visionneuse ?

Apercu instantane

Markup lisible

Analyse rapide

Traitement local

Comment afficher le code SVG ?

Importez le SVG

Analysez l'apercu

Copiez ou telechargez

Questions fréquentes

Qu'est-ce qu'une visionneuse de code SVG ?

Pourquoi inspecter un SVG en ligne ?

Analyse instantanee

Code propre, pret a copier

Sécurité et Confidentialité

Traitement Local

Aucun Transfert de Données

Aucun Stockage de Données

Chiffrement SSL

Étape Suivante

Optimiseur SVG

SVG to Image Converter

Visionneuse de code SVG - Un code propre en un clin d'oeil

Televersez votre fichier SVG

Deposez votre SVG ici

Analyse du SVG

Code SVG formate

Apercu en direct

Exemples d'utilisation

Icone SVG simple

Logo SVG avec degrade

Animation SVG

Pourquoi utiliser cette visionneuse ?

Apercu instantane

Markup lisible

Analyse rapide

Traitement local

Comment afficher le code SVG ?

Importez le SVG

Analysez l'apercu

Copiez ou telechargez

Questions fréquentes

Comment voir le code SVG et l'aperçu en même temps ?

Puis-je modifier le code SVG directement dans cet outil ?

Que puis-je inspecter dans un fichier SVG ?

Pourquoi mon SVG apparaît différemment dans une autre application ?

Puis-je l'utiliser pour nettoyer un code SVG confus issu d'outils d'export ?

Quelle est la limite de taille pour l'import de fichiers SVG ?

Puis-je copier le code SVG après modification ?

Mon code SVG quitte-t-il le navigateur ?

Qu'est-ce qu'une visionneuse de code SVG ?

Pourquoi inspecter un SVG en ligne ?

Analyse instantanee

Code propre, pret a copier

Sécurité et Confidentialité

Traitement Local

Aucun Transfert de Données

Aucun Stockage de Données

Chiffrement SSL

Visionneuse de Code SVG en Ligne - Inspecter et Prévisualiser SVG

Étape Suivante

Optimiseur SVG

SVG to Image Converter

Outils connexes

Formateur XML

Encodeur d'Entités HTML

Encodeur/Décodeur URL

Générateur de Nuances

Générateur de Schéma JSON

Vérificateur de Diff de Code