Visionneuse SVG

Entrée SVG
0 caractères
Aperçu local, ne collez pas de contenu script de sources non fiables

Visionneuse SVG en ligne. Collez du code SVG pour prévisualiser instantanément des graphiques vectoriels rendus, avec copie et téléchargement de fichiers .svg. Traitement local et sécurisé.

Recommandations connexes

Convertir Image

Compresser des images

Redimensionner une image

Recadrer Image

Editeur d'image

Generateur ICO

Qu'est-ce que SVG ?

SVG (Scalable Vector Graphics) est un format d'image basé sur XML pour décrire des formes géométriques. Contrairement à JPG et PNG, qui sont des images matricielles (matrices de pixels), SVG utilise des balises comme <rect>, <circle> et <path> pour décrire des tracés mathématiques de formes, ce qui signifie qu'elles restent nettes à toute taille sans pixellisation.

**Quand utiliser SVG ?** Logos, icônes UI, organigrammes, marqueurs de carte, graphiques, décorations animées et illustrations réutilisables : tout scénario exigeant netteté, personnalisation des couleurs, évolutivité ou contrôle CSS est un choix naturel pour SVG.

**SVG vs Canvas :** Canvas est une API de dessin impérative où la sortie devient des pixels; SVG est constitué de nœuds DOM déclaratifs dont vous pouvez modifier les attributs, les styles CSS et attacher des événements à tout moment. Utilisez SVG pour les icônes, éléments UI et graphiques interactifs; utilisez Canvas pour les jeux, particules et pixel art.

