Courbes de Bézier SVG : corriger un raccord anguleux

Pour supprimer un angle indésirable au raccord de deux segments de Bézier cubiques ordinaires, garde leur nœud commun en place et aligne les poignées adjacentes sur une même droite, de part et d’autre de ce nœud. Leurs longueurs peuvent différer tout en conservant une direction tangente commune. Des poignées égales et réfléchies imposent une condition supplémentaire ; elles ne sont pas nécessaires pour tout raccord visuellement lisse.

Inspecte la forme source avant cette modification. Une pointe de feuille, une encoche ou un angle de lettre peut être volontaire. La correction ci-dessous cible un changement de direction indésirable, tout en gardant fixes le départ, le raccord, l’arrivée et le nombre de segments.

Repère les deux poignées qui contrôlent le raccord

Une commande SVG cubique comporte deux points de contrôle et un point final :

C firstControlX firstControlY secondControlX secondControlY endX endY

Le segment part du point courant. Son premier point de contrôle guide la direction de départ ; son second guide l’approche du point final. Le tutoriel MDN sur les tracés illustre ces points de contrôle et la syntaxe cubique. Pour les paires de coordonnées des commandes en minuscules, suis le guide des commandes de tracé SVG relatives afin de suivre le point de référence avant de modifier les poignées.

Au nœud commun, inspecte le dernier point de contrôle du segment précédent et le premier du segment suivant. Si ces poignées suivent des droites différentes, le raccord change de direction. Ajouter un autre nœud à proximité ne résout pas à lui seul cette relation.

Corrige l’exemple original à deux segments

Enregistre ce SVG complet sous join-example.svg et ouvre-le dans un navigateur. C’est un symbole courbe original avec un angle volontaire à (150, 100).

<svg xmlns="http://www.w3.org/2000/svg" width="900" height="600"
     viewBox="0 0 300 200">
  <path fill="none" stroke="#137f74" stroke-width="5"
    d="M30 150 C60 150 100 100 150 100
       C170 50 240 50 270 50"/>
</svg>

Le point de contrôle entrant est (100, 100), directement à gauche du raccord. Le point de contrôle sortant est (170, 50), au-dessus et à droite. La courbe arrive horizontalement et repart dans une autre direction.

Remplace uniquement le premier point de contrôle du second segment par (175, 100) :

<path fill="none" stroke="#137f74" stroke-width="5"
  d="M30 150 C60 150 100 100 150 100
     C175 100 240 50 270 50"/>

Les deux poignées adjacentes sont maintenant sur la droite horizontale passant par le raccord. La poignée entrante mesure 50 unités et la sortante 25. La direction tangente concorde malgré leurs longueurs différentes.

Pour une paire réfléchie, remplace plutôt ce point de contrôle par (200, 100). Les deux poignées s’étendent alors sur 50 unités depuis le nœud commun. Cela modifie davantage la forme du second segment que la correction à poignées inégales : compare donc les deux au contour que tu veux préserver.

Chaque version comporte deux segments cubiques et trois nœuds sur la courbe : départ, raccord et arrivée. Les points de contrôle sont des coordonnées distinctes. La comparaison est un rendu original dans le navigateur, et non un résultat tracé par PerfectVector ou une capture de l’outil de nœuds d’un éditeur.

Vérifie la direction séparément de la longueur des poignées

Pour une cubique se terminant au raccord J avec un dernier point de contrôle A, sa dérivée finale est 3 × (J − A). La cubique suivante, partant de J avec un premier point de contrôle B, a une dérivée initiale de 3 × (B − J).

Dans notre exemple, la dérivée entrante est (150, 0) dans chaque panneau :

L’accord des directions tangentes est appelé continuité G1. L’égalité des dérivées premières correspond à la continuité C1, avec l’intervalle de paramètre habituel de zéro à un pour chacune de ces deux cubiques. Les notes de Michigan Tech sur les dérivées de Bézier établissent ces conditions aux extrémités.

Le test de direction suppose des dérivées d’extrémité non nulles. Une poignée ramenée sur son nœud nécessite un contrôle distinct, car sa dérivée première est nulle. La colinéarité seule ne suffit pas non plus si les deux poignées se trouvent du même côté du raccord : le sens du déplacement peut s’inverser.

Aucun des exemples alignés ne garantit une courbure identique de part et d’autre du raccord. Une courbe peut ne présenter aucun angle tangent et devoir encore être remodelée pour correspondre à la silhouette voulue d’un logo. Inspecte toute la courbe, pas seulement le nœud sélectionné.

Utilise S uniquement si tu veux cette réflexion

La version réfléchie peut s’écrire plus brièvement :

<path fill="none" stroke="#137f74" stroke-width="5"
  d="M30 150 C60 150 100 100 150 100
     S240 50 270 50"/>

Ici, S déduit le premier point de contrôle en réfléchissant le dernier point de contrôle de la cubique précédente autour du point courant :

