Drapeaux d’arc SVG : dessine la bonne courbe avec A

Les deux drapeaux d’une commande SVG A choisissent quel arc relie ses points de départ et d’arrivée. Définis large-arc-flag sur 0 pour le parcours le plus court ou sur 1 pour le plus long. Définis sweep-flag sur 0 ou 1 pour choisir le sens autour de l’ellipse. Garde les extrémités et les rayons fixes, change uniquement ces deux chiffres et tu peux observer les quatre possibilités. La spécification des tracés SVG 2 définit ce choix entre quatre arcs.

Cette méthode est utile si le bord courbe d’un logo, l’anneau d’un badge ou un ornement d’interface se courbe dans le mauvais sens après une modification du code. Si la source est un PNG, la vectorisation peut d’abord fournir des formes modifiables ; la commande A constitue une modification géométrique délibérée et distincte.

Lis les sept valeurs après A

Une commande d’arc absolue suit cet ordre :

A rx ry x-axis-rotation large-arc-flag sweep-flag x y

rx et ry sont les rayons de l’ellipse. x-axis-rotation fait tourner cette ellipse dans le système de coordonnées actuel. Les deux drapeaux valent chacun 0 ou 1. Enfin, x y est le point d’arrivée. Le départ est le point courant laissé par la commande précédente, souvent M x y. Un a minuscule utilise un point d’arrivée relatif plutôt qu’absolu ; le tutoriel MDN sur les tracés explique les formes des commandes.

Par exemple, M70 370 A140 110 0 0 1 280 420 part de (70, 370), utilise des rayons de 140 et 110, ne fait pas tourner l’ellipse, choisit le parcours court avec sweep 1 et arrive à (280, 420). Les nombres sont dans le système de coordonnées utilisateur du SVG. Ils ne garantissent pas automatiquement une taille physique d’impression.

Observe les quatre arcs possibles

Nous avons rendu cet exemple original à partir d’un seul fichier SVG. Chaque panneau utilise le même départ (70, 370), la même arrivée (280, 420), les mêmes rayons 140 110 et la même rotation 0. Seuls les drapeaux changent. L’orange marque le départ et le vert l’arrivée. Il s’agit d’un rendu de type navigateur de nos propres commandes de tracé, pas d’une conversion PerfectVector.

Les termes « au-dessus » et « en dessous » décrivent ce départ, cette arrivée et cette disposition de coordonnées. Ils ne sont pas les significations universelles de 0 et 1. D’autres positions d’extrémités ou un groupe transformé peuvent déplacer l’arc visible ailleurs. Le drapeau sweep sélectionne le sens d’angle croissant ou décroissant le long de l’ellipse choisie ; dans un viewBox SVG typique dont l’axe y pointe vers le bas, sweep 1 apparaît généralement dans le sens horaire. L’éditeur d’arc interactif de SVG Tutorial aide à observer le changement de sens en gardant les autres entrées fixes.

Pour reproduire un panneau, enregistre ceci sous arc.svg et ouvre-le dans un navigateur :

<svg xmlns="http://www.w3.org/2000/svg"
     width="380" height="600" viewBox="0 0 380 600">
  <path d="M70 370 A140 110 0 0 1 280 420"
        fill="none" stroke="#1b64d8"
        stroke-width="12" stroke-linecap="round" />
  <circle cx="70" cy="370" r="9" fill="#ff704e" />
  <circle cx="280" cy="420" r="9" fill="#0c8078" />
</svg>

Change uniquement les deux chiffres après la rotation 0, en utilisant le tableau ci-dessus. Si tu changes aussi un rayon ou une extrémité, tu ne peux plus déterminer quelle modification a changé le parcours.

Corrige une courbe partie dans le mauvais sens

1. Repère le segment. Dans la valeur d du tracé, identifie son point de départ précédent, la commande A et son point d’arrivée. Un tracé peut contenir plusieurs segments d’arc ; modifie uniquement celui qui est incorrect.
2. Vérifie le choix long ou court. Si une petite courbe fait soudain le tour de presque toute l’ellipse, passe large-arc-flag de 1 à 0. Si un segment d’anneau prévu devient une courte liaison, essaie 1.
3. Vérifie le côté ou le sens de parcours. Garde tout le reste fixe et inverse sweep-flag. Cela déplace souvent l’arc de l’autre côté de la corde entre les extrémités.
4. Examine toute l’illustration. Un segment corrigé peut encore rejoindre son voisin selon un angle maladroit ou dépasser le viewBox. Rouvre le fichier à sa taille d’affichage prévue, puis ajuste la géométrie voisine ou la zone de dessin si nécessaire.

Si aucune paire de drapeaux ne correspond à la silhouette souhaitée, le problème ne vient probablement pas d’un drapeau. Les rayons et les extrémités déterminent les ellipses candidates ; les drapeaux choisissent seulement parmi elles. Le guide des arcs de NaN illustre comment changer un rayon ou une extrémité modifie l’ellipse sous-jacente.

Rotation et limites des rayons

