Back

Aperçu et inspecteur SVG

Collez ou déposez un SVG et visualisez-le rendu immédiatement, avec un panneau de statistiques couvrant les dimensions, le viewBox, la répartition des éléments, les couleurs uniques et les indicateurs de sécurité. L'aperçu s'exécute dans une iframe isolée (sandbox) avec scripts et accès same-origin désactivés, de sorte qu'un SVG malveillant ne peut pas exécuter de code. Exportez l'image en SVG ou PNG, basculez entre fond blanc, noir ou damier transparent, ou passez en vue source pour inspecter le balisage.

Specifications

Cas d'utilisation courants

  • Prévisualiser rapidement une icône ou illustration SVG avant de l'intégrer
  • Vérifier si un SVG non fiable contient des scripts ou gestionnaires d'événements
  • Vérifier le viewBox et les dimensions intrinsèques d'un SVG
  • Compter les couleurs uniques d'un SVG (utile pour l'extraction de palette ou l'optimisation)
  • Convertir un SVG en PNG sur un fond coloré ou transparent
  • Inspecter la répartition des éléments pour repérer un usage inattendu de <script> ou <foreignObject>

Fonctionnalites

  • Aperçu isolé — le SVG est rendu dans une iframe avec sandbox="", empêchant l'exécution de scripts et de gestionnaires d'événements
  • Bascule d'arrière-plan : blanc, noir ou motif damier transparent
  • Panneau de statistiques : dimensions, viewBox, ratio, taille en octets, nombre d'éléments, principaux éléments, couleurs uniques
  • Les indicateurs de sécurité mettent en évidence les SVG contenant <script>, des gestionnaires d'événements, des références externes ou des animations
  • Exporter en SVG ou PNG haute résolution (2×) — l'arrière-plan sélectionné est incorporé dans l'export PNG
  • Aperçu en plein écran pour examiner les détails
  • Vue source avec coloration syntaxique
  • Copier le SVG normalisé dans le presse-papiers

Exemples

Icône simple

Essayer →

Une icône de coche dans un cercle dessinée au trait

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><path d="m9 12 2 2 4-4"/></svg>

Remplissage dégradé

Essayer →

Rectangle rempli d'un dégradé linéaire

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" width="200" height="200"><defs><linearGradient id="g" x1="0" y1="0" x2="1" y2="1"><stop offset="0%" stop-color="#22c55e"/><stop offset="100%" stop-color="#0ea5e9"/></linearGradient></defs><rect width="100" height="100" fill="url(#g)"/></svg>

SVG avec animation

Essayer →

Un cercle pulsant utilisant l'animation SMIL — le badge Animations s'allume

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" width="100" height="100"><circle cx="50" cy="50" r="20" fill="#ef4444"><animate attributeName="r" from="20" to="40" dur="1s" repeatCount="indefinite"/></circle></svg>

Conseils

  • Préférez viewBox à une largeur/hauteur fixe pour que l'image se redimensionne proprement
  • Si les badges Scripts ou Gestionnaires d'événements s'allument, le SVG exécuterait du code une fois intégré — supprimez-les avant de lui faire confiance
  • Le fond damier aide à repérer la transparence involontaire ; basculez sur blanc ou noir pour voir le rendu sur différentes pages
  • L'export PNG est rendu en résolution 2× ; utilisez l'export SVG pour préserver la qualité vectorielle
  • Les références externes (href http://) ne se chargeront pas dans l'aperçu isolé — c'est intentionnel
← Retour a tous les outils