Visionneuse SVG
Éditeur de code SVG et aperçu en ligne
Qu'est-ce que la Visionneuse SVG ?
La Visionneuse SVG est un outil en ligne d'édition de code SVG et d'aperçu en temps réel. Elle permet d'écrire ou de coller directement du code SVG et de voir le résultat rendu instantanément. SVG (Scalable Vector Graphics) est un format d'image vectorielle basé sur XML, largement utilisé dans la conception web, la création d'icônes et la visualisation de données.
Cet outil prend en charge l'aperçu en temps réel, la visualisation du code source, le téléchargement de fichiers SVG et plus encore.
Avant publication ou dépôt, ouvrez le fichier obtenu et vérifiez lisibilité, recadrage, résolution, ordre et contenu manquant.
Mode d'emploi
Mode d'emploi
- Saisissez ou collez le code SVG dans l'éditeur de gauche.
- Le panneau de droite affiche le rendu SVG en temps réel.
- Cliquez sur le bouton « Source » pour afficher le code SVG mis en forme.
- Cliquez sur le bouton « Télécharger » pour enregistrer le SVG dans un fichier.
- Cliquez sur le bouton « Copier SVG » pour copier le code dans le presse-papiers.
Sécurité SVG
- Ne collez que des SVG provenant de sources fiables : un SVG peut contenir des scripts, des références externes ou des styles inattendus.
- Avant de télécharger ou d'intégrer le SVG, vérifiez le viewBox, les dimensions, les remplissages, les contours et le rendu du texte à la taille cible.
Cas d’utilisation
Principe technique
Le source SVG est analysé avec new DOMParser().parseFromString(source, 'image/svg+xml'), qui renvoie un Document construit selon les règles XML plutôt que l'analyseur tolérant d'HTML. L'analyseur vérifie le caractère bien formé, affiche un nœud <parsererror> en cas de balisage invalide et expose l'arborescence SVG aux scripts et au CSS exactement comme le reste du DOM. Des éléments comme <path>, <circle>, <rect>, <g>, <text>, <defs>, <linearGradient> et <filter> sont des nœuds de premier ordre avec leurs propres attributs et cibles d'événements. Le système de coordonnées est régi par l'attribut viewBox. viewBox="minX minY width height" définit l'espace de coordonnées interne, et preserveAspectRatio (par défaut xMidYMid meet) décide comment cet espace est mappé dans le viewport rendu : meet préserve l'intégralité du viewBox en ajoutant du letterboxing, slice remplit le viewport en recadrant, et none étire de manière non uniforme. Les commandes de chemin dans d utilisent M (moveTo), L (lineTo), C (bézier cubique), Q (quadratique), A (arc elliptique) et Z (closepath) ; chaque commande a une forme absolue en majuscule et une forme relative en minuscule. La sécurité SVG nécessite une gestion explicite car le format est exécutable : <script>, foreignObject contenant du HTML, xlink:href vers des URL externes, onload et autres gestionnaires d'événements peuvent tous exécuter du JavaScript dans le contexte de la page si le SVG est injecté en ligne. DOMPurify avec le profil SVG ou un assainisseur côté serveur est l'atténuation standard lors de l'acceptation de SVG tiers. La conversion en PNG se fait en dessinant le SVG (chargé en tant que HTMLImageElement depuis une URL Blob) sur un canvas avec drawImage, puis en appelant canvas.toBlob('image/png') pour le téléchargement.
- Analyseur : new DOMParser().parseFromString(source, 'image/svg+xml') renvoie un Document XML strict avec un nœud <parsererror> en cas d'échec
- viewBox : "minX minY width height" définit l'espace de coordonnées interne ; preserveAspectRatio xMidYMid meet/slice contrôle l'ajustement vs le recadrage
- Commandes de chemin : M moveTo, L lineTo, C bézier cubique, Q quadratique, A arc, Z closepath ; majuscule = absolue, minuscule = relative
- Surface de sécurité : <script> en ligne, foreignObject, xlink:href vers des URL distantes et les gestionnaires onload/onclick s'exécutent en tant que JavaScript
- Assainissement : DOMPurify avec USE_PROFILES: { svg: true } supprime les scripts et gestionnaires d'événements avant l'insertion de SVG tiers
- Export PNG : charger le SVG dans un HTMLImageElement via une URL Blob, drawImage sur un canvas, canvas.toBlob('image/png') pour le téléchargement
- Compatibilité navigateur : SVG 1.1 dans tous les navigateurs modernes depuis 2011 ; les fonctionnalités SVG 2 (améliorations du texte sur chemin) sont partiellement supportées
Exemples
Cercle
<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg">
<circle cx="50" cy="50" r="40" fill="#2563eb" />
</svg>Rectangle
<svg width="120" height="80" xmlns="http://www.w3.org/2000/svg">
<rect x="10" y="10" width="100" height="60" rx="8" fill="#10b981" />
</svg>Étoile
<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg">
<polygon points="50,5 61,35 95,35 68,57 79,91 50,70 21,91 32,57 5,35 39,35" fill="#f59e0b" />
</svg>FAQ
Que fait la visionneuse ?
Elle rend le balisage SVG collé, permet le zoom et le panoramique, affiche le code source avec coloration syntaxique, et indique les dimensions et le viewBox de l'image. Utile pour inspecter du SVG tiers, déboguer des données de chemin, et prévisualiser des icônes avant de les ajouter à un projet.
Le SVG est-il envoyé ?
Non. La page analyse et rend le SVG localement dans votre navigateur : le SVG n'est que du balisage, le navigateur sait déjà l'afficher. Le code collé ne traverse jamais le réseau.
Pourquoi mon SVG s'affiche-t-il différemment ici et dans mon logiciel de design ?
Le rendu SVG dépend de l'agent utilisateur. Les navigateurs, Figma, Illustrator et Inkscape interprètent différemment certains cas limites (rendu du texte, effets de filtre, dégradés de maillage, clip-paths). La visionneuse montre ce que fait le navigateur, c'est-à-dire ce que vos utilisateurs verront en HTML.
Puis-je éditer le SVG ici ?
Vous pouvez éditer la source à gauche et relancer le rendu. Pour de l'édition visuelle (déplacer des points, modifier des chemins), utilisez un vrai éditeur SVG comme Inkscape, Figma ou Boxy SVG. Cette page est une visionneuse plus quelques retouches textuelles.
Comment intégrer le SVG dans mon projet ?
Copiez la source. La plupart des frameworks front-end acceptent le SVG inline directement dans JSX/HTML. Pour l'utiliser en arrière-plan, placez-le dans votre dossier d'assets et référencez-le avec url(...). Pour en faire une police d'icônes, faites-le passer par une étape de build comme svgo plus un générateur de sprites.
Pourquoi mon SVG est-il énorme ?
Beaucoup d'exports SVG incluent des métadonnées d'éditeur (XMP d'Adobe Illustrator, espaces de noms :inkscape: d'Inkscape), des defs inutilisés, des commentaires et des données de chemin verbeuses. Faites-les passer par SVGO (en ligne ou CLI) pour les retirer : généralement 30 à 70 % plus petit sans changement visuel.
Les ressources externes sont-elles chargées ?
La plupart des visionneuses bloquent les chargements externes (pas de récupération d'URL <image href> ou <use href> externes) par sécurité. Intégrez les bitmaps référencés sous forme d'URI data: et convertissez les <use> avec href externe en copies inline si votre SVG en dépend.