Qu'est-ce que Éditeur SVG ?

Dessinez des formes, des tracés et du texte sur un canevas visuel, ajustez les couleurs de contour et de remplissage, et exportez le code SVG. Aucun logiciel de bureau nécessaire.

Les outils comprennent rectangle, ellipse, ligne, tracé libre, texte et une bibliothèque de formes (triangle, hexagone, étoile, flèche). Le texte se modifie directement sur le canvas — cliquez sur l'outil texte et tapez, ou double-cliquez sur un texte existant pour le renommer. Chaque élément possède son propre remplissage, sa couleur et son épaisseur de contour, et son opacité, et vous pouvez saisir les valeurs exactes X, Y, largeur et hauteur dans le panneau de propriétés. Importez un SVG existant en un clic, alignez le dessin sur une grille de 10 px et annulez ou rétablissez sur cinquante étapes. Exportez le résultat en SVG brut pour HTML et JSX React, ou en PNG rasterisé pour les supports qui n'acceptent pas le SVG.

Comment utiliser

1. Sélectionnez un outil de dessin (rectangle, ellipse, ligne, tracé ou texte) et dessinez sur le canevas.
2. Sélectionnez des éléments pour les déplacer, redimensionner, pivoter ou modifier leur remplissage, contour et opacité.
3. Exportez le graphique terminé sous forme de fichier SVG, ou copiez le code SVG brut.

Quand l'utiliser

• Dessiner un logo, un séparateur ou une forme d'en-tête ponctuelle pour une landing page.
• Retoucher à la main un SVG existant sans ouvrir une application bureau lourde.
• Enseigner les bases du SVG en montrant le code se mettre à jour pendant le dessin.

Résultat

Un développeur web a besoin d'un simple symbole de logo — deux cercles superposés avec un remplissage dégradé. Il dessine les formes sur le canevas, applique les couleurs et copie le code SVG directement dans son HTML.

FAQ

Le SVG copié peut-il être collé tel quel dans mon JSX React ?

Oui, à un détail près : les attributs comme stroke-width et stop-color doivent passer en camelCase (strokeWidth, stopColor) dans le JSX. Le SVG copié ici est en kebab-case, parfait pour le HTML brut et facile à convertir avec un rechercher-remplacer.

Puis-je importer un SVG existant pour continuer à l'éditer ?

Oui — utilisez le bouton Importer un SVG pour charger n'importe quel fichier .svg depuis votre appareil. Les rectangles, ellipses, cercles, lignes, tracés et textes deviennent des éléments modifiables sur le canvas. Les dégradés, filtres et groupes imbriqués sont ignorés car l'éditeur stocke chaque forme comme une primitive.

Pourquoi mon SVG s'affiche-t-il différemment dans Illustrator ou Figma ?

Chaque moteur gère l'alignement du contour, les dégradés et les filtres avec de légères différences. La sortie ici correspond à ce qu'affiche tout navigateur récent, conforme à la spécification ; l'écart vient en général de l'interprétation de l'autre logiciel.

L'outil prend-il en charge les courbes de Bézier avec poignées ?

L'outil tracé libre enregistre les points que vous dessinez et les exporte sous forme de polyligne. Pour de vraies courbes Bézier cubiques, exportez le SVG et modifiez l'attribut d à la main, ou ouvrez le résultat dans un outil vectoriel qui expose les poignées.

Combien d'éléments puis-je ajouter avant que le canvas ne ralentisse ?

Quelques centaines de formes passent sans souci sur tout appareil récent. Au-delà du millier (cartes complexes ou grilles d'icônes), ça commence à laguer car chaque glisser redessine tout le canvas. Regroupez les tracés en paths composés si vous atteignez ce stade.

Outils similaires