search

Found

info Aperçu

Convertit l’attribut d SVG en tableaux de coordonnées régulières au format JSON. Visualise la décomposition des courbes en points et transmet des coordonnées à des environnements sans API DOM SVG (Arduino, traceurs, Excel, firmware embarqué) ou utilise-les comme matériel d’entrée pour des tâches LLM.

📘 Mode d'emploi

  1. Ouvre ton SVG dans un éditeur de texte, copie l’attribut d de l’élément path et colle-le dans le champ d’entrée.
  2. Ajuste les points d’échantillonnage (2-1000) et la précision décimale (0-6) pour générer le JSON.
  3. Vérifie les positions d’échantillonnage dans la prévisualisation, puis copie le JSON pour ton environnement cible.

Échantillonneur de coordonnées de chemin SVG

100
2
Saisissez un chemin SVG
Copié !

grid_view Similaires

Article

Échantillonneur de Coordonnées de Chemin SVG | Décompose les Courbes en Tableaux JSON de Points

Convertit l’attribut d d’un élément <path> SVG en points de coordonnées échantillonnés régulièrement et exporte le résultat au format JSON. L’échantillonnage est rendu visuellement pour que tu voies précisément comment les courbes se décomposent en points — conçu pour apprendre la géométrie des chemins SVG et pour transmettre des coordonnées à des environnements sans accès à l’API DOM SVG.

💡 Aperçu de l’outil

  • Échantillonnage visuel : Les points d’échantillonnage apparaissent en temps réel sur la prévisualisation, montrant la différence de densité entre segments rectilignes et courbes serrées.
  • Deux formats JSON : Choisis le format tableau [x, y] ou objet {x, y} selon l’API destinataire.
  • Nombre de points ajustable : De 2 à 1000 points. Plus de points donnent une meilleure fidélité de courbe ; moins de points compressent les données.
  • Contrôle de la précision décimale : Définis 0 à 6 décimales dans le JSON de sortie pour respecter les contraintes de précision en aval ou réduire la taille du fichier (la prévisualisation n’est pas affectée — les variations sous-pixel sont invisibles).
  • Traitement côté client : Les données de chemin ne quittent jamais ton navigateur. Rien n’est envoyé à aucun serveur.

🧐 Foire aux questions

Q. Les développeurs JavaScript ont-ils vraiment besoin de cet outil ?

A. Dans la plupart des environnements JS, tu peux appeler directement SVGPathElement.getPointAtLength() en cinq lignes de code et te passer de l’outil. Ce convertisseur est pensé pour les contextes où l’API DOM SVG n’est pas disponible : firmware embarqué, sketches Arduino, générateurs G-code pour traceurs, flux Excel/Power Automate, scripts Python, et comme support pédagogique pour visualiser comment un chemin SVG se décompose en points discrets.

Q. Puis-je l’utiliser pour préparer des entrées pour des LLM/IA ?

A. Oui. Quand tu demandes à ChatGPT ou Claude d’animer ou d’analyser une courbe, fournir au modèle un tableau JSON de coordonnées (au lieu de la chaîne brute du chemin) lui évite d’interpréter la grammaire SVG et rend la requête plus fiable.

Q. D’où vient l’attribut d d’un SVG ?

A. Exporte n’importe quelle forme vectorielle depuis Adobe Illustrator, Figma ou Inkscape au format SVG, puis ouvre le fichier dans un éditeur de texte. Tu trouveras un élément <path d="M10 10..." /> — copie le contenu de d="..." et colle-le dans cet outil.

📚 Comment fonctionne l’échantillonnage de chemins SVG

Cet outil utilise les méthodes SVGPathElement.getTotalLength() et getPointAtLength(distance) de l’API DOM SVG du navigateur. La première renvoie la longueur totale du chemin ; la seconde renvoie les coordonnées X/Y à toute distance le long du chemin. Ensemble, elles permettent d’échantillonner n’importe quel point d’un tracé, y compris des courbes de Bézier complexes, sans résoudre les équations paramétriques à la main.