Éditeur SVG en ligne

Un éditeur SVG professionnel qui fonctionne entièrement dans votre navigateur

L'Éditeur SVG de Tools 4 All est une application complète de graphisme vectoriel qui s'ouvre instantanément, sans téléchargement, compte ni envoi. Utilisez-le pour dessiner des logos, des icônes, des illustrations, des diagrammes et des éléments d'interface, ou pour nettoyer et peaufiner des fichiers SVG existants. Il est construit autour du format SVG lui-même : le fichier que vous exportez est le document que vous avez modifié, sans format propriétaire ni conversion cachée.

Ce que vous pouvez faire

• Dessinez avec précision : outil Plume avec courbes de Bézier, Crayon à main levée avec lissage, rectangles aux coins arrondis, chanfreinés ou inversés indépendamment, ellipses, lignes, pinceau tache, gomme, cutter et ciseaux, et formes modifiables : polygones, étoiles, triangles, croix, cadres, anneaux, secteurs, croissants, flèches, bulles, engrenages, cœurs, nuages, fleurs et spirales, ainsi que du texte.
• Modifiez les tracés nœud par nœud : déplacez nœuds et poignées, convertissez entre nœuds anguleux, lisses et symétriques, ajoutez et supprimez des nœuds, joignez et coupez des tracés, courbez directement les segments et alignez les poignées sur les tangentes.
• Combinez les formes : union, soustraction, intersection, exclusion et division, plus vectorisation du contour, décalage de tracé, simplification et inversion, le tout calculé par notre propre moteur géométrique qui préserve les courbes, dans un worker en arrière-plan.
• Stylisez tout : couleurs unies, dégradés linéaires et radiaux avec poignées sur le canevas, motifs, opacité par fond et par contour, pointillés, extrémités, jointures, pointes de flèche, modes de fusion, effets de flou et d'ombre portée, tracés de découpe et masques.
• Restez organisé : un panneau Calques avec réorganisation par glisser-déposer, renommage et imbrication, verrouillage et masquage, groupement et dissociation, alignement et répartition par rapport à la sélection, au plan de travail ou à un objet clé, nuances du document et symboles réutilisables.
• Travaillez comme un pro : repères commentés avec distances et indications d'espacement égal, magnétisme sur la grille, les pixels, les repères des règles, les nœuds et les tracés, champs numériques X/Y/L/H/rotation, annulation illimitée et raccourcis façon Figma et Illustrator.
• Code et export : une vue du code SVG bidirectionnelle, un export SVG optimisé avec affichage de la taille, PNG/JPEG/WebP à n'importe quelle échelle, et copie en SVG, URI de données, React (JSX ou TSX), SVG Tailwind ou arrière-plan CSS.
• Conçu pour la production web : couleurs du document avec remplacement en un clic et Convertir en currentColor, texte en contours, vectorisation du contour, aplatissement des transformations et dissociation, ajustement du canevas au contenu et simplification des tracés bruités.
• Un vrai espace de travail : plusieurs dessins dans des onglets, chacun avec son propre historique d'annulation, des menus courts avec sous-menus, un panneau latéral repliable (Ctrl/⌘+B) et l'édition plein écran sur téléphone comme sur ordinateur.

Pourquoi un éditeur nativement SVG est important

Beaucoup d'outils de design traitent le SVG comme un format d'export : vous dessinez dans leur propre modèle, et le SVG est généré à la fin. Cela convient pour de simples icônes. Mais cela ne tient plus quand vous devez modifier un fichier existant, conserver les identifiants dont dépendent votre CSS ou votre JavaScript, ou comprendre pourquoi un fichier est dix fois plus lourd qu'il ne devrait. Cet éditeur travaille directement sur le document SVG. Les groupes restent des groupes, les dégradés restent des dégradés, et un <symbol> utilisé cinq fois reste un seul symbole. Quand vous renommez un calque, vous définissez l'id de l'élément.

Rapide avec les gros fichiers

La vitesse est un objectif de conception depuis la première ligne de code. Le dessin est rendu nativement par votre navigateur dans un calque isolé. Les poignées de sélection, les contours au survol et les repères sont dessinés sur une surcouche séparée, si bien que déplacer la souris ne touche jamais votre document. Un index spatial (un R-tree) trouve en quelques microsecondes ce qui se trouve sous le pointeur, même avec des dizaines de milliers de formes. Sur les documents lourds, le déplacement et le zoom sont confiés au compositeur GPU, et les vecteurs sont à nouveau rendus nets à l'arrêt. Les traitements coûteux comme les opérations booléennes, le décalage de tracés et l'optimisation SVG s'exécutent dans un Web Worker, pour que l'interface reste réactive.

Des outils de précision pour le travail vectoriel

Utilisez l'outil Plume pour cliquer des angles et faire glisser des courbes lisses. Maintenez Shift pour garder des angles de 45° et Alt pour casser une poignée. Avec l'outil Nœud, vous pouvez faire glisser un segment pour le courber, double-cliquer pour ajouter un nœud, ou sélectionner plusieurs nœuds et les aligner. Les repères commentés indiquent quand un objet s'aligne sur les bords ou les centres de ses voisins, et quand l'espacement entre objets est égal. Vous pouvez aussi tirer des repères depuis les règles. Pour des valeurs exactes, saisissez X, Y, largeur, hauteur et rotation dans le panneau Style. Les champs acceptent des calculs comme 120+16 ou 200/3.

Des exports propres et légers

Les éditeurs laissent souvent des métadonnées, des définitions inutilisées, des groupes redondants et des nombres trop précis dans les fichiers qu'ils enregistrent. La boîte de dialogue d'export lance un optimiseur de type SVGO en arrière-plan. Il arrondit les nombres à la précision choisie, convertit les données de tracé dans leur forme la plus courte, supprime les métadonnées d'éditeur et les définitions inutilisées, raccourcit les identifiants et les couleurs, et fusionne les groupes inutiles. Chaque optimisation peut être désactivée, et la boîte de dialogue affiche la taille du fichier avant et après. Pour une sortie matricielle, choisissez PNG, JPEG ou WebP à 1×, 2×, 4× ou à une taille exacte en pixels, avec ou sans fond transparent.

Conçu pour la production web

Les SVG destinés aux sites et aux applications n'ont pas les mêmes besoins que les illustrations pour l'impression. La liste Couleurs du document montre chaque couleur utilisée par le fichier : modifiez-en une et tout ce qui la partage suit, ou convertissez-la en currentColor pour qu'une icône React ou Tailwind prenne sa couleur du CSS. Les fichiers importés contiennent souvent des groupes imbriqués et des transformations qui rendent les tracés difficiles à modifier : Aplatir les transformations et dissocier les intègre aux coordonnées en une seule étape, et Ajuster au contenu recadre la viewBox sur l'illustration, contours compris. Texte en contours et Vectoriser le contour transforment le texte et les épaisseurs de trait en tracés simples qui s'affichent partout à l'identique, et Simplifier retire les centaines de points d'une forme vectorisée ou dessinée à main levée.

Vos fichiers restent sur votre appareil

Il n'y a aucun serveur derrière l'éditeur. Ouvrir un fichier le lit depuis votre disque dans la page, et l'export génère le fichier sur votre appareil. L'enregistrement automatique écrit dans le stockage IndexedDB privé de votre navigateur, qui conserve aussi la liste de vos fichiers récents. Si vous fermez l'onglet par accident, votre dernier document est restauré à votre prochaine visite.

Découvrir d'autres outils d'image