Aperçu / Éditeur SVG

Comment fonctionne l’aperçu / éditeur SVG

Ce que fait l’outil

L’aperçu / éditeur SVG rend le balisage SVG en direct pendant que vous l’éditez et extrait des métadonnées (largeur, hauteur, viewBox, nombre d’éléments) pour une inspection rapide. Un bouton ajoute un arrière-plan en damier afin de voir clairement les zones transparentes. L’outil produit aussi une data URI encodée en URL, utilisable directement dans CSS background-image ou dans des attributs HTML src.

Cas d’usage courants pour les développeurs

Les designers d’icônes testent les calculs de viewBox et les largeurs de trait à différentes tailles. Les développeurs frontend vérifient qu’une icône SVG modifiée à la main s’affiche toujours correctement après optimisation (manuelle ou via SVGO). Les développeurs e-mail génèrent des versions compactes en data URI de logos de marque pour les intégrer inline dans du HTML. Les enseignants montrent comment des attributs comme preserveAspectRatio et overflow affectent le rendu.

Formats de données, types ou variantes

L’entrée est du balisage XML SVG brut. La sortie est le même SVG rendu dans une iframe isolée, plus une data URI encodée en URL (data:image/svg+xml;charset=utf-8,…). La métrique de nombre d’éléments compte chaque balise ouvrante (y compris defs, g, gradients et autres éléments imbriqués similaires), donnant une idée approximative de la complexité. Les valeurs d’attribut extraites sont affichées sous forme brute.

Pièges courants et cas limites

Les ressources externes référencées par des éléments `use` ou `image` avec href ne se chargeront pas dans l’iframe isolée. Le JavaScript inline dans des éléments script est bloqué par le sandbox — les animations doivent s’appuyer sur SMIL ou des keyframes CSS. Les SVG qui dépendent d’une police spécifique non installée sur le système basculeront sur une police par défaut ; intégrez les polices ou utilisez des polices système pour les aperçus.

Quand utiliser cet outil plutôt que du code

Utilisez l’outil dans le navigateur pour du design d’icônes ponctuel, du débogage ou la génération de data URI. Pour des assets de production, passez les SVG dans SVGO avec une configuration ajustée pour supprimer les métadonnées et minifier le balisage, et utilisez un système de sprites ou une intégration correcte au bundler pour charger les icônes dans votre app plutôt que d’intégrer des data URI partout.