Commandes SVG relatives : suivre le point courant

Les commandes de tracé SVG absolues comme M, L et C utilisent des positions dans le système de coordonnées utilisateur courant. Leurs formes relatives, m, l et c, utilisent des décalages à partir du point courant. Pour lire ou réécrire un tracé, suis ce point après chaque segment. Changer la lettre d’une commande sans changer ses nombres peut modifier la forme.

Deux règles expliquent une grande partie de la confusion : la première paire d’un m initial agit comme un déplacement absolu, tandis que les paires supplémentaires sont des lignes relatives ; et Z ou z ferme un sous-tracé et ramène le point courant à son départ. Un nouveau déplacement relatif après cette fermeture utilise ce point réinitialisé.

Distinguer les positions des décalages

La spécification des tracés du W3C définit un tracé par son point courant, ses sous-tracés et ses commandes de dessin. Les coordonnées sont exprimées en unités utilisateur SVG, pas nécessairement en pixels à l’écran. Un viewBox ou une transformation peut les faire correspondre à une autre position affichée.

À partir de (40, 40), ces deux commandes décrivent la même ligne :

L180 40
l140 0

La première indique le point d’arrivée (180, 40). La seconde ajoute (140, 0) à (40, 40). Toutes deux se terminent à (180, 40), qui devient le point courant du segment suivant.

En revanche, l180 40 ajoute (180, 40) et se termine à (220, 80). La syntaxe est valide, mais la ligne dessinée est différente.

Les formes majuscule et minuscule de Z ont le même effet : elles n’acceptent aucun argument de coordonnées. La référence MDN de d présente les commandes et leurs paramètres respectifs.

Comparer deux descriptions du même dessin original

Enregistre ce SVG complet sous absolute.svg et ouvre-le dans un navigateur. Il contient un badge composé bleu-vert avec un trou carré et une courbe cubique corail distincte :

<svg xmlns="http://www.w3.org/2000/svg" width="300" height="240" viewBox="0 0 300 240">
  <path class="badge" fill="#173b40" fill-rule="evenodd" d="M40 40L180 40L210 80L180 140L40 140Z M80 70L80 110L120 110L120 70Z"/>
  <path class="curve" fill="none" stroke="#f28567" stroke-width="6" d="M40 190C80 145 155 225 220 180"/>
</svg>

Pour relative.svg, conserve la taille du SVG, le viewBox et les styles, mais remplace les deux éléments de tracé par ceux-ci :

<path class="badge" fill="#173b40" fill-rule="evenodd"
  d="m40 40 140 0 30 40 -30 60 -140 0z m40 30 0 40 40 0 0 -40z"/>
<path class="curve" fill="none" stroke="#f28567" stroke-width="6"
  d="m40 190c40 -45 115 35 180 -10"/>

Nous avons affiché les deux fichiers originaux dans un navigateur, à côté d’une copie volontairement incorrecte du badge absolu. Cette copie remplace uniquement son premier L180 40 par l180 40 ; les nombres restent identiques.

Notre page a utilisé les méthodes SVG natives getTotalLength() et getPointAtLength() pour comparer 301 échantillons par tracé à des fractions correspondantes de la longueur totale. Les longueurs affichées étaient de 657.082 unités utilisateur pour chaque badge et de 189.066 pour chaque courbe. L’écart maximal entre les points échantillonnés s’affichait comme 0.000000 pour les deux paires.

Cette mesure confirme ces chaînes précises, dont les sommets des lignes et les points cubiques concordent aussi selon les calculs ci-dessous. Elle ne prouve pas qu’une réécriture ou un convertisseur quelconque gère toutes les commandes SVG. La comparaison utilise partout la même fenêtre d’affichage sans transformation et les mêmes réglages de rendu.

Suivre le premier m et ses lignes implicites

Notre badge commence par :

m40 40 140 0 30 40 -30 60 -140 0z

Seule la première paire effectue un déplacement. Les paires restantes se comportent comme des segments l relatifs implicites. La définition de moveto précise que ces paires ultérieures restent relatives, même si le m40 40 initial est traité comme un départ absolu.

Suis les paires une par une :

À titre de comparaison, un M majuscule à plusieurs paires transforme les paires suivantes en segments L absolus implicites. Il ne traite pas chaque paire comme un nouveau déplacement et n’utilise pas les mêmes deltas que cet exemple en minuscules.

Un élément de tracé définit sa propre séquence. Ne fais pas démarrer son m relatif initial au point d’arrivée d’un autre élément de tracé qui le précède.

Utiliser le départ du sous-tracé fermé pour le déplacement suivant

Le trou commence après le premier z :

m40 30 0 40 40 0 0 -40z

À ce moment, le point courant est (40, 40). Le nouveau déplacement relatif ajoute donc (40, 30) et commence le trou à (80, 70). Ses lignes implicites atteignent ensuite (80, 110), (120, 110) et (120, 70) avant la fermeture.

Si tu utilisais par erreur le dernier point d’arrivée du badge extérieur, (40, 140), comme référence, tu placerais ce déplacement à (80, 170). C’est la fermeture précédente qui rend ce calcul incorrect. La définition de closepath ramène le point courant au point initial du sous-tracé courant.

