doc-svg/formes/index.md

layout, title

layout	title
layouts/page.njk	Formes

Rectangle

Le rectangle est défini par les coordonnées de son sommet en haut à gauche puis par sa largeur et sa hauteur.

<rect x="50" y="50" width="200" height="100" fill="#3ed124" />

Cercle

Le cercle est défini par les coordonnées de son centre et son rayon.

<circle cx="100" cy="100" r="50" fill="#3ed124" />

Ellipse

L'ellipse est définie par les coordonnées de son centre et par ses deux rayons.

<ellipse cx="100" cy="100" rx="100" ry="50" fill="#3ed124" />

Ligne droite

La ligne droite est définie par les coordonnées du point 1 de départ et les coordonnées du point 2 d'arrivée. La ligne ne peut être remplie par une couleur. Il faut définir un contour pour la voir.

<line x1="50" y1="50" x2="250" y2="100" stroke="#f00000" stroke-width="3" />

Polyligne

La polykigne est une ligne brisée, non fermée, entre plusieurs points. C'est un ensemble de segments réliés entre eux. La forme est dite ouverte car le dernier point n'est pas connecté avec le premier. Elle peut tout de même être remplie avec un couleur de fond.

<polyline points="50,200 100,125 200,175 300,50 400, 200"
    stroke="#f00000" stroke-width="3" fill="#3ed124" />

liste de points

La liste de points consiste en suite de 2 nombres, le premier pour l'abscisse le deuxième pour l'ordonnée. Les points et les coordonnées sont séparés au choix par un espace ou par une virgule.

La virgule décimale est représentée par un point : 50.425

<polyline points="50,25 100,75 200,25 300,50 400,25" ... />
<!-- Les points sont séparés par une virgule les coordonnées par un espace -->

<polyline points="50 75,100 125,200 75,300 100,400 75" ... />
<!-- Les points sont séparés par un espace les coordonnées par une virgule -->

<polyline points="50 125 100 175 200 125 300 150 400 125" ... />
<!-- Les points et les coordonnées sont séparées par un espace -->

<polyline points="50 175,100,225,200,175 300 200 400, 175" ... />
<!-- Les points et les coordonnées sont séparées par un espace ou ue virgule.
     Le chemin est valide mais la relecture est difficile. -->

Polygone

Le polygone est une polyligne dont le dernier point est connecté avec le premier. La forme est automatiquement fermée.

<polygon points="50 150, 150 205, 250 100, 350 120"
    fill="#3ed124" stroke="#f00000" stroke-width="3" />

Règle de remplissage

Dans le cas où les segments se croisent, l'attribut fill-rule définit l'algorithme à utiliser pour déterminer les parties qui sont considérées à l'intérieur de la forme.

<polygon points="100,25 50,125 175,50 25,50 150,125" stroke="#f00000" stroke-width="3" fill="#3ed124" fill-rule="nonzero" />
<polygon points="300,25 250,125 375,50 225,50 350,125" stroke="#f00000" stroke-width="3" fill="#3ed124" fill-rule="evenodd" />

evenodd fill-rule est un attribut de présentation vous pouvez l'utiliser dans un feuille de style CSS.

Les chemins

Les chemins sont plus compliqués, ils intègrent des portions en ligne ou en courbe. Des commandes permettent de savoir comment dessiner chaque portion.

<path d="M 208.2973,14.715129 A 59.083692,63.810728 0 0 0 154.73861,51.247982 59.083692,63.810728 0 0 0 41.983458,78.647627 c 0,66.976923 112.755152,155.264663 112.755152,155.264663 0,0 112.75513,-88.28774 112.75513,-155.264663 A 59.196446,63.932505 0 0 0 208.2973,14.715129 Z"
fill="#3ed124">

Les commandes sont définies par des lettres, les lettres majuscules prennent en compte des coordonnées absolues tandis que les lettres minuscules travaillent en coordonnées relativement au point précédent.

<path d="M 50 125
  C 100 50 225 50 350 100
  V 200
  H 250
  Q 200 125 50 175
  Z" />

Si une plusieurs commandes identiques se suivent il n'est pas nécessaire de répéter la lettre de la commande. Il suffit de mettre les points les uns à la suite des autres comme pour une polyligne.

Commande M, m

Move to : se rendre à un point sans dessiner. Toujours pour le premier point. Ensuite si la forme complexe est consititué de plusieurs parties.

Commande Z, z

ClosePath Fermer le tracé : Se rendre au premier point en ligne droite. Il n’y a pas de différence entre la commande en majuscule et en minuscule.

Commande L, l

Line to : Line droite vers le point. Identique à polyline

Commande H, h

Horizontal line to : Ligne Horizontale

Commande V, v

Vertical line to : Ligne Verticale

<path d="M 50 50
  V 200
  H 100
  L 150 150 200 200 250 150
  v -50
  h -50
  Z" />

Commande A, a

Arc : Arc elliptique 7 nombres sont nécessaires : rayon x, rayon y, inclinaison de l'axe x en dégrés, grand côté ou petit côté, angle positif ou négatif, coordonnées du point d'arrivé.

Les cordonnées du centre de l'ellipse et les rayons réels sont calculés pour satisfaire les conditions des points d'arrivée.

Pour un rayon rx et un rayon ry donnés, il existe deux ellipses A et B pouvant connecter deux points quelconques.

Pour chacune des deux ellipses, il existe deux chemins possibles, ce qui donne quatre arcs possibles.

large-arc-flag (0 ou 1) détermine si l’arc doit être supérieur ou inférieur à 180 degrés ; au final, il détermine dans quelle direction l’arc va parcourir une ellipse donnée.

sweep-flag (0 ou 1) détermine si l’arc doit commencer son mouvement à un angle négatif ou positif, permettant ainsi de choisir lequel des deux cercles est parcouru.

<path d="M 100 100, A 100 50, 30 1 1, 250 150" class="A" />
<path d="M 100 100, A 100 50, 30 0 1, 250 150" class="B" />
<path d="M 100 100, A 100 50, 30 0 0, 250 150" class="C" />
<path d="M 100 100, A 100 50, 30 1 0, 250 150" class="D" />

L'illustration dans cette page ne fonctionne pas avec Firefox.

Commande Q, q, T, t

Courbe quadratique : coordonnées du point de contrôle et coordonnées du point d'arrivée

<path d="M 0, 150
  Q 250 75, 300 150
  Z" />

T : Prolongation d'une courbe quadratique : Seules les coordonnées du point d'arrivée sont renseignés. Le point de contrôle de la commande T est le symétrique de la commande Q précédente.

<path d="M 0, 150
  Q 250 75, 300 150
  T 450 150
  Z" />

Commande C, c, S, s

C CurveTo : Courbe cubique (ou courbe de Bézier) : 2 points de contrôle et un point d'arrivée

<path d="M 0, 150
  C 100 50, 225 100, 350 150
  T 450 150
  Z" />

S Shorthand CuveTo : Prolongation d'une courbe de Bézier cubique, le premier point d'inflexion est le symétrique du point d'inflexion de la courbe précédente

<path d="M 0, 150
  C 50 50, 150 100, 200 150
  S 350 225, 400 150
  Z" />

L'utilisation d'un logiciel comme inkscape n'optimise pas forcement les commandes, mais cela est bien plus pratique pour dessiner des formes complexes.

Exercice