**Composants courants :** Élément racine &lt;svg&gt;, groupes &lt;g&gt;, tracés &lt;path&gt; (le plus utilisé avec l'attribut d), dégradés (&lt;linearGradient&gt;/&lt;radialGradient&gt;), filtres (&lt;filter&gt;) et animations (SMIL/CSS/JS).

**Comment le prévisualiser ?** Collez votre code source SVG dans l'éditeur de cette page et voyez le rendu en direct à droite. La disposition à panneaux divisés ajustable vous aide à vérifier en quelques secondes que votre code SVG est correct.

Cas d'utilisation

  • Développeurs frontend prévisualisant rapidement le rendu de code d'icônes SVG
  • Vérifier l'affichage SVG après copie depuis Figma, Sketch ou d'autres outils de design
  • Prévisualiser les changements en direct pendant le débogage de tracés, couleurs ou attributs viewBox
  • Examiner et valider le code SVG avant de l'intégrer dans le code du projet

Comment utiliser

  1. Collez le code source SVG dans l'éditeur gauche, ou cliquez sur "Charger un exemple" pour voir une démo
  2. Le panneau droit rend instantanément le graphique vectoriel — modifiez le code pour voir les mises à jour en direct
  3. Quand satisfait, cliquez sur copier pour copier le code, ou téléchargez en .svg avec un nom personnalisé

Fonctionnalités

  • Aperçu en direct : Collez ou modifiez le code SVG pour rendre instantanément des graphiques vectoriels, tel quel
  • Mise en page divisée : Panneaux côte à côte redimensionnables par glisser sur bureau, basculement par onglets sur mobile
  • Export en un clic : Copiez le code SVG au presse-papiers ou téléchargez en .svg avec nom personnalisé
  • Traitement local : Toute l'analyse et le rendu se font dans le navigateur, votre code ne quitte jamais votre appareil
  • Fond transparent : Le fond en damier montre clairement les zones transparentes et les détails des bords
  • Compteur de caractères : Compteur en temps réel avec exemple intégré pour commencer rapidement

FAQ

Comment prévisualiser du code SVG en ligne ?

Collez votre code source SVG dans le panneau d'édition gauche, et le panneau droit rendra instantanément le graphique vectoriel. Vous pouvez modifier le code directement dans l'éditeur avec des mises à jour en direct, ce qui facilite le débogage d'icônes frontend.

Comment télécharger et sauvegarder le SVG prévisualisé ?

Cliquez sur le bouton de téléchargement dans le coin supérieur droit du panneau d'aperçu. Vous pouvez personnaliser le nom du fichier avant de l'enregistrer en fichier .svg standard. Vous pouvez aussi cliquer sur le bouton de copie pour copier le code SVG dans le presse-papiers.

Mon code SVG est-il téléversé sur un serveur ? Est-ce sécurisé ?

Non. Toute l'analyse et le rendu SVG se font localement dans votre navigateur. Votre code SVG n'est jamais téléversé sur aucun serveur : il est traité entièrement sur votre appareil et supprimé quand vous partez.

Prend-il en charge le code SVG copié depuis des logiciels de design ?

Oui. Le code SVG copié depuis Figma, Sketch, Adobe Illustrator ou d'autres outils de design peut être collé directement pour prévisualisation. Nous recommandons de vérifier d'abord le rendu avant de l'intégrer dans votre projet.

Pourquoi mon SVG ne s'affiche pas ? Causes courantes ?

Problèmes courants : ① Absence de déclaration d'espace de noms xmlns="http://www.w3.org/2000/svg"; ② Balises non fermées dans le code; ③ Caractères spéciaux mal échappés; ④ Erreurs de syntaxe dans le SVG lui-même. Vérifiez ces points.

Puis-je personnaliser le nom du fichier SVG téléchargé ?

Oui. Après avoir cliqué sur le bouton de téléchargement, un champ de saisie de nom de fichier apparaît. Vous pouvez personnaliser le nom (par défaut image.svg), puis appuyez sur Entrée ou cliquez sur Confirmer pour télécharger. L'outil ajoute automatiquement l'extension .svg si elle manque.

Glossaire

viewBox
Le système de coordonnées interne SVG au format "x y width height". Le commun "0 0 24 24" signifie 24 unités de large et de haut. La taille d'affichage réelle d'un SVG est contrôlée par les attributs width/height ou un CSS externe.
Espace de noms XML (namespace)
SVG doit déclarer xmlns="http://www.w3.org/2000/svg" pour que les navigateurs le reconnaissent correctement comme document SVG. L'absence d'espace de noms est la raison la plus courante pour laquelle SVG ne s'affiche pas en HTML.MDN - Espace de noms SVG
Attribut d de path
L'ensemble des commandes de tracé, composé de lettres comme M/L/C/Q/H/V/Z plus des coordonnées. M=Déplacer vers, L=Ligne vers, C=Bézier cubique, Q=Bézier quadratique, Z=Fermer le tracé. Les icônes complexes s'expriment souvent avec un seul élément path et son attribut d.
currentColor
Un mot-clé CSS faisant référence à la propriété color de l'élément actuel. Définir fill ou stroke sur currentColor dans SVG permet de changer les couleurs d'icônes via des changements de couleur CSS externes, un motif courant dans les systèmes de design.

Référence rapide des éléments SVG courants

ÉlémentTypeUsage
<svg>RacineConteneur de tout le contenu SVG, obligatoire
<rect>Forme basiqueRectangles, rectangles arrondis
<circle> / <ellipse>Forme basiqueCercles / ellipses
<line> / <polyline>Forme basiqueLignes / polylignes
<polygon> / <path>CheminPolygones / courbes arbitraires (attribut d)
<text> / <tspan>TexteTexte intégré dans SVG
<g>GroupeGrouper des éléments pour transformations unifiées
<defs> / <symbol>DéfinitionFormes et dégradés réutilisables
<linearGradient> / <radialGradient>DégradéRemplissages dégradé linéaire / radial
<use>RéférenceRéférencer des éléments de defs
<filter>FiltreEffets avancés comme flou, ombre

Comparaison SVG vs formats matriciels

DimensionSVG (Vectoriel)PNG (Matriciel)JPG (Matriciel)
CompositionXML décrit des tracés géométriquesMatrice de pixelsMatrice de pixels (compression DCT)
Mise à l'échelleReste net à toute tailleSe pixellise en agrandissantSe pixellise avec artéfacts visibles
Taille du fichierVarie selon complexité, logos généralement < 10KBMoyen (sans perte)Plus petit (avec perte)
Transparence✅✅❌
Animation✅ SMIL / CSS / JS❌ (nécessite APNG)❌
Contrôle couleur CSS✅ currentColor / variables fill❌❌
Idéal pourIcônes, logos, vecteurs UIRessources transparentes, capturesPhotos, grands dégradés

Authoritative References