reflectedX = 2 × 150 − 100 = 200
reflectedY = 2 × 100 − 100 = 100

Les paires restantes dans S240 50 270 50 précisent le second point de contrôle et le point final. C’est la version avec poignées réfléchies 50/50. Elle ne peut pas remplacer la version 50/25 sans changer la courbe.

La spécification des commandes cubiques SVG limite cette règle de réflexion à une commande précédente C, c, S ou s. Si la commande précédente est une ligne ou une courbe quadratique, le premier point de contrôle implicite est plutôt le point courant.

Par exemple :

M30 150 L150 100 S240 50 270 50

Après la ligne, ce dernier segment se comporte comme C150 100 240 50 270 50. Sa première poignée est ramenée sur le départ. Il peut tout de même se courber, puisque le reste de la géométrie de contrôle n’est pas colinéaire ; S après une ligne n’impose pas un segment droit.

Notre vérification dans le navigateur a comparé le tracé S réfléchi à son équivalent explicite C, puis cet exemple de ligne suivie de S à sa propre expansion explicite. Les deux comparaisons concordaient aux positions échantillonnées. Cela confirme ces exemples, tandis que la spécification définit la règle générale.

Effectue la même correction dans un éditeur de nœuds

Travaille sur une copie, sélectionne le tracé et affiche les poignées autour du raccord suspect. Confirme qu’il existe un nœud commun unique. Deux extrémités distinctes qui ne font que se chevaucher peuvent nécessiter une correction de topologie avant de changer la direction des poignées.

Dans Inkscape, le guide des types de nœuds distingue les nœuds lisses, dont les poignées partagent une droite, des nœuds symétriques, dont les poignées restent aussi de longueur égale. Utilise le type adapté au contour au lieu de rendre chaque raccord symétrique.

Garde le nœud fixe lorsque tu ajustes la direction de la poignée. Raccourcis ou allonge ensuite les poignées pour retrouver la forme voulue autour du raccord. Compare le résultat à fort zoom et à taille de consultation normale, puis rouvre le SVG enregistré pour inspecter le tracé exporté.

Si le tracé comporte des nœuds serrés sur toute la courbe, une correction locale des poignées peut ne pas suffire. Le guide du nombre de nœuds SVG couvre la simplification, tandis que la méthode de modification SVG traite de changements plus larges. Préserve les angles volontaires pendant chacune de ces opérations.

Compare la forme corrigée à sa source

Un raccord lisse est un contrôle de qualité parmi d’autres. Il ne prouve pas qu’un logo tracé corresponde à l’original. Compare sa silhouette, ses ouvertures et ses angles volontaires avec la liste de contrôle de qualité d’un traçage vectoriel.

Si seul un PNG ou JPG du symbole est disponible, le vectoriseur de logos PerfectVector peut préparer un SVG candidat modifiable. Inspecte ses contours, puis corrige localement une poignée lorsqu’un angle indésirable subsiste. Garde la référence matricielle à côté du tracé modifié pour éviter que le lissage efface un détail que tu voulais conserver.

Utilise un original vectoriel existant lorsqu’il est disponible. Une géométrie de marque exacte ou une source très endommagée peut nécessiter une reconstruction manuelle ; le guide de vectorisation des logos explique ce choix. Retoucher un seul raccord est utile lorsque le reste du contour convient déjà.

FAQ

Les deux poignées de Bézier doivent-elles avoir la même longueur pour un raccord lisse ? Non. Des poignées non nulles peuvent avoir des longueurs différentes tout en partageant la même direction tangente. Au nœud commun, elles doivent être sur une même droite, de part et d’autre. Des poignées égales et réfléchies ajoutent l’égalité des dérivées premières pour les deux segments cubiques utilisés ici.

Pourquoi la commande SVG S change-t-elle ma courbe ? S déduit son premier point de contrôle. Après C ou S, elle réfléchit le dernier point de contrôle de la cubique précédente ; après d’autres types de commandes, elle utilise le point courant. Ce point déduit peut différer du point de contrôle explicite que tu voulais.

Dois-je lisser tous les nœuds d’un logo tracé ? Non. Préserve les angles, pointes et encoches volontaires. Corrige localement un angle indésirable, puis compare toute la silhouette à la source. Un raccord à tangente continue ne suffit pas à établir une reconstruction précise.

Sources

1. MDN — Tracés SVG — Explique les points de contrôle cubiques et la syntaxe des commandes de tracé.
2. Michigan Tech — Dérivées de Bézier — Établit les tangentes d’extrémité et les conditions de raccordement des courbes.
3. W3C — Commandes de Bézier cubiques SVG — Définit la règle de réflexion et le point de contrôle de repli de S.
4. Inkscape — Types de nœuds — Distingue les comportements des nœuds anguleux, lisses, symétriques et automatiques.

Si ton logo provient d’une image matricielle, prépare un SVG candidat avec PerfectVector, inspecte les raccords et la silhouette, puis corrige uniquement les courbes qui le nécessitent en préservant les angles volontaires.