Outil de développement / 19

Visualiseur et inspecteur des commandes de chemin SVG

Analysez les données de chemin SVG (attribut d) en jetons, paramètres de commandes et rendus visuels.

Visualiseur et inspecteur des commandes de chemin SVG: TOEA segmente en jetons les instructions de chemin (M, L, C, Q, A, Z) et affiche un aperçu interactif sur un canevas SVG. Fonctionne 100 % localement dans votre navigateur, sans aucun téléversement de fichier vers le serveur.

Exécutions
Dans votre navigateur
Coût
Gratuit · sans inscription
Disponibilité
Prêt à l'emploi

Commandes de chemin (4 jetons)

MMove To (Absolute)M 10 80
QQuadratic Bezier Curve (Absolute)Q 52.5 10, 95 80
TSmooth Quadratic Bezier (Absolute)T 180 80
ZClose PathZ

Lire les commandes

Les commandes en majuscules utilisent des coordonnées absolues ; celles en minuscules se déplacent par rapport au point actuel. Chacune prend un nombre fixe de valeurs : H et V, une ; M, L et T, deux ; S et Q, quatre ; C, six ; A, sept ; et Z, aucune. Les valeurs supplémentaires répètent la commande, et les paires supplémentaires après M sont traitées comme L. Les sept valeurs d'un arc sont les deux rayons, la rotation, deux indicateurs qui choisissent le grand ou le petit arc et sa direction, puis le point final.

Taille de l'aperçu et nombres compacts

L'aperçu affiche une zone de 200 × 200 unités à partir de l'origine. Une icône dessinée sur une grille de 24 unités apparaît en petit dans le coin supérieur gauche, tandis que les chemins d'un jeu d'icônes de 512 unités dépassent du bord ; cela vient du canevas, pas du chemin.

Les optimisateurs suppriment souvent les séparateurs et écrivent M10-5 ou .5.5 pour deux nombres. L'analyse les lit comme les navigateurs : un signe moins ou un second point décimal commence un nouveau nombre, donc .5.5 correspond à 0.5 et 0.5. Les indicateurs d'arc sont des chiffres uniques ; dans a5 5 0 015 5, les indicateurs sont 0 et 1, et le point final est 5 5. Pour modifier la forme plutôt que l'analyser, ouvrez-la dans l'éditeur SVG.

Comment l'utiliser

  1. Collez les données de chemin SVG (p. ex. M10 10 L90 90 Z).
  2. Inspectez les jetons de commande et leurs descriptions.
  3. Affichez l’aperçu rendu du tracé vectoriel.

Confidentialité et limitations

Le traitement s’effectue 100 % côté navigateur, sans aucune conservation des données.

Outils associés

Questions fréquentes

Quelles commandes de chemin SVG sont analysées ?

Prend en charge MoveTo, LineTo, Cubic Bezier, Quadratic Bezier, Elliptical Arc et ClosePath (absolues et relatives).

Outil gratuit · dans votre navigateur exécutions · aucun compte requis