SVG Path Editor

Créer ou retoucher un path SVG dans le navigateur

SVG Path Editor dessine le tracé décrit par un attribut d, avec ses points de contrôle, et liste chaque commande avec ses valeurs. Un point déplacé à la souris réécrit le texte du d ; une valeur modifiée dans le texte ou dans la liste déplace le point. L'éditeur tourne dans le navigateur depuis GitHub Pages et s'installe comme application web, avec un manifeste et un service worker qui précharge ses fichiers.

Commandes SVG au clavier et opérations sur tout le tracé

• Les touches m, l, v, h, c, s, q, t, a et z insèrent la commande correspondante après la commande sélectionnée ; avec Maj, elles la convertissent. Ctrl+Z et Ctrl+Maj+Z (Cmd sur Mac) annulent et rétablissent.
• Un clic sur la lettre d'une commande la bascule entre relatif (orange) et absolu (violet). Deux boutons convertissent tout le tracé.
• Le tracé entier se met à l'échelle, se translate, pivote, s'arrondit au nombre de décimales choisi ou s'inverse. Le menu d'une commande fait démarrer le tracé ou son sous-tracé à cet endroit, ou inverse ce sous-tracé.
• Le bouton Optimize retire les commandes inutiles et passe aux formes courtes H, V, S et T quand la géométrie le permet. Il ne garde ensuite une bascule entre relatif et absolu, ou l'inversion du tracé, que si la chaîne raccourcit.
• L'éditeur ne demande aucun compte : les tracés enregistrés restent dans le localStorage du navigateur, un tracé se partage par une URL qui le porte dans son fragment #P=, et l'export SVG règle remplissage, contour et viewBox.
• Le moteur de l'app est publié sur npm sous le nom svg-path-editor-lib, sans dépendance d'exécution, en ESM et CommonJS avec ses types.

Retouches d'icônes et tracés partagés par URL

• Corriger le path d'une icône sans ouvrir un outil de design vectoriel comme Penpot.
• Lire un d minifié commande par commande pour repérer le segment qui dévie.
• Joindre un tracé en cours à une issue ou à une revue de code sous forme d'URL.
• Appliquer les mêmes transformations dans un script de build avec svg-path-editor-lib.

Import limité au d et un seul point déplacé à la fois

L'éditeur lit la valeur d'un attribut d, pas un fichier SVG. L'import d'un fichier entier est demandé depuis décembre 2021 (issue #52, toujours ouverte). Le mainteneur y juge l'extraction « extrêmement difficile » à faire proprement, chaque path pouvant porter une ou plusieurs transformations SVG. Le seul fichier accepté est une image, lue en local et placée à la main dans le canevas.

Un seul point se déplace à la fois. Le mainteneur confirme dans l'issue #41 qu'il n'existe pas de moyen direct d'en déplacer plusieurs, et renvoie à un contournement par les coordonnées relatives et absolues.

Le Dockerfile sert l'app en mode développement. Il lance ng serve sur le port 4200 à partir de l'image node:current. Un hébergement statique passe par npm run build (Node.js 18.13 minimum) et le dossier dist/, comme le script du dépôt qui publie la version GitHub Pages.

Deux optimisations de la bibliothèque restent hors de l'app. La documentation de la bibliothèque prévient que removeOrphanDots et useClosePath peuvent abîmer un tracé avec contour ; le bouton Optimize ne les active pas.

Pas de release GitHub : seule la bibliothèque porte un numéro de version. Les tags 1.0.0 (novembre 2024) à 1.0.4 suivent svg-path-editor-lib, dont la 1.0.4 est parue sur npm le 18 juin 2026 ; l'application reste en 0.0.0 dans son package.json. Le dernier commit et la republication de la version en ligne datent du même jour, après des commits en mars et avril 2026. Le code est en TypeScript sur Angular 17, sous licence Apache-2.0.