Chapitre 11. SVG

Élément	Rendu
Point de départ <path d="M x1 y1"/>
Ligne horizontale <path d="M x1 y1 H x2"/>
Ligne verticale <path d="M x1 y1 V y2"/>
Ligne <path d="M x1 y1 L x2 y2"/>
Courbe de Bézier quadratique <path d="M x1 y1 Q cx cy x2 y2"/>
Courbe de Bézier quadratique avec partage de point de contrôle <path d="M x1 y1 Q cx cy x2 y2 T x3 y3"/>
Courbe de Bézier cubique <path d="M x1 y1 C cx1 cy1 cx2 cy2 x2 y2"/>
Courbe de Bézier cubique avec partage de point de contrôle <path d="M x1 y1 C cx1 cy1 cx2 cy2 x2 y2 S cx3 cy3 x3 y3"/>
Fermeture du chemin par une ligne <path d="M x1 y1 Q cx cy x2 y2 Z"/>

Pour une introduction aux courbes de Bezier, on peut se réferer à cette partie.

<svg width="200" height="100">
  <rect x="10" y="10" width="180" height="80" style="stroke:black;fill:none"/>
  <ellipse cx="100" cy="50" rx="90" ry="40" style="stroke:black;fill:red"/>
  <ellipse class="circle" cx="100" cy="50" rx="40" ry="40"/>
</svg>

<svg width="200" height="100">
  <rect x="10" y="10" width="180" height="80" stroke="black" fill="none"/>
  <ellipse cx="100" cy="50" rx="90" ry="40" stroke="black"/>
  <ellipse class="circle" cx="100" cy="50" rx="40" ry="40" fill="red"/>
</svg>

<svg width="200" height="100">
  <style type="text/css">
    rect { stroke: red}
    ellipse { fill: red }
    ellipse.circle { fill: white }
  </style>
  <rect x="10" y="10" width="180" height="80"/>
  <ellipse cx="100" cy="50" rx="90" ry="40"/>
  <ellipse class="circle" cx="100" cy="50" rx="40" ry="40"/>
</svg>

<?xml-stylesheet href="stylesvg.css" type="text/css"?>
<svg width="200" height="100">
  <rect x="10" y="10" width="180" height="80"/>
  <ellipse cx="100" cy="50" rx="90" ry="40"/>
  <ellipse class="circle" cx="100" cy="50" rx="40" ry="40"/>
</svg>

<svg width="200" height="100">
  <g style="stroke: black; fill: none">  
    <rect x="10" y="10" width="180" height="80"/>
    <ellipse cx="100" cy="50" rx="90" ry="40"/>
    <ellipse class="circle" cx="100" cy="50" rx="40" ry="40"/>
  </g>
</svg>

Les courbes de Bézier sont des courbes de degré 3. Elles sont donc déterminées par quatre points de contrôle. La courbe déterminée par les points P₁, P₂, P₃ et P₄ va de P₁ à P₄ et ses dérivées en P₁ et P₄ sont respectivement 3(P₂ - P₁) et 3(P₃ - P₄). Ceci signifie en particulier que la courbe est tangente en P₁ et P₄ aux droites P₁P₂ et P₃P₄.

Si les coordonnées des points de contrôle sont (x₁, y₁), (x₂, y₂), (x₃, y₃) et (x₄, y₄), la courbe est décrites par les formules suivantes qui donnent la courbe sous forme paramétrée.

La méthode de Casteljau permet la construction géométrique de points de la courbe. Soient P₁, P₂, P₃ et P₄ les points de contrôle et soient L₂, H et R₃ les milieux des segments P₁P₂, P₂P₃ et P₃P₄. Soient L₃ et R₂ les milieux des segments L₂H et HR₃ et soit L₄ = R₁ le milieu du segment L₃R₂ (cf. Figure ). Le point L₄ = R₁ appartient à la courbe de Bézier et il est obtenu pour t = 1/2. De plus la courbe se décompose en deux courbes de Bézier : la courbe de points de contrôle L₁ = P₁, L₂, L₃ et L₄ et la courbe de points de contrôle R₁, R₂, R₃ et R₄ = P₄. Cette décomposition permet de poursuivre récursivement la construction de points de la courbe.

On remarque que chaque point de la courbe est barycentre des points de contrôle affectés des poids (1-t)³, 3t(1-t)², 3t²(1-t) et t³. Comme tous ces poids sont positifs, la courbe se situe entièrement dans l'enveloppe convexe des points de contrôle.

Si dans la construction précédente, les milieux sont remplacés par les barycentres avec les poids t et 1-t, on obtient le point de la courbe de coordonnées x(t), y(t).

Figure 11.3. Construction de Casteljau

Les courbes B-splines sont aussi des courbes de degré 3. Elles sont donc aussi déterminées par quatre points de contrôle. Contrairement à une courbe de Bézier, une B-spline ne passe par aucun de ses points de contrôle. Par contre, les B-splines sont adaptées pour être mises bout à bout afin de former une courbe ayant de multiples points de contrôle.

Soient n+3 points P₁,…,P_n+3. Ils déterminent n B-spline s₁,…,s_n de la manière suivante. Chaque B-spline s_i est déterminée par les points de contrôle P_i, P_i+1, P_i+2 et P_i+3.

Si les coordonnées des points de contrôle sont (x₁, y₁), …, (x_n+3, y_n+3), l'équation de la spline s_i est la suivante.

À partir des équations définissant les splines s_i, on vérifie facilement les formules suivantes qui montrent que la courbe obtenue en mettant bout à bout les courbes s_i est de classe C², c'est-à-dire deux fois dérivable.

Puisque seules les courbes de Bézier sont présentes en SVG, il est nécessaire de savoir passer d'une B-Spline à une courbe de Bézier. La B-spline de points de contrôle P₁, P₂, P₃ et P₄ est en fait la courbe de Bézier dont les points de contrôle P'₁, P'₂, P'₃ et P'₄ sont calculés de la manière suivante. Si les coordonnées des points P₁, P₂, P₃ et P₄ sont (x₁, y₁), (x₂, y₂), (x₃, y₃) et (x₄, y₄), les coordonnées (x'₁, y'₁), (x'₂, y'₂), (x'₃, y'₃) et (x'₄, y'₄) des points P'₁, P'₂, P'₃ et P'₄ sont données par les formules suivantes pour les premières coordonnées et des formules similaires pour la seconde.

Les formules suivantes permettent la transformation inverse