Visionneuse et Rendu SVG
Collez le code SVG et prévisualisez l'image rendue.
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
- Collez ou saisissez votre balisage dans le champ SVG source. Un cercle d’exemple est chargé par défaut.
- Regardez le panneau Preview (sanitized) se mettre à jour au fil de la saisie — aucun bouton à presser.
- Modifiez des attributs comme
fill,widthouviewBoxet voyez l’effet immédiatement.
Exemples
- Ajuster la couleur d’une icône : changez
fill="#0060c0"enfill="#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.