Update Basic Shapes (SVG) : remove redundant § (#1572)

* Update index.html

Modification de la définition de la valeur de l'attribut "points" de l'élément "polyline". ( car la version en-US est moins limitative : "A list of points, each number separated by a space, comma, EOL, or a line feed character.)
Au niveau de l'élément "polygon", renvoi vers la définition de la valeur de l'attribut "points" de l'élément "polyline" (car elle est identique).

* Review PR 1572 - linting and minor rewordings, removing the ID attribute as it won't be migrated in MD

Co-authored-by: julieng <julien.gattelier@gmail.com>

1 files changed, 77 insertions, 70 deletions

diff --git a/files/fr/web/svg/tutorial/basic_shapes/index.html b/files/fr/web/svg/tutorial/basic_shapes/index.html
index 3612cf6b3f..9df236c6fd 100644
--- a/files/fr/web/svg/tutorial/basic_shapes/index.html
+++ b/files/fr/web/svg/tutorial/basic_shapes/index.html
@@ -1,22 +1,21 @@
 ---
 title: Formes de base
 slug: Web/SVG/Tutorial/Basic_Shapes
-tags:
-  - SVG
 translation_of: Web/SVG/Tutorial/Basic_Shapes
 original_slug: Web/SVG/Tutoriel/Formes_de_base
 ---
-<p>{{ PreviousNext("SVG/Tutoriel/Positionnement", "Web/SVG/Tutoriel/Paths") }}</p>
+<p>{{PreviousNext("Web/SVG/Tutorial/Positions","Web/SVG/Tutorial/Paths")}}</p>
 
-<p>Il existe tout un ensemble de formes de base utilisées pour faire du dessin via SVG. Le but de ces formes assez transparent, si on regarde attentivement les noms de chaque élément. Des attributs permettent de configurer leur position et leur taille, mais vous pourrez retrouver les détails de chaque élément avec tous ses attributs à <a href="/fr/SVG/Element" title="fr/SVG/Element">la page des références SVG</a>. Nous nous contenterons ici de couvrir les fonctions de base qui nous sont nécessaires, car elles sont utilisées dans la plupart des documents SVG.</p>
+<p>Il existe tout un ensemble de formes de base utilisées pour faire du dessin via SVG. Le but de ces formes s'avère assez transparent si on regarde attentivement les noms de chaque élément. Des attributs permettent de configurer leur position et leur taille, mais vous pourrez retrouver les détails de chaque élément avec tous ses attributs à <a href="/fr/docs/Web/SVG/Element">la page des références SVG</a>. Nous nous contenterons ici de couvrir les fonctions de base qui nous sont nécessaires, car elles sont utilisées dans la plupart des documents SVG.</p>
 
-<h3 id="Ajout_de_formes">Ajout de formes</h3>
+<h2 id="basic_shapes">Formes de base</h2>
 
-<p>Pour insérer une forme, vous devez ajouter un élément dans un document. Des éléments différents  correspondent à des formes différentes et ont des attributs différents pour décrire leur taille et leur position. Certaines déclarations sont très fortement redondantes en ce qu'elles peuvent être créées par d'autres formes, mais elles sont toutes là de manière à faciliter votre vie et à rendre le document SVG aussi court et lisible que possible. Toutes les formes de bases sont affichées sur l'image de gauche. Le code pour générer tout cela ressemble à cela :</p>
+<p>Pour insérer une forme, vous devez ajouter un élément dans un document. Des éléments différents correspondent à des formes différentes et ont des attributs différents pour décrire leur taille et leur position. Certaines déclarations sont très fortement redondantes en ce qu'elles peuvent être créées par d'autres formes, mais elles sont toutes là de manière à faciliter votre vie et à rendre le document SVG aussi court et lisible que possible. Toutes les formes de bases sont affichées sur l'image de gauche. Le code pour générer tout cela ressemble à cela :</p>
 
-<p><img alt="" class="internal" src="/@api/deki/files/359/=Shapes.png" style="float: right;"></p>
+<p><img alt="" src="shapes.png" style="float: right;"></p>
 
-<pre class="brush: xml">&lt;?xml version="1.0" standalone="no"?&gt;
+<pre class="brush:xml">
+&lt;?xml version="1.0" standalone="no"?&gt;
 &lt;svg width="200" height="250" version="1.1" xmlns="http://www.w3.org/2000/svg"&gt;
 
   &lt;rect x="10" y="10" width="30" height="30" stroke="black" fill="transparent" stroke-width="5"/&gt;
@@ -25,7 +24,7 @@ original_slug: Web/SVG/Tutoriel/Formes_de_base
   &lt;circle cx="25" cy="75" r="20" stroke="red" fill="transparent" stroke-width="5"/&gt;
   &lt;ellipse cx="75" cy="75" rx="20" ry="5" stroke="red" fill="transparent" stroke-width="5"/&gt;
 
-  &lt;line x1="10" x2="50" y1="110" y2="150" stroke="orange" fill="transparent" stroke-width="5"/&gt;
+  &lt;line x1="10" x2="50" y1="110" y2="150" stroke="orange" stroke-width="5"/&gt;
   &lt;polyline points="60 110 65 120 70 115 75 130 80 125 85 140 90 135 95 150 100 145"
       stroke="orange" fill="transparent" stroke-width="5"/&gt;
 
@@ -38,120 +37,128 @@ original_slug: Web/SVG/Tutoriel/Formes_de_base
 
 <div class="note"><strong>Note :</strong> les attributs <code>stroke</code>, <code>stroke-width</code> et <code>fill</code> sont détaillés plus loin dans ce tutoriel.</div>
 
-<h3 id="Figures_de_bases">Figures de bases</h3>
+<h3 id="rectangle">Rectangle</h3>
 
-<h4 id="Rectangles">Rectangles</h4>
+<p>L'élément <a href="/fr/docs/Web/SVG/Element/rect"><code>&lt;rect&gt;</code></a> permet de dessiner des rectangles. Il existe 6 attributs de base qui contrôlent la position et la forme du rectangle à l'écran. L'image précédente affichait 2 rectangles, ce qui est un peu répétitif. Celui de droite possède des attributs <code>rx</code> et <code>ry</code> définis, ce qui lui donne des coins arrondis. Si ces attributs ne sont pas définis, leur valeur par défaut est de 0, ce qui a pour résultats d'afficher un rectangle avec des angles droits.</p>
 
-<p>L'élément <a href="/fr/SVG/Element/rect" title="rect">rect</a>, comme son nom ne l'indique peut-être pas, dessine à l'écran des rectangles. Il existe 6 attributs de base qui contrôlent la position et la forme du rectangle dessiné ici. L'image précédente affichait 2 rectangles, ce qui est un peu répétitif. Celui de droite possède des attributs <code>rx</code> et <code>ry</code> définis, ce qui lui donne des coins arrondis. Si ces attributs ne sont pas définis, leur valeur par défaut est de 0, ce qui a pour résultats d'afficher un rectangle avec des angles droits.</p>
-
-<pre class="brush: xml"> &lt;rect x="10" y="10" width="30" height="30"/&gt;
- &lt;rect x="60" y="10" rx="10" ry="10" width="30" height="30"/&gt;
+<pre class="brush:xml">
+&lt;rect x="10" y="10" width="30" height="30"/&gt;
+&lt;rect x="60" y="10" rx="10" ry="10" width="30" height="30"/&gt;
 </pre>
 
 <dl>
- <dt>x</dt>
- <dd>Position du rectangle sur l'axe horizontal par rapport au coin supérieur gauche.</dd>
- <dt>y</dt>
- <dd>Position du rectangle sur l'axe vertical par rapport au coin supérieur gauche.</dd>
- <dt>width</dt>
+ <dt><code>x</code></dt>
+ <dd>Position du coin supérieur gauche du rectangle sur l'axe horizontal.</dd>
+ <dt><code>y</code></dt>
+ <dd>Position du coin supérieur gauche sur l'axe vertical.</dd>
+ <dt><code>width</code></dt>
  <dd>Largeur du rectangle.</dd>
- <dt>height</dt>
+ <dt><code>height</code></dt>
  <dd>Hauteur du rectangle.</dd>
- <dt>rx</dt>
+ <dt><code>rx</code></dt>
  <dd>Rayon x des coins du rectangle.</dd>
- <dt>ry</dt>
+ <dt><code>ry</code></dt>
  <dd>Rayon y des coins du rectangle.</dd>
 </dl>
 
-<h4 id="Cercles">Cercles</h4>
+<h3 id="circle">Cercle</h3>
 
-<p>De la même manière, il est facile de deviner la fonction de l'élément <a href="/fr/SVG/Element/circle" title="circle">circle</a>. Il dessine à l'écran un cercle. Seuls 3 attributs peuvent être définis pour cet élément.</p>
+<p>L'élément <a href="/fr/docs/Web/SVG/Element/circle"><code>&lt;circle&gt;</code></a> permet de dessiner un cercle à l'écran. Seuls 3 attributs peuvent être définis pour cet élément.</p>
 
-<pre class="brush: xml"> &lt;circle cx="25" cy="75" r="20"/&gt;
+<pre class="brush:xml">
+&lt;circle cx="25" cy="75" r="20"/&gt;
 </pre>
 
 <dl>
- <dt>r</dt>
+ <dt><code>r</code></dt>
  <dd>Rayon du cercle.</dd>
- <dt>cx</dt>
- <dd>Position x du centre du cercle.</dd>
- <dt>cy</dt>
- <dd>Position y du centre du cercle.</dd>
+ <dt><code>cx</code></dt>
+ <dd>Position du centre du cercle sur l'axe des abscisses.</dd>
+ <dt><code>cy</code></dt>
+ <dd>Position du centre du cercle sur l'axe des ordonnées.</dd>
 </dl>
 
-<h4 id="Ellipses">Ellipses</h4>
+<h3 id="ellipses">Ellipse</h3>
 
-<p>Les <a href="/fr/SVG/Element/ellipse" title="ellipse">ellipse</a>s sont juste des sortes de cercles bien particuliers, où l'on peut modifier les rayons x et y séparemment l'un de l'autre (les matheux appellent ces rayons le grand axe et le petit axe).</p>
+<p>L'élément <a href="/fr/docs/Web/SVG/Element/ellipse"><code>&lt;ellipse&gt;</code></a> permet de dessiner des ellipses, il s'agit d'une sorte de cercles, où l'on peut modifier les rayons x et y séparément l'un de l'autre (les matheux appellent ces rayons le grand axe et le petit axe).</p>
 
-<pre class="brush: xml"> &lt;ellipse cx="75" cy="75" rx="20" ry="5"/&gt;
+<pre class="brush:xml">
+&lt;ellipse cx="75" cy="75" rx="20" ry="5"/&gt;
 </pre>
 
 <dl>
- <dt>rx</dt>
+ <dt><code>rx</code></dt>
  <dd>Rayon x de l'ellipse.</dd>
- <dt>ry</dt>
+ <dt><code>ry</code></dt>
  <dd>Rayon y de l'ellipse.</dd>
- <dt>cx</dt>
- <dd>Position x du centre de l'ellipse.</dd>
- <dt>cy</dt>
- <dd>Position y du centre de l'ellipse.</dd>
+ <dt><code>cx</code></dt>
+ <dd>Position du centre de l'ellipse sur l'axe des abscisses.</dd>
+ <dt><code>cy</code></dt>
+ <dd>Position du centre de l'ellipse sur l'axe des ordonnées.</dd>
 </dl>
 
-<h3 id="Figures_complexes">Figures complexes</h3>
-
-<h4 id="Lignes">Lignes</h4>
+<h3 id="line">Ligne</h3>
 
-<p>Les lignes droites permettent de créer des figures plus complexes, en les additionnant les unes avec les autres. L'élément <a href="/fr/docs/Web/SVG/Element/line">line</a> en SVG correspond au segment que l'on apprend en géométrie traditionnelle : c'est une portion de droite délimitée par 2 points. Donc pour définir une droite en SVG, il va falloir lui donner pour attribut les coordonnées des deux points qui la définissent.</p>
+<p>L'élément SVG <a href="/fr/docs/Web/SVG/Element/line"><code>&lt;line&gt;</code></a> correspond à une portion de droite tracée entre 2 points.</p>
 
-<pre class="brush: xml"> &lt;line x1="10" x2="50" y1="110" y2="150"/&gt;
+<pre class="brush:xml">
+&lt;line x1="10" x2="50" y1="110" y2="150"/&gt;
 </pre>
 
 <dl>
- <dt>x1</dt>
- <dd>Position x du premier point.</dd>
- <dt>x2</dt>
- <dd>Position x du deuxième point.</dd>
- <dt>y1</dt>
- <dd>Position y du premier point.</dd>
- <dt>y2</dt>
- <dd>Position y du deuxième point.</dd>
+ <dt><code>x1</code></dt>
+ <dd>Position horizontale du premier point.</dd>
+ <dt><code>x2</code></dt>
+ <dd>Position horizontale du deuxième point.</dd>
+ <dt><code>y1</code></dt>
+ <dd>Position verticale du premier point.</dd>
+ <dt><code>y2</code></dt>
+ <dd>Position verticale du deuxième point.</dd>
 </dl>
 
-<h4 id="Lignes_brisées">Lignes brisées</h4>
+<h3 id="polyline">Ligne brisée</h3>
 
-<p>Les lignes brisées, aussi appelées lignes polygonales, sont définies par l'élément <a href="/fr/docs/Web/SVG/Element/polyline">polyline</a> en SVG. Elles sont constituées d'un ensemble de lignes droites connectées entre elles, donc d'un ensemble de points se reliant entre eux suivant un ordre défini. Comme ce lot de points peut être assez conséquent à déclarer, un seul attribut est utilisé pour déclarer l'ensemble de points :</p>
+<p>Les lignes brisées, aussi appelées lignes polygonales, sont définies par l'élément <a href="/fr/docs/Web/SVG/Element/polyline"><code>&lt;polyline&gt;</code></a> en SVG. Elles sont constituées d'un ensemble de lignes droites connectées entre elles, donc d'un ensemble de points se reliant entre eux suivant un ordre défini. Comme ce lot de points peut être assez conséquent à déclarer, un seul attribut est utilisé pour déclarer l'ensemble des points :</p>
 
-<pre class="brush: xml"> &lt;polyline points="60 110, 65 120, 70 115, 75 130, 80 125, 85 140, 90 135, 95 150, 100 145"/&gt;
+<pre class="brush:xml;">
+&lt;polyline points="60, 110 65, 120 70, 115 75, 130 80, 125 85, 140 90, 135 95, 150 100, 145"/&gt;
 </pre>
 
 <dl>
- <dt>points</dt>
- <dd>Liste des points, chaque pair de nombres correspondant aux coordonnées x et y de chaque point. Chaque position x est séparée de la position y par un espace. Chaque ensemble de coordonnées est séparé du suivant par une virgule.</dd>
+ <dt><code>points</code></dt>
+ <dd>Une liste de points, chaque paire de nombres (entiers positifs) correspondent aux coordonnées x et y de chaque point. Chaque position x est séparée de la position y par une virgule, un espace, un saut de ligne. Chaque point est séparé du suivant en utilisant un caractère qui n'est pas celui utilisé pour séparer les coordonnées. Exemple : points="100,10 190,78 160,198 40,198 10,78" ou points="100 10,190 78,160 198,40 198,10 78"</dd>
 </dl>
 
-<h4 id="Polygones">Polygones</h4>
+<h3 id="polygon">Polygone</h3>
 
-<p>Le <a href="/fr/docs/web/SVG/Element/polygon">polygon</a>e fonctionne exactement de la même manière que la ligne brisée. Au final, un polygone n'est rien d'autre qu'une ligne brisée qui relie une série de points. Toutefois, pour les polygones, le chemin de cette ligne retourne automatiquement au point de départ, créant ainsi une forme fermée. Il est à noter que le rectangle est un type de polygone particulier. Il est donc possible, pour des besoins de flexibilité, de déclarer un rectangle en utilisant l'élément <code>polygon</code>.</p>
+<p>L'élément <a href="/fr/docs/Web/SVG/Element/polygon"><code>&lt;polygon&gt;</code></a> fonctionne de façon semblable à l'élément <code>&lt;polyline&gt;</code>. Toutefois, pour les polygones, le chemin de cette ligne retourne automatiquement au point de départ, créant ainsi une forme fermée.</p>
 
-<pre class="brush: xml">&lt;polygon points="50 160, 55 180, 70 180, 60 190, 65 205, 50 195, 35 205, 40 190, 30 180, 45 180"/&gt;</pre>
+<div class="note">
+<p><strong>Note :</strong> Il est à noter que le rectangle est un type de polygone particulier. Il est donc possible, pour des besoins de flexibilité, de déclarer un rectangle en utilisant l'élément <code>&lt;polygon&gt;</code>.</p>
+</div>
+
+<pre class="brush:xml;">
+&lt;polygon points="50, 160 55, 180 70, 180 60, 190 65, 205 50, 195 35, 205 40, 190 30, 180 45, 180"/&gt;
+</pre>
 
 <dl>
  <dt>points</dt>
- <dd>Idem que l'attribut <code>points</code> de l'élément <code>polyline</code>. Liste des points, chaque paire de nombres correspondant aux coordonnées x et y de chaque point. Chaque position x est séparée de la position y par un espace, chaque ensemble de coordonnées est séparé du suivant par une virgule. Une dernière ligne ferme automatiquement la forme en retournant au point de départ.</dd>
+ <dd>Idem que l'attribut <a><code>points</code></a> de l'élément <code>&lt;polyline&gt;</code>.</dd>
 </dl>
 
-<h4 id="Chemins">Chemins</h4>
+<h3 id="path">Chemin</h3>
+
+<p>L'élément pour tracer les chemins, <a href="/fr/docs/Web/SVG/Tutorial/Paths"><code>&lt;path&gt;</code></a>, est sûrement la forme la plus généraliste qui peut être utilisée en SVG. Avec un élément <code>&lt;path&gt;</code>, vous pouvez dessiner un rectangle (avec ou sans coins arrondis), des cercles, des ellipses, des lignes brisées et des polygones. De manière plus basique, il est aussi possible de dessiner d'autres types de formes, comme des courbes de Bézier, des paraboles, et bien plus encore.</p>
 
-<p>L'élément pour tracer les chemins, très logiquement nommé <a href="/fr/docs/Web/SVG/Tutorial/Paths">path</a>, est sûrement la forme la plus généraliste qui peut être utilisée en SVG. Avec un élément <code>path</code>, vous pouvez dessiner un rectangle (avec ou sans coins arrondis), des cercles, des ellipses, des lignes brisées et des polygones. De manière plus basique, il est aussi possible de dessiner d'autres types de formes, comme des courbes de Bézier, des paraboles, et bien plus encore. Pour cette raison, l'élément <code>path</code> en lui même sera un chapitre entier de ce tutoriel, mais pour le moment, nous allons juste voir comment définir cet élément.</p>
+<p>Pour cette raison, l'élément <code>&lt;path&gt;</code> fera l'objet du <a href="/fr/docs/Web/SVG/Tutorial/Paths">prochain chapitre</a> de ce tutoriel, mais pour le moment, nous allons uniquement voir comment définir cet élément.</p>
 
-<pre class="brush: xml"> &lt;path d="M 20 230 Q 40 205, 50 230 T 90230"/&gt;
+<pre class="brush:xml;">
+&lt;path d="M20,230 Q40,205 50,230 T90,230" fill="none" stroke="blue" stroke-width="5"/&gt;
 </pre>
 
 <dl>
- <dt>d</dt>
- <dd>Un ensemble d'information définissant le chemin à dessiner. Pour en savoir plus, allez à la page à propos des <a href="/fr/docs/Web/SVG/Tutorial/Paths">Chemins</a>.</dd>
+ <dt><code>d</code></dt>
+ <dd>Un ensemble d'informations définissant le chemin à dessiner. Pour en savoir plus, consultez <a href="/fr/docs/Web/SVG/Tutorial/Paths">la section sur les chemins</a>.</dd>
 </dl>
 
-<p>{{ PreviousNext("SVG/Tutoriel/Positionnement", "Web/SVG/Tutoriel/Paths") }}</p>
-
-<p><span class="comment">Interwiki Languages Links</span></p>
+<div>{{PreviousNext("Web/SVG/Tutorial/Positions","Web/SVG/Tutorial/Paths")}}</div>