Prepare Web API section for Markdown conversion (#2464)

* Remove summary classes and ids

* Remove unecessary hidden

* Remove useless span filled with useless attributes / ids

* Remove useless font

* Remove notranslate

* Remove id in other elements than headings

* Remove name attributes

* Remove <pre><code> for JS w/ language-js class

* Remove <pre><code> for HTML w/ language-html class

* Remove <pre><code> for other lang w/ language-* class

* Rm highlighted line in code samples

* fix links, internal, external, absolute URLs

* missing file from last commit

* Fix styles errors apart from table + some classes

* Fix notes and warnings (+ some other :x)

* fix typo during merge which broke a doc

* aand forgot a conflict

* fix remaining classes of errors except dls and images

* Fix dls

* Fix images (deki/mozillademos) and remaining style issues

* Remove script tag from svg file

* Remove script tag from svg fileS

* Compress SVG files for CI

1 files changed, 31 insertions, 39 deletions

diff --git a/files/fr/web/api/canvas_api/tutorial/transformations/index.html b/files/fr/web/api/canvas_api/tutorial/transformations/index.html
index 61443be765..eec783769b 100644
--- a/files/fr/web/api/canvas_api/tutorial/transformations/index.html
+++ b/files/fr/web/api/canvas_api/tutorial/transformations/index.html
@@ -12,7 +12,7 @@ original_slug: Web/API/Canvas_API/Tutoriel_canvas/Transformations
 ---
 <div>{{CanvasSidebar}} {{PreviousNext("Tutoriel_canvas/Utilisation_d'images", " Web/API/Canvas_API/Tutorial/Compositing ")}}</div>
 
-<div class="summary">Précédemment dans ce tutoriel, nous avons étudié la <a href="https://developer.mozilla.org/fr/docs/Tutoriel_canvas/Formes_g%C3%A9om%C3%A9triques">grille du canevas</a> et le <strong>système de coordonnées</strong>. Jusqu'à maintenant, nous avons uniquement utilisé la grille par défaut et modifié la taille de la globalité du canevas afin de répondre à nos besoins. Les transformations que nous allons aborder dans la suite vont nous permettre, de manière plus puissante, d'effectuer des déplacements et des rotations sur la grille et même d'effectuer des mises à l'échelle.</div>
+<p>Précédemment dans ce tutoriel, nous avons étudié la <a href="/fr/docs/Tutoriel_canvas/Formes_g%C3%A9om%C3%A9triques">grille du canevas</a> et le <strong>système de coordonnées</strong>. Jusqu'à maintenant, nous avons uniquement utilisé la grille par défaut et modifié la taille de la globalité du canevas afin de répondre à nos besoins. Les transformations que nous allons aborder dans la suite vont nous permettre, de manière plus puissante, d'effectuer des déplacements et des rotations sur la grille et même d'effectuer des mises à l'échelle.</p>
 
 <h2 id="Sauvegarde_et_restauration_détat">Sauvegarde et restauration d'état</h2>
 
@@ -39,7 +39,7 @@ original_slug: Web/API/Canvas_API/Tutoriel_canvas/Transformations
 
 <p>Cet exemple tente d'illustrer comment fonctionne la pile d'états de dessin en dessinant un ensemble de rectangles consécutifs.</p>
 
-<pre class="brush: js; highlight:[5,10,15,18] notranslate">function draw() {
+<pre class="brush: js">function draw() {
   var ctx = document.getElementById('canvas').getContext('2d');
 
   ctx.fillRect(0, 0, 150, 150);   // Dessine un rectangle avec les réglages par défaut
@@ -60,11 +60,9 @@ original_slug: Web/API/Canvas_API/Tutoriel_canvas/Transformations
   ctx.fillRect(60, 60, 30, 30);   // Dessine un rectangle avec les réglages restaurés
 }</pre>
 
-<div class="hidden">
-<pre class="brush: html notranslate">&lt;canvas id="canvas" width="150" height="150"&gt;&lt;/canvas&gt;</pre>
+<pre class="brush: html hidden">&lt;canvas id="canvas" width="150" height="150"&gt;&lt;/canvas&gt;</pre>
 
-<pre class="brush: js notranslate">draw();</pre>
-</div>
+<pre class="brush: js hidden">draw();</pre>
 
 <p>La première étape consiste à dessiner un grand rectangle avec les paramètres par défaut. Ensuite, nous sauvegardons cet état et modifions la couleur de remplissage. Nous dessinons ensuite le deuxième rectangle bleu et mettons l'état de côté. Encore une fois, nous modifions certains paramètres de dessin et dessinons le troisième rectangle blanc semi-transparent.</p>
 
@@ -72,17 +70,19 @@ original_slug: Web/API/Canvas_API/Tutoriel_canvas/Transformations
 
 <p>Lorsque la deuxième instruction <code>restore()</code> est appelée, l'état d'origine (celui que nous avons configuré avant le premier appel à enregistrer) est restauré et le dernier rectangle est de nouveau tracé en noir.</p>
 
-<p>{{EmbedLiveSample("Un_exemple_de_sauvegarde_et_de_restauration_de_l_état_du_canevas", "180", "180", "https://mdn.mozillademos.org/files/249/Canvas_savestate.png")}}</p>
+<p>{{EmbedLiveSample("Un_exemple_de_sauvegarde_et_de_restauration_de_l_état_du_canevas", "180", "180", "canvas_savestate.png")}}</p>
 
 <h2 id="Déplacement">Déplacement</h2>
 
-<p><img alt="" class="internal" src="https://mdn.mozillademos.org/files/234/Canvas_grid_translate.png" style="float: right;"> La première des méthodes de transformation que nous examinerons est <code>translate ()</code>. Cette méthode est utilisée pour déplacer la toile et son origine vers un autre point de la grille.</p>
+<p>La première des méthodes de transformation que nous examinerons est <code>translate ()</code>. Cette méthode est utilisée pour déplacer la toile et son origine vers un autre point de la grille.</p>
 
 <dl>
  <dt>{{domxref("CanvasRenderingContext2D.translate", "translate(x, y)")}}</dt>
  <dd>Déplace la toile et son origine sur la grille. <code>x</code> indique la distance horizontale du déplacement, et <code>y</code> indique à quelle distance déplacer la grille verticalement.</dd>
 </dl>
 
+<img alt="" src="canvas_grid_translate.png"> 
+
 <p>C'est une bonne idée de sauvegarder l'état du canevas avant d'effectuer des transformations. Dans la plupart des cas, il est plus facile d'appeler la méthode <code>restore</code> que d'avoir à effectuer un déplacement inverse pour revenir à l'état d'origine. De même, si vous déplacez à l'intérieur d'une boucle et que vous ne sauvegardez pas et ne restaurez pas l'état du canevas, il se peut qu'une partie de votre dessin soit manquante, car elle a été dessinée en dehors du bord du canevas.</p>
 
 <h3 id="Un_exemple_translate">Un exemple <code>translate</code></h3>
@@ -91,7 +91,7 @@ original_slug: Web/API/Canvas_API/Tutoriel_canvas/Transformations
 
 <p>Dans la fonction <code>draw ()</code>, nous appelons la fonction <code>fillRect ()</code> neuf fois en utilisant deux boucles <code>for</code> . Dans chaque boucle, le canevas est déplacé, le rectangle est dessiné et le canevas est retourné à son état d'origine. Notez comment l'appel à <code>fillRect ()</code> utilise les mêmes coordonnées à chaque fois, en s'appuyant sur <code>translate ()</code> pour ajuster la position du dessin.</p>
 
-<pre class="brush: js; highlight:[7] language-js notranslate">function draw() {
+<pre class="brush: js">function draw() {
   var ctx = document.getElementById('canvas').getContext('2d');
   for (var i = 0; i &lt; 3; i++) {
     for (var j = 0; j &lt; 3; j++) {
@@ -104,23 +104,24 @@ original_slug: Web/API/Canvas_API/Tutoriel_canvas/Transformations
   }
 }</pre>
 
-<div class="hidden">
-<pre class="brush: html notranslate">&lt;canvas id="canvas" width="150" height="150"&gt;&lt;/canvas&gt;</pre>
+<pre class="brush: html hidden">&lt;canvas id="canvas" width="150" height="150"&gt;&lt;/canvas&gt;</pre>
 
-<pre class="brush: js notranslate">draw();</pre>
-</div>
+<pre class="brush: js hidden">draw();</pre>
 
-<p>{{EmbedLiveSample("Un_exemple_translate", "160", "160", "https://mdn.mozillademos.org/files/9857/translate.png")}}</p>
+
+<p>{{EmbedLiveSample("Un_exemple_translate", "160", "160", "translate.png")}}</p>
 
 <h2 id="Rotation">Rotation</h2>
 
-<p><img alt="" class="internal" src="https://mdn.mozillademos.org/files/233/Canvas_grid_rotate.png" style="float: right;">La seconde méthode de transformation est <code>rotate()</code>. Nous l'utilisons pour faire pivoter le canevas autour de l'origine actuelle.</p>
+<p>La seconde méthode de transformation est <code>rotate()</code>. Nous l'utilisons pour faire pivoter le canevas autour de l'origine actuelle.</p>
 
 <dl>
  <dt>{{domxref("CanvasRenderingContext2D.rotate", "rotate(angle)")}}</dt>
  <dd>Fait pivoter le canevas, dans le sens des aiguilles d'une montre autour de l'origine actuelle, par le nombre de radians de l'angle.</dd>
 </dl>
 
+<img alt="" src="canvas_grid_rotate.png">
+
 <p>Le point central de rotation est toujours l'origine de la toile. Pour changer le point central, nous devrons déplacer le canevas en utilisant la méthode <code>translate ()</code>.</p>
 
 <h3 id="Un_exemple_rotate">Un exemple <code>rotate</code></h3>
@@ -128,10 +129,10 @@ original_slug: Web/API/Canvas_API/Tutoriel_canvas/Transformations
 <p>Dans cet exemple, nous utiliserons la méthode <code>rotate ()</code> pour faire d'abord tourner un rectangle à partir de l'origine du canevas, puis du centre du rectangle lui-même à l'aide de <code>translate ()</code>.</p>
 
 <div class="note">
-<p><strong>Rappel :</strong> Les angles sont en radians, pas en degrés. Pour convertir en degrés, nous utilisons : <code>radians = (Math.PI/180)*degrees</code>.</p>
+<p><strong>Note :</strong> Les angles sont en radians, pas en degrés. Pour convertir en degrés, nous utilisons : <code>radians = (Math.PI/180)*degrees</code>.</p>
 </div>
 
-<pre class="brush: js; highlight:[9, 23] notranslate">function draw() {
+<pre class="brush: js">function draw() {
   var ctx = document.getElementById('canvas').getContext('2d');
 
   // rectangles de gauche, rotation depuis l'origine du canevas
@@ -163,13 +164,11 @@ original_slug: Web/API/Canvas_API/Tutoriel_canvas/Transformations
 
 <p>Pour faire pivoter le rectangle autour de son propre centre, nous déplaçons le canevas au centre du rectangle, puis faisons pivoter le canevas, puis le déplaçons à 0,0, puis dessinons le rectangle.</p>
 
-<div class="hidden">
-<pre class="brush: html line-numbers notranslate">&lt;canvas id="canvas" width="300" height="200"&gt;&lt;/canvas&gt;</pre>
+<pre class="brush: html hidden">&lt;canvas id="canvas" width="300" height="200"&gt;&lt;/canvas&gt;</pre>
 
-<pre class="brush: js notranslate">draw();</pre>
-</div>
+<pre class="brush: js hidden">draw();</pre>
 
-<p>{{EmbedLiveSample("Un_exemple_rotate", "310", "210", "https://mdn.mozillademos.org/files/9859/rotate.png")}}</p>
+<p>{{EmbedLiveSample("Un_exemple_rotate", "310", "210", "rotate.png")}}</p>
 
 <h2 id="Mise_à_léchelle">Mise à l'échelle</h2>
 
@@ -188,7 +187,7 @@ original_slug: Web/API/Canvas_API/Tutoriel_canvas/Transformations
 
 <p>Dans ce dernier exemple, nous allons dessiner des  formes avec différents facteurs d'échelle.</p>
 
-<pre class="brush: js; highlight:[6,11] notranslate">function draw() {
+<pre class="brush: js">function draw() {
   var ctx = document.getElementById('canvas').getContext('2d');
 
   // dessine un rectangle simple, mais le met à l'échelle.
@@ -203,13 +202,11 @@ original_slug: Web/API/Canvas_API/Tutoriel_canvas/Transformations
   ctx.fillText('MDN', -135, 120);
 }</pre>
 
-<div class="hidden">
-<pre class="brush: html notranslate">&lt;canvas id="canvas" width="150" height="150"&gt;&lt;/canvas&gt;</pre>
+<pre class="brush: html hidden">&lt;canvas id="canvas" width="150" height="150"&gt;&lt;/canvas&gt;</pre>
 
-<pre class="brush: js line-numbers  language-js notranslate">draw();</pre>
-</div>
+<pre class="brush: js hidden">draw();</pre>
 
-<p>{{EmbedLiveSample("Un_exemple_scale", "160", "160", "https://mdn.mozillademos.org/files/9861/scale.png")}}</p>
+<p>{{EmbedLiveSample("Un_exemple_scale", "160", "160", "scale.png")}}</p>
 
 <h2 id="Transformation">Transformation</h2>
 
@@ -217,11 +214,8 @@ original_slug: Web/API/Canvas_API/Tutoriel_canvas/Transformations
 
 <dl>
  <dt>{{domxref("CanvasRenderingContext2D.transform", "transform(a, b, c, d, e, f)")}}</dt>
- <dd>Multiplie la matrice de transformation actuelle avec la matrice décrite par ses arguments. La matrice de transformation est décrite par : <math><semantics><mrow><mo>[</mo><mtable columnalign="center center center" rowspacing="0.5ex"><mtr><mtd><mi>a</mi></mtd><mtd><mi>c</mi></mtd><mtd><mi>e</mi></mtd></mtr><mtr><mtd><mi>b</mi></mtd><mtd><mi>d</mi></mtd><mtd><mi>f</mi></mtd></mtr><mtr><mtd><mn>0</mn></mtd><mtd><mn>0</mn></mtd><mtd><mn>1</mn></mtd></mtr></mtable><mo>]</mo></mrow><annotation encoding="TeX">\left[ \begin{array}{ccc} a &amp; c &amp; e \\ b &amp; d &amp; f \\ 0 &amp; 0 &amp; 1 \end{array} \right]</annotation></semantics></math></dd>
-</dl>
-
-<dl>
- <dd>Si l'un des arguments est <code>infini</code>, la matrice de transformation doit être marquée comme infinie, plutôt que d'utiliser la méthode qui lance une exception.</dd>
+ <dd><p>Multiplie la matrice de transformation actuelle avec la matrice décrite par ses arguments. La matrice de transformation est décrite par : </p><math><semantics><mrow><mo>[</mo><mtable columnalign="center center center" rowspacing="0.5ex"><mtr><mtd><mi>a</mi></mtd><mtd><mi>c</mi></mtd><mtd><mi>e</mi></mtd></mtr><mtr><mtd><mi>b</mi></mtd><mtd><mi>d</mi></mtd><mtd><mi>f</mi></mtd></mtr><mtr><mtd><mn>0</mn></mtd><mtd><mn>0</mn></mtd><mtd><mn>1</mn></mtd></mtr></mtable><mo>]</mo></mrow><annotation encoding="TeX">\left[ \begin{array}{ccc} a &amp; c &amp; e \\ b &amp; d &amp; f \\ 0 &amp; 0 &amp; 1 \end{array} \right]</annotation></semantics></math>
+ <p>Si l'un des arguments est <code>infini</code>, la matrice de transformation doit être marquée comme infinie, plutôt que d'utiliser la méthode qui lance une exception.</p></dd>
 </dl>
 
 <p>Les paramètres de cette fonction sont :</p>
@@ -247,7 +241,7 @@ original_slug: Web/API/Canvas_API/Tutoriel_canvas/Transformations
 
 <h3 id="Exemple_pour_transform_et_setTransform">Exemple pour <code>transform</code> et <code>setTransform</code></h3>
 
-<pre class="brush: js; highlight:[12,15] notranslate">function draw() {
+<pre class="brush: js">function draw() {
   var ctx = document.getElementById('canvas').getContext('2d');
 
   var sin = Math.sin(Math.PI / 6);
@@ -266,12 +260,10 @@ original_slug: Web/API/Canvas_API/Tutoriel_canvas/Transformations
   ctx.fillRect(0, 50, 100, 100);
 }</pre>
 
-<div class="hidden">
-<pre class="brush: html notranslate">&lt;canvas id="canvas" width="200" height="250"&gt;&lt;/canvas&gt;</pre>
+<pre class="brush: html hidden">&lt;canvas id="canvas" width="200" height="250"&gt;&lt;/canvas&gt;</pre>
 
-<pre class="brush: js notranslate">draw();</pre>
-</div>
+<pre class="brush: js hidden">draw();</pre>
 
-<p>{{EmbedLiveSample("Exemple_pour_transform_et_setTransform", "230", "280", "https://mdn.mozillademos.org/files/255/Canvas_transform.png")}}</p>
+<p>{{EmbedLiveSample("Exemple_pour_transform_et_setTransform", "230", "280", "canvas_transform.png")}}</p>
 
 <p>{{PreviousNext("Tutoriel_canvas/Utilisation_d'images", "Tutoriel_canvas/Composition")}}</p>