x-axis-rotation compte lorsque rx et ry diffèrent : il fait tourner l’ellipse avant le choix de l’arc. Avec des rayons égaux, faire tourner un cercle ne change pas son contour. Pour un logo avec un bord ovale incliné, essaie d’abord les rayons et la rotation souhaités, puis choisis les drapeaux. Sinon, tu risques de choisir le bon côté de la mauvaise ellipse.

Les notes d’implémentation SVG 2 définissent les cas particuliers. Si l’un des rayons est nul, le segment est traité comme une ligne droite. Si les rayons sont trop petits pour relier les extrémités, le moteur les agrandit suffisamment pour rendre l’arc possible. Si le départ et l’arrivée sont identiques, le segment d’arc est omis. Ces règles expliquent pourquoi changer un drapeau semble parfois ne rien faire. Elles signifient aussi qu’un rendu seul ne prouve pas forcément que les rayons saisis ont réellement été utilisés sans correction.

Utilise une courbe vectorisée comme point de départ, pas comme formule d’arc

Un logo matriciel peut montrer une bordure circulaire nette, mais le SVG reconstruit peut la décrire avec des segments de Bézier et des points d’ancrage plutôt qu’une commande A explicite. Un vectoriseur d’images reconstruit les formes visibles ; il ne déduit pas nécessairement le centre du cercle, les rayons ni les drapeaux d’arc d’origine du designer. Si l’original vectoriel existe, modifie ce fichier plutôt que de le vectoriser à nouveau.

S’il n’existe qu’un PNG ou un JPG, transforme l’image en tracés vectoriels modifiables avec PerfectVector, examine le contour reconstruit, puis décide s’il nécessite un redessin géométrique précis. Pour un anneau de badge, mesure le centre et les rayons souhaités dans un éditeur vectoriel et remplace uniquement cette section courbe si une géométrie régulière compte. Conserve la vectorisation acceptée pour les illustrations irrégulières qu’une ellipse exacte déformerait. Notre guide de modification des SVG traite du choix d’un éditeur visuel ou d’une modification ciblée du code ; le guide de nettoyage des nœuds aide lorsqu’une courbe vectorisée est difficile à remodeler.

Cette répartition compte : PerfectVector peut aider à reconstruire en tracés une source uniquement matricielle, tandis que la définition de paramètres d’arc exacts et la vérification des jointures restent un choix de design. Ne convertis pas un SVG déjà propre en PNG pour le vectoriser à nouveau uniquement afin de changer un drapeau.

Avant de livrer le SVG

• Conserve une copie de l’original ou de la vectorisation acceptée.
• Confirme le point de départ, le point d’arrivée, les rayons, la rotation et les deux drapeaux dans cet ordre.
• Compare le parcours choisi avec un zoom rapproché et à la taille d’utilisation réelle.
• Examine les jointures et vérifie si le parcours long traverse le bord du viewBox.
• Rouvre le SVG livré dans l’éditeur ou le navigateur cible. Une capture visuellement correcte ne prouve pas que le destinataire pourra modifier le tracé comme prévu.

FAQ

Que signifient les drapeaux large-arc et sweep dans SVG ? Le drapeau large-arc sélectionne l’arc candidat court ou long entre deux extrémités. Le drapeau sweep sélectionne le sens du parcours autour de l’ellipse. Ensemble, ils choisissent parmi quatre candidats lorsque la géométrie n’est pas dégénérée.

Pourquoi changer large-arc dans SVG n’a-t-il aucun effet visible ? Vérifie si les extrémités sont des points opposés de l’ellipse, ce qui donne deux demi-tours. Vérifie aussi les extrémités identiques, un rayon nul ou des rayons ajustés par le moteur pour relier les points. Change un paramètre à la fois et compare le tracé affiché.

La vectorisation d’images peut-elle retrouver automatiquement ma commande d’arc originale ? Ne le suppose pas. Un vectoriseur peut reconstruire des formes vectorielles modifiables à partir d’une illustration matricielle, mais le résultat peut utiliser des courbes de Bézier ou de nombreux points d’ancrage. Reconstruis un cercle ou une ellipse précis dans un éditeur vectoriel si la géométrie d’origine est nécessaire.

Sources

1. W3C — tracés SVG 2 — Syntaxe des arcs, combinaisons de drapeaux et géométrie des tracés.
2. W3C — notes d’implémentation SVG 2 — Correction des rayons et traitement des arcs dégénérés.
3. MDN — tracés SVG — Commandes de tracé absolues et relatives, et tutoriel sur les arcs.
4. SVG Tutorial — Arc — Démonstrations interactives des rayons, de la rotation et des drapeaux.
5. NaN — commandes de tracé SVG : arcs — Explication interactive de l’ajustement des ellipses et des résultats des drapeaux.

Tu as besoin d’une source modifiable avant de remodeler un emblème uniquement matriciel ? Convertis l’image en tracés vectoriels, examine le résultat et redessine tout arc dont le rayon ou le sens exact compte.