SVG : courbes de Bézier (quadratique et cubique)

Comme vous savez il existe deux types de courbes de Bézier : les courbes quadratiques et les courbes cubiques.

Courbes quadratiques

Exemple

image SVG

Le code du fichier SVG correspondant

<?xml version="1.0" encoding="utf-8"?> <svg width ="400" height ="200" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" > <style> path{ stroke:black; stroke-width:4px; fill:none; } </style> <circle cx = '50%' cy = '50%' r= '40' fill ='skyblue'/> <circle cx = '50%' cy = '50%' r= '6' fill ='black'/> <path d="M 100,100 Q 200,5 300,100"/> <path d="M 100,100 Q 200,195 300,100"/> </svg>

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

Pour comprendre le fonctionnement d’une courbe quadratiques il faut imaginer un segment de métal qui, attiré par un aimant (le point d'inflexion), se courbe vers ce point aimant (sans jamais le toucher).
Dans l'exemple Les deux points d'inflexion ont la même abcsisse (200) mais des ordonnées opposées : 5 et 195.
Donc la première ligne se courbe vers le haut et la deuxième se courbe vers le bas.

Feuille de style dans un fichier SVG

Notez que le fichier SVG contient une feuille de style.

Dans un fichier SVG la feuille de style CSS doit être l'intérieur du conteneur STYLE (comme dans un fichier HTM !).
Une règle de style en ligne (attribut style) est aussi possible (comme dans un fichier HTM !).
Vous pouvez aussi mettre en forme un objet SVG en appelant une classe (définie dans la feuille de style) via l'attribut class.

Courbes cubiques avec SVG

Exemple

image SVG

Le code du fichier SVG correspondant

<?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>

Les courbes de Bézier cubiques (ou tout simplement "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 chemin 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.
C'est la technique que j'ai réalisé pour la courbe 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