Découvrir le SVG/Chemins
Un chemin est une courbe ; c'est une extension des notions de ligne brisée "()" et de polygone. On crée un chemin avec l'élément codice_1. L'attribut principal est l'attribut codice_2 (pour données, ") qui contient les instructions permettant le tracé.
Les coordonnées peuvent être absolues, c'est-à-dire exprimées par rapport au repère de l'image ; elles peuvent aussi être relatives, c'est-à-dire exprimées par rapport au point précédent. Les instructions utilisant les coordonnées absolues sont en capitales — codice_3, codice_4… — et les instructions utilisant des coordonnées relatives sont en minuscules — codice_5, codice_6…
Ligne brisée et polygone.
Le tracé de lignes brisées et de polygones utilise trois instructions :
Comme pour les éléments codice_14 et codice_15, les coordonnées sont exprimées en codice_16 et sont séparées par des espaces ou des virgules. Si plusieurs points se suivent, alors on considère qu'ils sont reliés entre eux. Ainsi, les syntaxes suivantes sont équivalentes et permettent de tracer un trait entre les points (0, 0) et (, ) :
<path d="M 0 0 L 50 50" />
<path d="M0 0 L50 50" />
<path d="M0 0, 50 50" />
<path d="M0 0 50 50" />
<path d="M0, 0, 50, 50" />
Si l'on omet l'instruction « tracer jusqu'à » "()", alors : si la première commande « aller à » "()" utilise des coordonnées absolue, le « tracer jusqu'à » utilise aussi des coordonnées absolues, et si la première commande « aller à » utilise des coordonnées relatives, le « tracer jusqu'à » utilise aussi des coordonnées relatives. Ainsi, les notations suivantes sont équivalentes :
De la même manière, si une série de points suit une instruction « tracer jusqu'à », on leur applique exactement la même instruction :
Voici un exemple complet, à comparer avec celui du chapitre précédent "Éléments graphiques > Lignes et polygones" :
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
 "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="10cm" height="10cm" version="1.1"
 xmlns="http://www.w3.org/2000/svg">
 <desc> Chemin formant un polygone papillon </desc>
 <path
 d="M200 0, l50 50, 50 -50, 50 100 z"
 stroke="magenta" fill="cyan"
</svg>
Les commandes « aller à » permettent de faire un tracé interrompu, par exemple :
 <path
 d="M0 0, l50 50 m0 -50, l50 50"
 stroke="black" fill="none"
Quatre commandes viennent faciliter le tracé : 
Par exemple, le code source suivant trace un carré de côté 100 et parallèle aux axes du repère :
 <path
 d="M0 0 h100 v100 h-100 z"
 stroke="black" fill="none"
Arcs elliptiques.
Un chemin peut porter des arcs elliptiques. Un arc relie le point courant (le dernier point déclaré) à un point de destination en respectant un certain nombre de contraintes : les rayons des deux axes et l'inclinaison des axes. Le centre de l'ellipse et l'angle balayé par l'arc sont donc déterminés automatiquement, en suivant deux consignes (puisque l'on peut tracer quatre arcs à partir des contraintes définies) :
Le tracé d'un arc elliptique se fait avec la commande de chemin codice_29 (coordonnées absolues) ou bien codice_30 (coordonnées relatives) suivi des paramètres suivants, dans l'ordre :
Dans l'exemple ci-dessous, le point (0, 0) sera relié au point (10, 10) avec un arc d'ellipse incliné de , dont le rayon "x" vaut 20 et le rayon "y" vaut 13, suivant le petit arc dans le sens positif.
<path
 d="M0 0
 A20 13, -15, 0 1, 10 10"
 stroke="black" fill="none"
Courbes de Bézier.
Une courbe de Bézier est un arc courbe dont l'équation est un polynôme, et qui est construit à partir de points dits « points de contrôles ». Une courbe de Bézier de degré "n" est donc définie par "n" + 1 points (P0, P1, …, P"n") tels que :
Le SVG travaille avec deux types de courbes de Bézier :
Le SVG permet de tracer une portion de courbe reliant le point courant P0("x"0, "y"0) à un point de destination P"n"("xn", "yn") à l'aide d'une courbe de Bézier, en définissant les points de contrôle relatifs.
Courbes quadratiques.
Considérons une courbe de Bézier quadratique entre les points P0("x"0, "y"0) et P2("x"2, "y"2), avec le point de contrôle intermédiaire P1("x"1, "y"1). La tangente en P0 est suivant le vecteur P0P1("x"1 – "x"0, "y"1 – "y"0) ; la tangente en P2 est suivant le vecteur P1P2("x"2 – "x"1, "y"2 – "y"1).
Considérons un point B("x", "y") de la courbe. On note les vecteurs position en gras : si O est l'origine du repère, formula_3 et formula_4. L'équation paramétrique de la courbe est alors :
Avec les attributs codice_35 et codice_36, on définit le point d'arrivée ("x"2, "y"2) et le point de contrôle intermédiaire ("x"1, "y"1) : le code
<path
 d="M0 0
 Q5 2, 10 10"
 stroke="black" fill="none"
trace une courbe du point P0(0, 0) au point P2(10, 10) avec le point de contrôle intermédiaire P1(5, 2). Ainsi, la tangente en P0 suit le vecteur P0P1 (5, 2) et la tangente en P2 suit le vecteur P1P2 (5, 8).
Avec les attributs codice_37 et codice_38, on n'indique que le point d'arrivée P2. Le point de contrôle intermédiaire P1 est le symétrique du point de l'arc précédent par rapport au point de départ P0. Ainsi, la tangente à gauche et à droite de P0 est la même, le point ne présente par d'angle.
Courbes cubiques.
Considérons une courbe de Bézier cubique entre les points P0("x"0, "y"0) et P3("x"3, "y"3), avec les points de contrôle intermédiaires P1("x"1, "y"1) et P2("x"2, "y"2). La tangente en P0 est donc suivant le vecteur P0P1("x"1 – "x"0, "y"1 – "y"0) ; la tangente en P3 donc suivant le vecteur P2P3("x"3 – "x"2, "y"3 – "y"2).
Avec les mêmes notations que ci-dessus, l'équation paramétrique de la courbe est :
Pour tracer une telle courbe, on utilise les attributs codice_39 et codice_40 sous la forme
 <path
 d="Mx0 y0
 Cx1 y1, x2 y2, x3 y3"
Les attributs codice_41 et codice_42 permettent d'avoir des courbes sans angles : le premier point de contrôle P1 est le symétrique du point de contrôle précédent par rapport au point P0. La syntaxe est donc codice_43.
Notes.
"../Éléments graphiques/" < ↑ > "../Manipulations avancées/"

Recettes de villages qui bougent/Recettes de projets

Introduction.
Dans des groupes locaux, il serait utile d'avoir des fiches de "recettes de projets" qui décrivent ce qu'est par exemple un "incroyable comestible" (mettre des bacs avec des plantes aromatiques et des légumes sur l'espace public pour que les gens se servent) ou une boite à don (le nom parle de lui-même). Ces fiches recettes doivent vous permettre de développer un ou plusieurs projet chez vous...
Organisation du livre.
Comment contibuer :
Une recette vide : avec les différentes parties pour vous aider à lancer votre recette

Recettes de villages qui bougent/Recettes de projets/Gratiferia