SVG Path Editor

C'EST QUOI ?

SVG Path Editor est un éditeur de paths SVG qui tourne entièrement dans le navigateur. On colle le contenu d'un attribut d, l'outil affiche le tracé avec ses points de contrôle, et chaque commande devient éditable à la souris ou depuis le champ texte, les deux vues restant synchronisées en permanence. L'app est hébergée sur GitHub Pages, mais se lance aussi en local avec npm ou via le Dockerfile fourni.

POURQUOI C'EST INTÉRESSANT ?

• Édition bidirectionnelle : le path brut et la vue graphique sont le même objet. On déplace un point à la souris et le d se met à jour, on modifie le texte et le tracé suit. Idéal pour comprendre ce que fait réellement chaque commande.
• Toutes les commandes SVG : insertion, suppression et conversion de commandes (M, L, C, S, Q, T, A, Z), avec un code couleur qui distingue les coordonnées relatives (orange) des absolues (violet).
• Opérations sur le tracé : mise à l'échelle, translation, rotation, arrondi des coordonnées, passage relatif/absolu, inversion du sens du path et optimisation de la longueur de la chaîne. De quoi nettoyer un export d'outil vectoriel avant de le mettre en prod.
• Raccourcis clavier : chaque type de commande a sa touche (m, l, c, q, a, z...), plus undo/redo et les contrôles de viewBox au clavier ou à la molette. Passé la prise en main, l'édition va vite.
• Disponible en lib npm : le moteur d'édition est extrait dans svg-path-editor-lib, un paquet autonome réutilisable pour intégrer la manipulation de paths dans ses propres projets.

CAS D'USAGE

• Nettoyer et compresser un path exporté depuis Illustrator, Inkscape ou Figma avant de le commiter
• Créer ou retoucher une icône SVG à la main sans ouvrir un éditeur vectoriel complet
• Déboguer un attribut d illisible en visualisant chaque commande
• Recentrer un tracé dans son viewBox et arrondir les coordonnées pour alléger le fichier
• Intégrer l'édition de paths dans une app web via la lib npm