Aussi disponible en : English · Español · Português · العربية
Path SVG : lire l’attribut d commande par commande
Collez les données d’un tracé et obtenez un aperçu, le détail commande par commande, la vraie boîte englobante et toutes les commandes relatives résolues.
Que contiennent les données d’un path SVG ?
Un path SVG est une seule longue chaîne dans un attribut d : une lettre, quelques nombres, une autre lettre, encore des nombres. M déplace le stylo, L trace une ligne, C dessine une courbe cubique, A dessine un morceau d’ellipse et Z referme la forme. Les majuscules prennent des coordonnées absolues, les minuscules des décalages depuis l’endroit où le stylo se trouve déjà. Tout le dessin vectoriel que vous voyez — un jeu d’icônes, une carte, un logo — c’est cette chaîne.
Elle est conçue pour s’écrire de façon compacte, et la grammaire pousse cette idée bien plus loin qu’on ne l’imagine. Les séparateurs entre nombres sont facultatifs dès lors que deux valeurs ne peuvent pas se confondre : un nombre peut commencer par un point, si bien qu’un tracé peut s’écrire M.5.5 et désigner deux coordonnées, et un signe ouvre un nouveau nombre, donc 1-2 en fait deux aussi. C’est pour cela qu’un SVG minifié est illisible tout en restant parfaitement valide.
Cette page analyse cette chaîne telle que la grammaire la définit vraiment, et vous montre le résultat : chaque commande avec ses arguments et le point où elle laisse le stylo, un aperçu dessiné par votre propre navigateur, la boîte englobante de la courbe réelle, et le tracé entier réécrit avec toutes les commandes relatives résolues.
Comment l’utiliser
- Collez l’attribut d. Uniquement les données du tracé, sans le balisage autour. Les boutons d’exemple couvrent une forme arrondie, les drapeaux de l’arc, un tracé volontairement compact et un autre comportant une vraie erreur.
- Lisez le tableau des commandes. Une ligne par commande, avec ses arguments et la coordonnée où elle laisse le stylo. Une ligne dont la lettre est entre parenthèses n’avait pas de lettre à elle : c’est une répétition de celle du dessus.
- Regardez la boîte et la forme absolue. La boîte vient de la courbe et non de ses points de contrôle : c’est donc celle que la forme occupe réellement. En dessous, le même tracé avec toutes les commandes relatives résolues, prêt à copier.
Les drapeaux de l’arc sont le recoin le plus étrange du format
Un arc elliptique prend sept valeurs : deux rayons, une rotation, deux drapeaux et le point d’arrivée. Les drapeaux choisissent lequel des quatre arcs possibles entre deux points vous vouliez : le grand ou le petit, dans un sens ou dans l’autre. Et dans la grammaire, ce ne sont pas des nombres. Ce sont littéralement les caractères 0 et 1, le seul endroit de toute la syntaxe des tracés où une valeur est un caractère et non un nombre.
Cela a une conséquence que personne n’attend. Comme un drapeau occupe exactement un caractère, il ne peut pas se coller à ce qui suit : les séparateurs autour des deux drapeaux sont donc facultatifs. Écrire un arc a5 5 0 0110 10 est parfaitement légal : rayons 5 et 5, pas de rotation, puis drapeau 0, drapeau 1, et le point d’arrivée 10 10. Cela ressemble à une faute de frappe. Un analyseur qui découpe les arguments sur les espaces et lit sept nombres voit 0110 et produit n’importe quoi. Sur trois analyseurs publiés vérifiés pendant la construction de cette page, deux s’en sortent et le troisième le rejette comme malformé.
La règle coupe aussi dans l’autre sens. Puisqu’un drapeau est un caractère et non un nombre, 0.0 et +0 n’en sont pas : ce sont des nombres parfaitement corrects, acceptés partout ailleurs dans le même tracé, y compris comme rotation de l’arc lui-même. Mettez-en un à la place d’un drapeau et le tracé est malformé. Les trois analyseurs se divisent là aussi : deux refusent, et celui qui refusait l’écriture légale accepte celle-ci, illégale, et la convertit discrètement en drapeau 0.
Il y a un séparateur obligatoire dans l’arc, et c’est celui qui suit la rotation. Cette asymétrie a une raison : la rotation est un nombre, et un nombre est glouton. Sans espace il avalerait les chiffres des drapeaux, ce qui est exactement ce qui se produit si vous essayez : a5 5 00110 10 lit la rotation comme cent dix, puis se retrouve à court d’arguments.
Ce qui compose vraiment la boîte englobante
La façon évidente d’encadrer une courbe consiste à prendre les extrêmes de ses points de contrôle, et elle est fausse. Une courbe cubique ne passe même pas par ses deux points de contrôle intermédiaires : elle est attirée vers eux et reste en deçà. Encadrez-la ainsi et la boîte sort trop grande, parfois nettement.
Celle-ci vient de la courbe. Les points les plus raides et les plus plats d’une cubique se trouvent là où sa dérivée s’annule, et cette dérivée est une quadratique avec au plus deux racines par axe ; la dérivée d’une courbe quadratique est linéaire et en a une. Un arc tourne là où tourne l’ellipse paramétrique, ce qui donne deux angles à confronter au morceau d’ellipse réellement tracé. Tout cela est calculé en forme fermée, puis vérifié, dans la suite de tests, contre un parcours de la même courbe en deux mille pas dont on retient le minimum et le maximum. Forme fermée contre force brute, c’est une vraie vérification : s’accorder avec une seconde copie de la même algèbre ne prouverait rien.
Un détail qui passe d’abord pour un bug : une commande de déplacement lève le stylo, donc le point d’où il partait ne fait pas partie de la forme. L’inclure met l’origine dans la boîte de tout tracé qui commence ailleurs — c’est précisément l’erreur que cette page contenait jusqu’à ce que la vérification par échantillonnage la repère.
Ce que cet outil ne fait pas
Il ne modifie pas le tracé. Aucune poignée à faire glisser, aucune simplification : l’objectif est de lire ce qu’un tracé dit, pas d’en écrire un nouveau. La conversion en absolu est la seule réécriture proposée, et elle est volontairement sans perte : pas d’arrondi au-delà de six décimales, pas de fusion de commandes, pas de réordonnancement.
Il n’applique ni transformations, ni contours, ni marqueurs. Un attribut transform sur l’élément, ou sur n’importe quel ancêtre, déplace l’ensemble ; un contour l’élargit d’une demi-épaisseur dans toutes les directions, et davantage à un angle vif. La boîte affichée ici est la géométrie du tracé lui-même, ce qu’un viewBox demande généralement et non ce que l’encre dessinée occupe.
Il s’arrête aussi à la première chose qu’il ne sait pas analyser. C’est un choix et non une limite du format : la spécification demande à un moteur de rendu de dessiner le tracé jusqu’à l’erreur et pas au-delà, si bien qu’un tracé cassé n’est pas vide, il est tronqué. Voir où l’analyse s’est arrêtée suffit généralement à trouver la faute, et la position du caractère est indiquée.
Pourquoi est-ce gratuit ?
Analyser une chaîne et résoudre une équation du second degré sont des choses que votre navigateur fait en quelques microsecondes. Aucun serveur n’intervient, il n’y a donc rien à facturer ni de compte à créer.
Rien n’est envoyé. Le tracé que vous collez reste dans cet onglet, et l’aperçu est dessiné par votre propre navigateur à partir de cette même chaîne.