Prepare SVG section for Markdown conversion (#2570)

* Remove summary classes

* Remove hidden classes out of pre

* Remove spans

* Remove notranslate class

* Remove ids out of headings

* missed 2 ids with regex

* clean note and warning cards

* fix headings errors

* Fix dls and as

* fix imgs

* lint stuff (absolute urls, english links)

* Temporarily readding file

* delete inexisting doc in en-US with flaws

* Fixes #2842 for SVG

1 files changed, 21 insertions, 22 deletions

diff --git a/files/fr/web/svg/tutorial/paths/index.html b/files/fr/web/svg/tutorial/paths/index.html
index c006452033..e0160782bb 100644
--- a/files/fr/web/svg/tutorial/paths/index.html
+++ b/files/fr/web/svg/tutorial/paths/index.html
@@ -9,7 +9,7 @@ original_slug: Web/SVG/Tutoriel/Paths
 ---
 <p>{{ PreviousNext("Web/SVG/Tutoriel/Formes_de_base", "Web/SVG/Tutoriel/Fills_and_Strokes") }}</p>
 
-<p>L’élément <a href="/en-US/Web/SVG/Element/path"><code>&lt;path&gt;</code></a> (<em>chemin</em> en français) est le plus versatile des éléments de la bibliothèque SVG parmi les <a href="/fr/docs/Web/SVG/Tutoriel/Formes_de_base">formes basiques</a>. Vous pouvez l’utiliser pour créer des lignes, des courbes, des arcs et autres.</p>
+<p>L’élément <a href="/fr/Web/SVG/Element/path"><code>&lt;path&gt;</code></a> (<em>chemin</em> en français) est le plus versatile des éléments de la bibliothèque SVG parmi les <a href="/fr/docs/Web/SVG/Tutoriel/Formes_de_base">formes basiques</a>. Vous pouvez l’utiliser pour créer des lignes, des courbes, des arcs et autres.</p>
 
 <p>Les chemins créent des formes en combinant plusieurs lignes droites ou courbes. Les formes composées uniquement de lignes droites peuvent être crées avec des <a href="/fr/docs/Web/SVG/Tutoriel/Formes_de_base#Lignes_brisées">lignes brisées</a> (<em>polylines</em>). Bien que les lignes brisées et les chemins peuvent tout deux créer des formes d’apparence similaire, les lignes brisées nécessitent un grand nombre de petites lignes pour simuler des courbes, et qui ne s’adaptent pas bien aux grandes tailles. Une bonne compréhension des chemins est importante pour dessiner en SVG. Bien qu’il ne soit pas recommandé d'éditer des chemins complexes avec un éditeur XML ou texte (on utilisera plutôt un éditeur SVG tel que Inkscape ou Adobe Illustrator), comprendre comment un chemin s'écrit vous permettra éventuellement d’identifier et de corriger des erreurs d’affichage dans un SVG.</p>
 
@@ -38,7 +38,7 @@ original_slug: Web/SVG/Tutoriel/Paths
 
 <p>Dans l’exemple suivant, on se place au point (10, 10). Notez cependant qu'à ce stade rien n'est dessiné, on a manuellement ajouté un cercle pour indiquer la position:</p>
 
-<p><img alt="" class="internal" src="/@api/deki/files/45/=Blank_Path_Area.png" style="float: right;"></p>
+<p><img alt="" src="blank_path_area.png"></p>
 
 <pre class="brush: xml">&lt;svg width="200" height="200" xmlns="http://www.w3.org/2000/svg"&gt;
   &lt;path d="M10 10"/&gt;
@@ -60,9 +60,9 @@ original_slug: Web/SVG/Tutoriel/Paths
 V y (ou v dy)
 </pre>
 
-<p>Afin de commencer facilement, nous allons dessiner une forme simple, un rectangle (qu'on aurait aussi pu dessiner avec un élément <code>&lt;rect&gt;</code>). Il est composé uniquement de lignes horizontales et verticales <span style="line-height: 1.5;">:</span></p>
+<p>Afin de commencer facilement, nous allons dessiner une forme simple, un rectangle (qu'on aurait aussi pu dessiner avec un élément <code>&lt;rect&gt;</code>). Il est composé uniquement de lignes horizontales et verticales :</p>
 
-<p><img alt="" class="internal" src="/@api/deki/files/292/=Path_Line_Commands.png" style="float: right;"></p>
+<p><img alt="" src="path_line_commands.png"></p>
 
 <pre class="brush: xml">&lt;svg width="100" height="100" xmlns="http://www.w3.org/2000/svg"&gt;
   &lt;path d="M10 10 H 90 V 90 H 10 L 10 10"/&gt;
@@ -101,7 +101,7 @@ V y (ou v dy)
 
 <h2 id="Commandes_pour_les_courbes">Commandes pour les courbes</h2>
 
-<p>Il existe trois commandes différentes pour créer des courbes. Deux d’entre elles sont des courbes de Bézier, et la troisième est un « arc » ou section de cercle. Il se peut que vous ayez déjà acquis une expérience pratique avec les courbes de Bézier en utilisant les outils de chemins avec Inkscape, Illustrator ou Photoshop. Pour une description complète des concepts mathématiques sous-jacents, vous pouvez consulter la <a class="external" href="https://fr.wikipedia.org/wiki/Courbe_de_B%C3%A9zier">page Wikipedia Courbe de Bézier</a>.</p>
+<p>Il existe trois commandes différentes pour créer des courbes. Deux d’entre elles sont des courbes de Bézier, et la troisième est un « arc » ou section de cercle. Il se peut que vous ayez déjà acquis une expérience pratique avec les courbes de Bézier en utilisant les outils de chemins avec Inkscape, Illustrator ou Photoshop. Pour une description complète des concepts mathématiques sous-jacents, vous pouvez consulter la <a href="https://fr.wikipedia.org/wiki/Courbe_de_B%C3%A9zier">page Wikipedia Courbe de Bézier</a>.</p>
 
 <p>Il existe une infinité de courbes de Bézier, mais seulement deux des plus simples d’entre elles sont disponibles dans les éléments <code>path</code>: l’une cubique, invoquée avec <code>C</code>, et l’autre quadratique, invoquée avec <code>Q</code>.</p>
 
@@ -116,7 +116,7 @@ V y (ou v dy)
 
 <p>Les points de contrôle décrivent, pour faire simple, la pente de la courbe pour le point de départ et pour le point d'arrivée. La fonction Bézier crée ensuite une courbe lisse faisant le lien entre la pente que vous avez établie au début de votre ligne, et celle à l’autre extrémité.</p>
 
-<p><img alt="Cubic Bézier Curves with grid" class="internal" src="https://mdn.mozillademos.org/files/10401/Cubic_Bezier_Curves_with_grid.png" style="float: right; height: 160px; width: 190px;"></p>
+<p><img src="shortcut_cubic_bézier_with_grid.png"></p>
 
 <pre class="brush: xml">&lt;svg width="190" height="160" xmlns="http://www.w3.org/2000/svg"&gt;
   &lt;path d="M10 10 C 20 20, 40 20, 50 10" stroke="black" fill="transparent"/&gt;
@@ -151,7 +151,7 @@ V y (ou v dy)
 
 <p>Un exemple de cette syntaxe est montré ci-dessous. Dans la figure associée, les points de contrôle spécifiés sont indiqués en rouge, et le point de contrôle inféré, en bleu.</p>
 
-<p><img alt="ShortCut_Cubic_Bezier_with_grid.png" class="internal" src="https://mdn.mozillademos.org/files/10405/ShortCut_Cubic_Bezier_with_grid.png" style="float: right; height: 160px; width: 190px;"></p>
+<p><img src="shortcut_cubic_bézier_with_grid.png"></p>
 
 <pre class="brush: xml">&lt;svg width="190" height="160" xmlns="http://www.w3.org/2000/svg"&gt;
   &lt;path d="M10 80 C 40 10, 65 10, 95 80 S 150 150, 180 80" stroke="black" fill="transparent"/&gt;
@@ -166,7 +166,8 @@ V y (ou v dy)
 
 <p>(x1 y1) est la position du point de contrôle, et (x y) est le point d’arrivée de la courbe.</p>
 
-<p><img alt="Quadratic Bézier with grid" class="internal" src="https://mdn.mozillademos.org/files/10403/Quadratic_Bezier_with_grid.png" style="float: right; height: 160px; width: 190px;"></p>
+<p><img alt="courbe de Bézier quadratique avec une grille" src="quadratic_bézier_with_grid.png"></p>
+
 
 <pre class="brush: xml">&lt;svg width="190" height="160" xmlns="http://www.w3.org/2000/svg"&gt;
   &lt;path d="M10 80 Q 95 10 180 80" stroke="black" fill="transparent"/&gt;
@@ -182,10 +183,11 @@ V y (ou v dy)
 <p>Ce raccourci examine le précédent point de contrôle utilisé et en infère un nouveau à partir de celui-ci. Cela signifie qu’après un premier point de contrôle, vous pouvez créer des formes assez complexes en spécifiant seulement les points d’extrémités.</p>
 
 <div class="note">
-<p><strong>Note</strong>: Ce raccourci fonctionne uniquement si la commande précédente est une commande <code>Q</code> ou <code>T</code>. Dans le cas contraire, le point de contrôle est considéré comme le même que le point précédent, et vous ne dessinerez que des lignes.</p>
+  <p><strong>Note :</strong> Ce raccourci fonctionne uniquement si la commande précédente est une commande <code>Q</code> ou <code>T</code>. Dans le cas contraire, le point de contrôle est considéré comme le même que le point précédent, et vous ne dessinerez que des lignes.</p>
 </div>
 
-<p><img alt="Shortcut_Quadratic_Bezier_with_grid.png" class="internal" src="https://mdn.mozillademos.org/files/10407/Shortcut_Quadratic_Bezier_with_grid.png" style="float: right; height: 158px; width: 188px;"></p>
+<p><img src="shortcut_quadratic_bézier_with_grid.png"></p>
+
 
 <pre class="brush: xml">&lt;svg width="190" height="160" xmlns="http://www.w3.org/2000/svg"&gt;
   &lt;path d="M10 80 Q 52.5 10, 95 80 T 180 80" stroke="black" fill="transparent"/&gt;
@@ -193,7 +195,7 @@ V y (ou v dy)
 
 <p>Les deux courbes produisent des résultats similaires, bien que les courbes cubiques vous offrent une plus grande liberté dans l’apparence exacte que vous voulez donner à votre courbe. Le choix du type de courbe de Bézier à utiliser se fait au cas par cas, et dépend du nombre de symétries que présente votre ligne.</p>
 
-<h3 id="Arcs" name="Arcs">Elliptical Arc</h3>
+<h3 id="Arcs">Elliptical Arc</h3>
 
 <p>Le dernier type de ligne courbe que vous pouvez créer avec SVG est l’arc, invoqué avec <code>A</code> (<em>Elliptical Arc</em>). Les arcs sont des sections de cercles ou d’ellipses.</p>
 
@@ -207,7 +209,7 @@ a rx ry x-axis-rotation large-arc-flag sweep-flag dx dy
 
 <p><code>x-axis-rotation</code> décrit la rotation de l’arc. Il s’explique plus facilement avec un exemple:</p>
 
-<p><img alt="SVGArcs_XAxisRotation_with_grid" class="internal" src="https://mdn.mozillademos.org/files/10409/SVGArcs_XAxisRotation_with_grid.png" style="float: right; height: 201px; width: 200px;"></p>
+<p><img alt="SVGArcs_XAxisRotation_with_grid" src="svgarcs_xaxisrotation_with_grid.png"></p>
 
 <pre class="brush: xml">&lt;svg width="320" height="320" xmlns="http://www.w3.org/2000/svg"&gt;
   &lt;line x1="10" y1="315" x2="315" y2="10" stroke="black" stroke-width="2" /&gt;
@@ -238,10 +240,9 @@ a rx ry x-axis-rotation large-arc-flag sweep-flag dx dy
       stroke="blue" stroke-width="6" fill="none" /&gt;
 </pre>
 
-<div class="hidden">
-<h6 id="Playable_code" name="Playable_code">Playable code</h6>
+<h5>Exemple jouable</h5>
 
-<pre class="brush: html">&lt;svg width="350" viewBox="0 0 350 200" xmlns="http://www.w3.org/2000/svg"&gt;
+<pre class="brush: html hidden">&lt;svg width="350" viewBox="0 0 350 200" xmlns="http://www.w3.org/2000/svg"&gt;
 
   &lt;g font-family="Verdana" font-size="13" &gt;
     &lt;ellipse cx="125" cy="125" rx="100" ry="50"
@@ -262,7 +263,7 @@ a rx ry x-axis-rotation large-arc-flag sweep-flag dx dy
 &lt;/svg&gt;</pre>
 </div>
 
-<p>{{ EmbedLiveSample('Playable_code', '100%', 200) }}</p>
+<p>{{ EmbedLiveSample('exemple_jouable', '100%', 200) }}</p>
 
 <h4 id="large-arc-flag">large-arc-flag</h4>
 
@@ -279,10 +280,9 @@ a rx ry x-axis-rotation large-arc-flag sweep-flag dx dy
       stroke="blue" stroke-width="6" fill="none" /&gt;
 </pre>
 
-<div class="hidden">
-<h6 id="Playable_code_2" name="Playable_code_2">Playable code 2</h6>
+<h4 id="code_jouable_2">Code jouable 2</h4>
 
-<pre class="brush: html">&lt;svg width="350" viewBox="0 0 350 200" xmlns="http://www.w3.org/2000/svg"&gt;
+<pre class="brush: html hidden">&lt;svg width="350" viewBox="0 0 350 200" xmlns="http://www.w3.org/2000/svg"&gt;
 
   &lt;g font-family="Verdana" font-size="13" &gt;
     &lt;ellipse cx="125" cy="125" rx="100" ry="50"
@@ -301,13 +301,12 @@ a rx ry x-axis-rotation large-arc-flag sweep-flag dx dy
   &lt;path d="M 125,75 a100,50 0 1,0 100,50"
         stroke="blue" stroke-width="6" fill="none" /&gt;
 &lt;/svg&gt;</pre>
-</div>
 
-<p>{{ EmbedLiveSample('Playable_code_2', '100%', 200) }}</p>
+<p>{{ EmbedLiveSample('code_jouable_2', '100%', 200) }}</p>
 
 <p>L’exemple ci-dessous montre les quatre combinaisons possibles avec <code>sweep-flag</code> et <code>large-arc-flag</code>:</p>
 
-<p><img alt="" class="internal" src="/@api/deki/files/345/=SVGArcs_Flags.png" style="float: right;"></p>
+<p><img alt="" src="svgarcs_flags.png"></p>
 
 <pre class="brush: xml">&lt;svg width="325" height="325" xmlns="http://www.w3.org/2000/svg"&gt;
   &lt;path d="M80 80