Aller au contenu principal
DailyBox

Inspecteur SVG : trouvez les problèmes dans le code SVG

Collez ou ouvrez un SVG pour voir sa structure, ses couleurs et ses ressources, ainsi qu'une liste de problèmes sur lesquels cliquer pour aller à la ligne exacte.

Déposez un fichier SVG ici

5 Mo maximum. Ouvert uniquement dans votre navigateur.

Votre SVG est traité dans cet onglet du navigateur. Il n'est jamais envoyé.

Comment ça marche

  1. Ouvrez un fichier ou collez du code. La source s'affiche à gauche.
  2. Lisez l'onglet Problèmes et cliquez sur un résultat pour aller à sa ligne.
  3. Corrigez la source sur place. L'analyse se met à jour pendant la saisie.

Usages courants

  • Comprendre pourquoi un SVG s'affiche vide ou à la mauvaise taille.
  • Corriger des ID en double avant de mettre plusieurs SVG sur une même page.
  • Lister les couleurs et les polices dont dépend un graphique.

Ce que fait l'outil

  • Détecte XML invalide, viewBox manquant, ID en double et références cassées.
  • Signale scripts, gestionnaires d'événements et références externes.
  • Vérifie la présence d'un titre et d'un rôle pour que les lecteurs d'écran nomment le graphique.
  • Liste couleurs, dégradés, images, polices, ID et classes avec leur usage.

À savoir

L'inspecteur lit le code, il ne le dessine pas. Les couleurs sont repérées dans les attributs, les attributs style et les éléments style par simple balayage, sans cascade CSS complète, et les contrôles d'accessibilité sont élémentaires, pas un audit complet.

Questions fréquentes

Qu'est-ce qui compte comme un problème ?
Les erreurs cassent le fichier ou sont dangereuses, les avertissements peuvent donner de mauvais résultats, et les remarques sont bonnes à savoir. Chaque élément indique son niveau.
Pourquoi les ID en double posent-ils problème ?
Quand plusieurs SVG partagent une page, un ID répété peut faire pointer dégradés, masques et références vers la mauvaise forme.
La taille gzip est-elle réelle ?
Oui. Votre navigateur compresse le code et indique le nombre réel d'octets. Elle n'est affichée que si votre navigateur le permet.
Mon fichier est-il envoyé ?
Non. L'analyse se fait dans votre onglet.

Outils associés