Les deux sous-tracés appartiennent à un seul élément de tracé. Son fill-rule="evenodd" fait du carré intérieur une ouverture dans cet exemple. Conserve la règle de remplissage et les réglages de rendu lorsque tu compares des réécritures de coordonnées, pour qu’un changement de remplissage ne masque pas la géométrie testée.

Mesurer chaque point de contrôle cubique depuis le même départ

La courbe distincte commence à (40, 190) :

M40 190 C80 145 155 225 220 180
m40 190 c40 -45 115 35 180 -10

Pour cet unique segment c minuscule, les trois paires sont des décalages à partir de (40, 190). Le second point de contrôle n’est pas mesuré depuis le premier, et le point d’arrivée n’est pas mesuré depuis le second.

Après le segment, mets à jour le point courant avec son arrivée (220, 180). Un segment relatif suivant utiliserait ce nouveau départ. Le tutoriel MDN sur les tracés explique les points de contrôle cubiques et les formes absolues et relatives ; le guide des raccords de Bézier traite séparément des poignées tangentes et de la commande abrégée S.

Ne généralise pas la soustraction de coordonnées à chaque nombre de chaque commande. Dans un arc, les rayons, la rotation et les indicateurs ont des fonctions différentes ; seule la paire du point d’arrivée passe des positions absolues aux positions relatives. Consulte l’explication des indicateurs d’arc avant de réécrire des données A ou a. Cet exemple montre des lignes, des déplacements, la fermeture et un segment cubique ordinaire, plutôt qu’une procédure générale de conversion des tracés.

Déplacer le dessin sans confondre placement et syntaxe du tracé

Pour ce badge composé entièrement relatif, remplacer son m40 40 initial par m60 60 décale ses sommets de (20, 20) : les deltas suivants et le déplacement relatif du sous-tracé suivent ce nouveau départ. Le tracé de la courbe distincte reste inchangé. Dans des données mixtes, les positions absolues ultérieures restent ancrées à leurs coordonnées spécifiées ; modifier le premier déplacement peut donc déformer le tracé.

Pour déplacer tout le dessin à deux tracés comme une seule unité, conserve les deux chaînes d et place leurs éléments dans un groupe avec transform="translate(20 20)". La spécification du système de coordonnées SVG explique comment les transformations établissent les correspondances de coordonnées. Une transformation de groupe change le placement sans réécrire les données de tracé originales.

Vérifie que la fenêtre d’affichage contient toujours le dessin déplacé ; translater un groupe n’agrandit pas automatiquement son canevas. Le guide de l’ordre des transformations SVG traite du placement lorsque translation et mise à l’échelle sont combinées.

Examiner la géométrie source avant de changer sa notation

PerfectVector peut t’aider lorsque le dessin n’existe qu’en PNG ou JPG. Prépare un SVG candidat, puis compare sa silhouette reconstruite, ses trous et ses courbes à la source avant de modifier ses données de tracé. La notation absolue ou relative ne permet pas de déterminer si la géométrie reconstruite convient.

Utilise directement un original vectoriel disponible, ou redessine un symbole simple si tu peux ainsi mieux le contrôler. Réécrire les commandes ne peut pas retrouver la forme prévue à partir d’informations matricielles manquantes. La présentation de la vectorisation d’images explique cette étape distincte de reconstruction.

Quand tu modifies un SVG exploitable, conserve une copie de l’original, change un segment pris en charge à la fois et compare le fichier réel à la même échelle. Suis le départ du sous-tracé ainsi que le point courant. Préserve les réglages de remplissage et de contour pendant la comparaison, puis teste le fichier exporté dans l’application destinataire.

FAQ

Le premier m minuscule est-il relatif à un autre tracé ? Non. Lorsque m est la première commande d’un tracé, sa première paire est traitée comme un départ absolu. Les paires supplémentaires sont des lignes relatives implicites, et le point d’arrivée d’un autre élément de tracé n’est pas sa référence de départ.

Où se trouve le point courant après Z ou z ? Au départ du sous-tracé qui vient d’être fermé. Un déplacement relatif suivant utilise ce point réinitialisé, et non l’arrivée de la ligne précédente.

Puis-je convertir un tracé en mettant ses commandes en minuscules ? Non. Les valeurs de position doivent être recalculées selon le sens de chaque commande. Dans cet exemple, L180 40 devient l140 0 depuis le point courant (40, 40), tandis que l180 40 dessine une autre ligne.

Sources

1. W3C — Tracés SVG 2 — Définit les points courants, le moveto initial, les lignes implicites, la fermeture et les paramètres cubiques.
2. MDN — Tutoriel sur les tracés — Illustre les commandes absolues et relatives de lignes et de courbes.
3. MDN — Attribut d — Présente le rôle des paramètres des commandes, notamment les arcs et closepath.
4. W3C — Systèmes de coordonnées SVG 2 — Explique les correspondances de coordonnées utilisateur et le placement du dessin par transformation.

Tu pars d’un dessin uniquement matriciel ? Prépare des tracés SVG avec PerfectVector, examine la silhouette et les ouvertures reconstruites, puis modifie seulement les commandes que tu comprends et vérifie le SVG livré par rapport à l’original.