Visualiseur et éditeur de chemin SVG

Visualiseur et éditeur de chemin SVG

Collez le contenu de votre attribut d d'un chemin SVG et voyez-le affiché en temps réel. Ce outil décompose chaque commande en ses paramètres et en son point final absolu, dessine des lignes de point de contrôle et des points orange pour les commandes C, S, Q et T, et réécrit le chemin entre coordonnées absolues et relatives avec une précision configurable. Il est conçu pour les auteurs SVG qui souhaitent comprendre, nettoyer ou ajuster manuellement la chaîne brute d sans quitter le navigateur.

Comment utiliser

1. Collez le contenu de votre attribut d d'un chemin SVG (ou cliquez sur « Essayez un exemple ») dans l'entrée.
2. Ajustez le viewBox afin qu'il corresponde à la zone de dessin où le chemin a été créé. La valeur par défaut 0 0 200 200 s'applique aux exemples intégrés.
3. Sélectionnez la couleur du contour, la largeur du contour et le remplissage afin de visualiser la façon dont le chemin sera affiché.
4. Choisissez un mode de coordonnées — conserver tel quel, convertir en absolu ou convertir en relatif — et une précision allant de 0 à 6 chiffres décimaux.
5. Activez les surcouches pour afficher ou cacher la grille, les points d'ordre de commande numérotés, les lignes de point de contrôle des Bezier et l'animation de dessin.
6. Copiez l'attribut d transformé ou téléchargez le SVG autonome complet.

Caractéristiques

• Aperçu en temps réel du chemin – affiche votre chaîne d dans un canevas SVG avec une couleur du contour, un remplissage et un viewBox configurables.
• Tableau de décomposition des commandes – liste chaque commande dans l'ordre, avec ses paramètres, ses arguments étiquetés et son point final absolu.
• Surcouche des points de contrôle des Bezier – dessine des lignes pointillées et des points orange pour les commandes C, S, Q et T afin que vous puissiez voir comment les courbes sont formées.
• Points d'ordre numérotés – marque le début du chemin en vert et chaque point d'ordre suivant en bleu avec une étiquette d'indice.
• Conversion absolue ↔ relative – réécrit entièrement la chaîne d dans l'un des deux systèmes de coordonnées sans modifier la forme affichée.
• Arrondi des coordonnées – supprime la précision décimale de 0 à 6 chiffres afin de réduire et normaliser les données du chemin.
• Surcouche de grille – lignes de grille automatiquement ajustées et l'axe zéro mis en évidence liées au viewBox.
• Longueur du chemin – utilise l'API getTotalLength du navigateur pour afficher la longueur totale tracée en unités de viewBox.
• Animation de dessin – animation optionnelle de stroke-dashoffset qui dessine le chemin en boucle pour le débogage visuel.
• Exportation de SVG autonome – copiez ou téléchargez un fichier SVG complet avec les réglages actuels du viewBox et du style appliqués.

Commandes de chemin prises en charge

• M / m – moveto : commence un nouveau sous-chemin à l'endroit donné.
• L / l – lineto : dessine une ligne droite vers le point donné.
• H / h – horizontal lineto : dessine une ligne horizontale vers l'abscisse donnée.
• V / v – vertical lineto : dessine une ligne verticale vers l'ordonnée donnée.
• C / c – Bezier cubique : deux points de contrôle et un point final.
• S / s – Bezier cubique lisse : reflète automatiquement le point de contrôle précédent.
• Q / q – Bezier quadratique : un point de contrôle et un point final.
• T / t – Bezier quadratique lisse : reflète automatiquement le point de contrôle précédent.
• A / a – arc elliptique : rayons, rotation de l'axe x, indicateur de grand arc et de sens de parcours, plus un point final.
• Z / z – closepath : dessine une ligne droite vers le début du sous-chemin.