Éditeur SVG gratuit en ligne — formes, texte et téléchargement SVG
Dessinez formes, flèches, traits à main levée et texte sur un canevas, puis téléchargez un SVG propre ou un PNG. Gratuit, dans votre navigateur, sans inscription.
Cliquez sur une forme pour la sélectionner, faites-la glisser pour la déplacer, faites glisser une poignée pour la redimensionner. Les touches fléchées la décalent (Maj pour 10 px).
Raccourcis clavier
- V Sélectionner / déplacer
- R Rectangle
- E Ellipse
- G Triangle
- S Étoile
- L Ligne
- A Flèche
- P Crayon à main levée
- T Texte
- Ctrl/⌘ Z annuler, Shift pour rétablir
- Ctrl/⌘ D dupliquer
- Del supprimer la sélection
- Flèches décaler de 1 px, Shift de 10 px
- Shift pendant le dessin : carré, cercle, ligne à 45°
- Esc désélectionner ou annuler un glissement
Tout se passe dans votre navigateur : rien n’est envoyé en ligne, et votre dessin est enregistré automatiquement en local pour qu’une actualisation ne le fasse pas disparaître. Besoin d’un logo, d’un schéma illustré ou d’une identité de marque complète plutôt que d’un croquis rapide ? Découvrir d’autres outils gratuits.
Un problème, ou quelque chose à améliorer ? Nous lisons chaque message et corrigeons vite.
Cet éditeur SVG gratuit vous permet de dessiner un graphique vectoriel dans votre navigateur et de le télécharger en SVG propre ou en PNG, sans compte et sans rien envoyer. Choisissez un outil de forme, faites glisser sur le canevas, réglez le remplissage et le contour, ajoutez une flèche et une étiquette : le fichier est prêt. Il est conçu pour le travail de trente secondes : un schéma pour une diapositive, une icône simple, un logo provisoire, un encadré annoté pour une documentation.
Ce n’est volontairement pas un clone d’Illustrator. Pas de panneau de calques, d’opérations booléennes ni d’édition de nœuds de Bézier, car c’est précisément ce qui rend les suites vectorielles complètes longues à apprendre. Vous obtenez à la place tous les outils dont un dessin rapide a besoin, des raccourcis clavier pour chacun, une fonction Annuler qui marche comme on s’y attend, et un export qui ne contient que vos formes : pas de métadonnées d’éditeur, pas de polices intégrées, pas de surprise quand vous l’ouvrez ailleurs.
Mode d’emploi
- Choisissez une taille de canevas parmi les préréglages (icône, publication carrée, Full HD) ou saisissez la vôtre, et choisissez un fond transparent ou coloré.
- Sélectionnez un outil : rectangle (R), ellipse (E), triangle, étoile, ligne (L), flèche (A), crayon à main levée (P) ou texte (T). Faites glisser sur le canevas pour dessiner ; maintenez Maj pour un carré, un cercle ou une ligne à 45° parfaits.
- Cliquez sur une forme avec l’outil de sélection (V) pour la déplacer, faites glisser une poignée pour la redimensionner, et modifiez son remplissage, son contour, son opacité ou son rayon de coin dans le panneau. Les flèches du clavier déplacent de 1 px, avec Maj de 10 px.
- Dupliquez avec Ctrl/⌘ D, supprimez avec Suppr, réordonnez avec les boutons Premier plan / Arrière-plan, et annulez tout avec Ctrl/⌘ Z.
- Télécharger le SVG pour un fichier redimensionnable, Télécharger le PNG (1× à 3×) pour une image matricielle, ou Copier le code pour coller le SVG directement dans du HTML. Votre dessin est enregistré automatiquement dans ce navigateur si vous voulez y revenir.
Questions fréquentes
Cet éditeur SVG est-il vraiment gratuit, sans inscription ?
Oui. Pas de compte, pas de filigrane, pas de limite d’export, pas de vente additionnelle. L’éditeur tourne entièrement dans votre navigateur ; vous pouvez vous déconnecter d’Internet une fois la page chargée, il continue de fonctionner. Nous créons ces outils parce qu’ils attirent du monde sur le site, et certains visiteurs ont ensuite besoin du travail de design, de web ou de logiciel que nous réalisons pour nos clients.
Que puis-je dessiner avec ?
Des rectangles (à coins arrondis), ellipses et cercles, triangles, étoiles à cinq branches, lignes droites, flèches, traits de crayon à main levée et du texte dans trois familles de polices. Chaque forme a son propre remplissage, contour, épaisseur de contour et opacité, peut être déplacée, redimensionnée, dupliquée et réordonnée, et s’aligne sur une grille de 10 px si vous le souhaitez. Cela couvre les schémas, les icônes simples, les annotations et les logos provisoires. Cela ne couvre pas l’édition de nœuds de Bézier, les dégradés, les calques ni les opérations booléennes ; pour cela, il vous faut Inkscape ou Figma.
Puis-je ouvrir et modifier un fichier SVG existant ?
En partie, et l’éditeur vous dit exactement dans quelle mesure. Ouvrir un SVG importe les rectangles, cercles, ellipses, lignes, polylignes, polygones, chemins et textes, en conservant leurs couleurs et positions. Tout ce qu’il ne peut pas représenter fidèlement est ignoré plutôt que déformé, et un message indique ce qui a été ignoré : éléments avec un attribut transform, groupes avec transformations, références <use> et <image>, remplissages en dégradé et feuilles de style CSS. Les icônes et schémas simples s’ouvrent proprement ; une illustration complexe exportée d’Illustrator ne s’ouvrira généralement pas correctement, et nous préférons le dire plutôt que de faire semblant.
Faut-il télécharger en SVG ou en PNG ?
En SVG si le graphique doit être redimensionné, modifié plus tard ou utilisé sur un site web : il reste net à toutes les tailles, est généralement bien plus léger qu’un PNG et peut être stylé en CSS. En PNG si vous avez besoin d’une image matricielle fixe : pour la coller dans un document ou une diapositive qui gère mal le SVG, l’envoyer sur une plateforme qui refuse le SVG, ou la transmettre à quelqu’un qui veut juste une image. Les options 2× et 3× donnent un PNG net pour les écrans haute densité. Dans le doute, téléchargez les deux ; c’est gratuit.
Mon dessin est-il envoyé quelque part ?
Non. Le dessin, la modification et l’export se font dans votre navigateur avec les API SVG et Canvas standard. Rien n’est envoyé à notre serveur. Le dessin est enregistré automatiquement dans le stockage local de votre navigateur pour qu’une actualisation ou une fermeture d’onglet accidentelle ne le fasse pas perdre ; cette copie reste sur votre appareil et est effacée quand vous cliquez sur Nouveau.
Puis-je utiliser les fichiers SVG à des fins commerciales ?
Oui. Ce que vous dessinez vous appartient, sans licence ni attribution requise, pour un usage personnel ou commercial. Le fichier exporté ne contient que vos formes et du balisage SVG standard : il n’y a rien de nous à licencier.
Pourquoi l’export est-il légèrement différent du canevas ?
L’éditeur dessine avec le même SVG que celui que votre navigateur affichera : les formes correspondent donc exactement. Deux choses peuvent différer : la grille, propre à l’éditeur et jamais exportée, et le texte, qui utilise des familles de polices génériques (Arial, Georgia, Courier New) pour que le fichier s’affiche de la même façon sur toutes les machines sans intégrer de polices. Si une visionneuse n’a pas l’une de ces polices, elle la remplace par un équivalent proche, ce qui peut décaler la largeur du texte de quelques pixels.
SVG ou PNG : ce que la différence signifie vraiment
Un SVG est un fichier texte qui décrit des formes : un rectangle à telles coordonnées, de telle largeur, de telle couleur. Un PNG est une grille de pixels. Cette seule différence explique toutes les conséquences pratiques. Le SVG s’adapte à toutes les tailles sans flou, ne pèse souvent que quelques centaines d’octets pour un schéma simple, peut être modifié ensuite et recoloré en CSS sur une page web. Le PNG est figé à la taille exportée, s’alourdit à mesure que l’image grandit et ne peut être modifié qu’au niveau des pixels.
Le SVG est le bon choix par défaut pour les logos, icônes, schémas et tout ce qui va sur un site web. Le PNG convient quand la destination ne gère pas le SVG (de nombreux clients de messagerie, certains outils de documents, la plupart des réseaux sociaux) ou quand le destinataire veut simplement une image à déposer n’importe où. L’éditeur exporte les deux à partir du même dessin : le choix ne coûte rien.
Ce pour quoi cet éditeur est fait, et ce pour quoi il ne l’est pas
• Schémas rapides : boîtes, flèches et étiquettes pour une diapositive, un README ou un ticket de support. La grille magnétique garde tout aligné sans effort.
• Icônes et favicons simples : dessinez en 256 × 256 ou 512 × 512 sur fond transparent, téléchargez le SVG, puis passez-le dans le générateur de favicons pour obtenir toutes les tailles dont un site a besoin.
• Logos et marques provisoires : une forme, une lettre, une couleur. De quoi faire passer un prototype ou une présentation commerciale au-delà du stade de l’espace vide.
• Annotations : ouvrez un graphique ou un schéma SVG simple, ajoutez un cercle et une flèche autour de la partie dont vous parlez, exportez.
Ce n’est pas l’outil pour l’illustration, le design centré sur la typographie ou tout ce qui comporte des courbes à façonner point par point. Les traits à main levée sont lissés automatiquement mais ne peuvent pas être modifiés ensuite. Pour ce genre de travail, Inkscape est gratuit et excellent, et l’offre gratuite de Figma convient pour les graphismes d’interface. Savoir quand passer à un outil plus complet fait partie du bon usage d’un petit outil.
Conseils pour des fichiers SVG propres
Dessinez à la taille voulue. Une icône dessinée sur un canevas de 1920 × 1080 est exportée avec ce viewBox, et chaque utilisation devra la redimensionner. Réglez d’abord le canevas aux dimensions prévues ; les préréglages couvrent les plus courantes.
Préférez le contour au remplissage pour le dessin au trait, et gardez des épaisseurs de contour cohérentes ; mélanger les épaisseurs est le moyen le plus rapide de donner un air amateur à un schéma. Deux ou trois couleurs suffisent presque toujours, et les nuances du panneau sont choisies pour bien s’accorder.
Gardez le texte sous forme de texte. Cet éditeur exporte de vrais éléments <text> au lieu de les convertir en chemins, ce qui garde le fichier minuscule et consultable par recherche et vous permet de changer la formulation plus tard. Si un outil en aval exige des contours vectorisés, faites cette conversion là-bas, en dernière étape.
Laissez le fond transparent, sauf si vous avez précisément besoin d’une couleur. Un SVG transparent s’intègre dans n’importe quelle page ou diapositive ; un rectangle blanc derrière un logo, non.
Outils gratuits similaires
- Créateur de diagrammes ER — Écrivez votre schéma de base de données en texte, voyez le diagramme entité-association s’afficher en direct, exportez en PDF ou SVG.
- Créateur de cartes mentales — Tapez un plan indenté et obtenez une carte mentale instantanément — export PDF ou SVG. Sans compte, sans glisser-déposer.
- Générateur de favicon — Transformez n’importe quel logo en pack de favicons complet (favicon.ico, toutes les tailles PNG, icône Apple Touch et webmanifest) en un clic.
- Convertisseur d’images — Convertissez entre AVIF, HEIC, TIFF, PNG, JPG, WebP, GIF, BMP et SVG. La plupart des conversions ne quittent jamais votre navigateur.