appuyez sur ⌘K pour changer d’outil
IMAGE

Visionneuse et Rendu SVG

Collez le code SVG et prévisualisez l'image rendue.

local
svg-viewer
§01 À PROPOS DE CET OUTIL

Présentation

Les fichiers SVG sont des documents XML, ce qui les rend faciles à éditer à la main mais malaisés à inspecter — vous ne pouvez pas voir le résultat sans le rendre. Cet outil restitue instantanément le balisage SVG collé sur un fond en damier, afin que les zones transparentes soient visibles. Avant le rendu, le balisage passe par DOMPurify avec les profils svg et svgFilters, qui retirent les éléments <script> et les attributs gestionnaires d’événements on*. Tout s’exécute dans votre navigateur.

Utilisation

  1. Collez ou saisissez votre balisage dans le champ SVG source. Un cercle d’exemple est chargé par défaut.
  2. Regardez le panneau Preview (sanitized) se mettre à jour au fil de la saisie — aucun bouton à presser.
  3. Modifiez des attributs comme fill, width ou viewBox et voyez l’effet immédiatement.

Exemples

  • Ajuster la couleur d’une icône : changez fill="#0060c0" en fill="#e0403f" et confirmez le résultat avant de valider.
  • Déboguer un tracé : collez un <path d="…"> exporté d’un outil de design pour vérifier que la géométrie correspond à vos attentes.
  • Vérifier un souci d’assainissement : collez un SVG contenant <script> et confirmez qu’il se rend sans le script.

Remarques

Comme l’assainissement retire le scripting, une animation pilotée par SMIL ou CSS peut se rendre mais les comportements interactifs, non. Les références externes (images distantes, polices) peuvent aussi être bloquées par l’assainisseur ou par votre navigateur.

FAQ
Mon SVG est-il téléversé sur un serveur ?
Non. Le balisage est assaini et rendu entièrement dans votre navigateur. Rien ne quitte votre machine.
Pourquoi mon SVG semble-t-il différent du fichier d'origine ?
L'aperçu est assaini par DOMPurify avec ses profils SVG et filtres SVG : les éléments script, les attributs gestionnaires d'événements et les autres contenus non SVG sont retirés avant le rendu, si bien que les parties interactives ou scriptées n'apparaîtront pas.
Est-il prudent de prévisualiser des fichiers SVG de source non fiable ?
Plus prudent que de les ouvrir directement, car DOMPurify supprime les scripts et les gestionnaires d'événements avant que le balisage n'atteigne le DOM. Manipulez néanmoins les fichiers non fiables avec précaution dans d'autres contextes — un SVG brut ouvert dans un onglet de navigateur peut exécuter du JavaScript.