Courbes de Bézier cubiques avec SVG

Ci-dessus un canevas SVG contenant trois courbes de Bézier cubiques : image SVG

Le code du fichier SVG

<?xml version="1.0" encoding="utf-8"?> <svg width ="300" height ="200" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" > <style> path {fill : none ; stroke-width : 2 ; } .rouge {stroke : red ; } .bleu {stroke : blue ; } .verte {stroke : green; } </style> <title>courbe de Bézier avec SVG</title> <path d="M 0,100 C 100,50 200,150 300,100" class ='rouge'/> <path d="M 0,100 C 100,0 200,200 300,100" class ='bleu'/> <path d ="M 0,100 c100,-150 200,150 300,0" class ="verte" /> </svg>

Commentaire du code

Les courbes de Bézier cubiques (ou "courbes cubiques") sont semblables aux courbes de Bézier quadratiques à la différence qu’il n’y a pas un seul point de contrôle mais deux !

Comme dans tout path la commande C est précédée de la commande M avec les coordonnées du point de départ.

Dans l'exemple les trois courbes cubiques ont le même point de départ et le même point d'arrivé mais la courbe de couleur bleue est plus creusée que la rouge car les ordonnées de ses deux points d'inflexion sont respectivement 0 et 200 alors que ces mêmes ordonnées sont seulement 50 et 150 pour la courbe rouge.

Faut-il rappeler que la commande c peut être écrite en minuscules suivie des coordonnées en relatif des points d'inflexion et du point d'arrivée c'est à dire par rapport au point de départ comme c'est le cas pour la courbe de Bézier verte.

Pour cette courbe verte les ordonnées des points d'inflexion sont respectivement -150 et 150 par rapport à l'ordonnée du point d'origine alors qu'elles sont -50 et 50 pour la courbe rouge et -100 et 100 pour la courbe bleue.
C'est pour cette raison que c'est la courbe verte la plus creusée.
Retour menu