Visionneuse et éditeur SVG en ligne : code, aperçu, paths | We.Inc
Collez ou ouvrez un SVG pour le voir à côté de son code. Modifiez-le en direct, vérifiez-le sur fond clair, sombre ou en damier, inspectez les commandes de path, nettoyez-le et exportez-le en PNG ou en composant React.
Visionneuse et éditeur SVG
Collez du code SVG ou ouvrez un fichier .svg et l'image apparaît à côté de son code. Modifiez le code et l'aperçu se redessine pendant que vous tapez. Changez le fond pour vérifier les zones transparentes, zoomez, listez chaque commande de path, retirez le superflu laissé par les éditeurs, puis téléchargez le résultat en SVG, en PNG ou en composant React.
Ce que vous pouvez exporter
Format
Usage
SVG (nettoyé)
Sites web, icônes, logos ; le fichier le plus léger
PNG de 1x à 4x
Les endroits qui n'acceptent pas le SVG, comme certains clients de messagerie et les publications sur les réseaux sociaux
Composant React (JSX)
Utiliser le graphique en ligne dans un projet React ou Next.js
Une vue du code et un aperçu en direct côte à côte. Rien n'est envoyé : le fichier est lu et dessiné par votre propre navigateur, et l'aperçu est affiché sous forme d'image, donc aucun script contenu dans le SVG ne peut s'exécuter.
Collez du balisage SVG dans la zone de code, déposez-y un fichier ou utilisez Ouvrir un fichier. Un exemple est chargé pour que vous puissiez essayer les outils tout de suite.
Modifiez le code. L'aperçu se met à jour pendant que vous tapez et vous signale quand le balisage est cassé.
Passez le fond de l'aperçu en blanc, sombre ou damier, et zoomez de 25% à 800% pour vérifier les petits détails.
Ouvrez l'inspecteur de paths pour voir les commandes de chaque path en clair, comme Déplacer vers, Ligne vers et Courbe cubique, avec leurs valeurs.
Cliquez sur Nettoyer pour supprimer les commentaires, les métadonnées et les attributs d'éditeur et arrondir les longues décimales, puis téléchargez en SVG ou PNG, ou copiez en JSX.
Gardez l'attribut viewBox et retirez width et height fixes si vous voulez que le SVG s'adapte à son conteneur en CSS.
Mettez fill ou stroke à currentColor dans les icônes pour qu'elles prennent la couleur de texte de leur contexte.
Deux décimales suffisent pour presque toutes les icônes dessinées sur une grille de 24 ou 100 unités. Plus de précision ajoute surtout des octets.
Ne collez jamais un SVG d'une source non fiable directement dans le HTML de votre page. Un SVG en ligne peut contenir des scripts ; chargez-le avec une balise img ou nettoyez-le d'abord.
Questions fréquentes
Comment ouvrir un fichier SVG ?
Tout navigateur moderne ouvre directement les fichiers SVG, mais il n'affiche que l'image. Pour voir le code et l'image ensemble, ouvrez le fichier dans cette visionneuse avec le bouton Ouvrir un fichier ou faites-le glisser sur la zone de code.
Mon SVG est-il envoyé quelque part ?
Non. Le fichier est lu par votre navigateur et dessiné localement. Rien de ce que vous ouvrez ou tapez ici n'est envoyé à un serveur.
Pourquoi mon SVG n'affiche-t-il rien dans l'aperçu ?
Les causes les plus fréquentes sont un attribut xmlns="http://www.w3.org/2000/svg" manquant sur l'élément svg, un viewBox qui pointe à côté du dessin, ou des formes blanches sur fond blanc. Essayez le fond en damier et lisez la ligne d'erreur sous l'aperçu.
Que supprime l'étape de nettoyage ?
Les commentaires, la déclaration XML, le doctype, les blocs de métadonnées, les attributs propres aux éditeurs comme Inkscape, Sketch et Serif, et les groupes vides. Elle arrondit aussi les décimales à la précision choisie. Elle ne fusionne pas les paths et ne modifie pas les formes, le dessin devrait donc rester identique.
Comment utiliser un SVG dans React ?
Copiez le résultat JSX. Il convertit les attributs en noms React, comme stroke-width en strokeWidth et class en className, transforme les chaînes style en objets et transmet à l'élément svg toutes les props que vous donnez au composant.
Lire du code SVG
Un fichier SVG est du texte qui décrit des formes. L'élément svg définit un système de coordonnées avec son viewBox : viewBox="0 0 24 24" signifie que le dessin utilise une grille de 24 sur 24 unités, quelle que soit sa taille d'affichage. À l'intérieur, des éléments comme rect, circle et path dessinent sur cette grille avec des remplissages et des traits.
La plupart des icônes sont faites presque entièrement d'éléments path. L'attribut d d'un path est une liste de commandes de dessin : M déplace le crayon, L trace une ligne droite, C trace une courbe cubique, A trace un arc et Z ferme la forme. Les majuscules utilisent des coordonnées absolues ; les minuscules sont relatives au dernier point. L'inspecteur de cette page détaille chacune d'elles.
Pourquoi les SVG exportés sont plus lourds que nécessaire
Les outils de design enregistrent des informations qui les aident à rouvrir le fichier : noms de calques, réglages de l'éditeur, positions des repères et coordonnées avec six décimales ou plus. Les navigateurs ignorent tout cela. Le supprimer et arrondir les nombres réduit souvent nettement la taille du fichier, ce qui compte quand la même icône apparaît sur chaque page.
Cette page fait un nettoyage prudent qui ne devrait jamais changer l'apparence de l'image. Pour des changements plus profonds, comme la fusion de paths, l'outil d'optimisation SVG va plus loin.
Déplacer vers
Ligne vers
Ligne horizontale
Ligne verticale
Courbe cubique
Cubique lissée
Courbe quadratique
Quadratique lissée
Arc
Fermer le path
un élément <script>
un attribut d'événement on…
un lien javascript:
un <foreignObject> contenant du HTML
Blanc
Sombre
Damier
Le balisage n'est pas du XML valide.
L'élément racine n'est pas <svg>.
Collez un balisage qui commence par <svg et se termine par </svg>.
Ce fichier dépasse 5 MB. Ouvrez un SVG plus petit.
{name} ouvert.
L'aperçu n'est pas chargé, il n'y a donc encore rien à exporter.
PNG de {w} × {h} enregistré.
Code
Ouvrir un fichier
Exemple
Code SVG
{bytes} octets · {n} path
{bytes} octets · {n} paths
Ce SVG contient {parts}. L'aperçu ici est sans danger, mais ne le collez pas dans une page en HTML en ligne sans retirer cet élément.
Aperçu
Zoom
Aperçu de votre SVG
Rendu par votre navigateur. Les scripts contenus dans le SVG ne s'exécutent pas ici.
Inspecteur de paths
Aucun élément path dans ce SVG.
Path {n}
Commandes du path {n}
Commande
Valeurs
(relative)
Choisissez un path pour le mettre en évidence dans l'aperçu et lister ses commandes.