SVG PATH EDITOR : reprendre un path SVG à la souris, sans ouvrir Illustrator
⏱️ Temps de lecture estimé : 4 minutes
https://papyrus.z29k.com/gemshelf/svg-path-editor/
📌 SVG Path Editor est un éditeur d’attributs d qui tourne entièrement dans le navigateur : vous collez un path, vous déplacez ses points à la souris, et la chaîne de commandes se réécrit sous vos yeux.
Un d qui sort d’Illustrator, d’Inkscape ou de Figma n’est pas un fichier, c’est une grille de nombres. Six décimales, des coordonnées absolues, des courbes que personne ne relit. Ouvrir un éditeur vectoriel complet pour raccourcir trois nombres, c’est fastidieux. SVG Path Editor prend le problème par l’autre bout : vous collez le d, le tracé s’affiche avec ses points et ses poignées, et vous négociez directement avec la géométrie.
Le point qui change tout, c’est la bidirectionnalité. Le path brut et la vue graphique sont le même objet, pas deux représentations à resynchroniser. Vous déplacez un point à la souris, la chaîne se met à jour ; vous modifiez un nombre au clavier, le tracé suit immédiatement. C’est la meilleure façon de comprendre ce que fait vraiment une commande, parce qu’on la voit bouger sous ses yeux. Le code couleur aide beaucoup : les coordonnées relatives sont orange, les absolues violettes. Une convention discrète, mais elle lève tout de même l’ambiguïté quand un path mélange les deux.
Toutes les commandes SVG sont là — M, L, C, S, Q, T, A, Z — avec insertion, suppression et conversion. Le menu ... d’un point donne accès à Insert after et Convert to, mais aussi Start Path From Here et Start Subpath From Here, qui réordonnent le path pour que la commande sélectionnée devienne la première, et Reverse Subpath. Ces trois dernières sont exactement ce que je cherche quand un tracé est refermé au mauvais endroit : plutôt que de réécrire le d à la main, on déplace le point de départ.
Vient ensuite la partie que je préfère, parce qu’elle sert avant d’apprendre. Un bloc d’opérations agit sur le path entier : mise à l’échelle, translation, rotation, arrondi des coordonnées, conversion globale en relatif ou en absolu, inversion du sens, et Optimize qui minimise la longueur de la chaîne. Zoom to Fit recalcule la viewBox sur le tracé courant, et la molette zoome pendant qu’un glisser déplace le cadre. C’est la chaîne de nettoyage avant commit : arrondir, recentrer, raccourcir, et voir le gain immédiatement.
Les raccourcis clavier font passer l’outil du côté des vrais éditeurs. m, l, v, h, c, s, q, t, a et z insèrent une commande après la sélection ; les mêmes touches majuscules convertissent la commande sélectionnée. Échap annule, Suppr retire la commande, Ctrl+Z et Ctrl+Maj+Z gèrent l’undo et le redo, et maintenir Ctrl pendant un glisser désactive le snap to grid. Une fois ces touches apprises, l’édition va plus vite qu’à la souris.
- 📌 Path brut et vue graphique synchronisés en permanence
- 🎨 Relatif en orange, absolu en violet : la convention se lit d’un coup d’œil
- 🧹
Optimize,RoundetZoom to Fitpour nettoyer un path avant commit - ⌨️ Insertion, conversion, undo/redo et snap-to-grid entièrement au clavier
- 📦 Moteur extrait dans
svg-path-editor-libsur npm, intégrable dans vos apps
La limite tient à l’objet lui-même : c’est un éditeur de path, pas de document. Aucun calque, aucun style, aucun grouping, pas d’import de fichier SVG complet. Vous collez un attribut d, vous repartez avec un attribut d. Pour retraiter une icône ou comprendre un tracé, c’est largement suffisant ; pour élargir un logo, il faudra toujours ouvrir autre chose.
Le reste est solide et sans surprise. Licence Apache-2.0, environ 5 300 étoiles et 422 forks, dépôt créé en 2020 et encore mis à jour, écrit en TypeScript sur Angular. L’app est hébergée sur GitHub Pages, se lance en local avec npm start sur Node 18.13 ou plus, et un Dockerfile est fourni. Le moteur d’édition est d’ailleurs sorti de l’app pour devenir un paquet npm autonome, svg-path-editor-lib, publié en version 1.0.4 sous la même licence.
Je trouve l’approche exemplary : l’outil ne cherche pas à remplacer un logiciel de dessin, il se contente d’être excellent sur la seule chose qu’il fait, et de la faire dans un onglet. C’est le genre d’utilitaire que vous ouvrez deux fois par semaine et que vous ne refermez jamais.
Sources
