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, 12 insertions, 16 deletions

diff --git a/files/fr/web/api/canvas_api/index.html b/files/fr/web/api/canvas_api/index.html
index a697d99b2a..9c3ea0f0ef 100644
--- a/files/fr/web/api/canvas_api/index.html
+++ b/files/fr/web/api/canvas_api/index.html
@@ -9,11 +9,11 @@ translation_of: Web/API/Canvas_API
 ---
 <div>{{IncludeSubnav("/fr/docs/Jeux")}} {{CanvasSidebar}}</div>
 
-<p class="summary">Ajouté en <a href="https://developer.mozilla.org/fr/docs/Web/Guide/HTML/HTML5">HTML5</a>, l'élément {{HTMLElement("canvas")}} est un nouvel élément qui peut être utilisé pour dessiner des graphismes via des scripts <a href="/fr/docs/JavaScript" title="fr/docs/JavaScript">JavaScript</a>. Par exemple, Il peut être utilisé pour dessiner des graphes, faire des compositions de photos, des animations, ou même faire du traitement ou de l'affichage de vidéos en temps réel.</p>
+<p>Ajouté en <a href="/fr/docs/Web/Guide/HTML/HTML5">HTML5</a>, l'élément {{HTMLElement("canvas")}} est un nouvel élément qui peut être utilisé pour dessiner des graphismes via des scripts <a href="/fr/docs/JavaScript">JavaScript</a>. Par exemple, Il peut être utilisé pour dessiner des graphes, faire des compositions de photos, des animations, ou même faire du traitement ou de l'affichage de vidéos en temps réel.</p>
 
-<p>Les applications Mozilla ont commencé à supporter &lt;canvas&gt; à partir de Gecko 1.8 (c'est-à-dire <a href="/fr/docs/Firefox_1.5_pour_les_développeurs" title="fr/docs/Firefox_1.5_pour_les_développeurs">Firefox 1.5</a>). L'élément a été introduit à l'origine par Apple pour le <a class="external" href="http://www.apple.com/macosx/features/dashboard/">Dashboard d'OS X</a> et pour Safari. Internet Explorer supporte &lt;canvas&gt; depuis la version 9 et ultérieures, pour les versions précédentes d'IE, une page peut effectuer ce support de &lt;canvas&gt; en incluant un script depuis le projet <a href="http://excanvas.sourceforge.net/">Explorer Canvas  </a>de Google.</p>
+<p>Les applications Mozilla ont commencé à supporter &lt;canvas&gt; à partir de Gecko 1.8 (c'est-à-dire <a href="/fr/docs/Firefox_1.5_pour_les_développeurs">Firefox 1.5</a>). L'élément a été introduit à l'origine par Apple pour le <a href="http://www.apple.com/macosx/features/dashboard/">Dashboard d'OS X</a> et pour Safari. Internet Explorer supporte &lt;canvas&gt; depuis la version 9 et ultérieures, pour les versions précédentes d'IE, une page peut effectuer ce support de &lt;canvas&gt; en incluant un script depuis le projet <a href="http://excanvas.sourceforge.net/">Explorer Canvas  </a>de Google.</p>
 
-<p>L'élément &lt;canvas&gt; est aussi utilisé par <a href="https://developer.mozilla.org/fr/docs/Web/API/WebGL_API">WebGL</a> pour afficher des graphismes 3D avec accélération matérielle sur des pages web.</p>
+<p>L'élément &lt;canvas&gt; est aussi utilisé par <a href="/fr/docs/Web/API/WebGL_API">WebGL</a> pour afficher des graphismes 3D avec accélération matérielle sur des pages web.</p>
 
 <h2 id="Exemple">Exemple</h2>
 
@@ -21,12 +21,12 @@ translation_of: Web/API/Canvas_API
 
 <h3 id="HTML">HTML</h3>
 
-<pre class="brush: html notranslate">&lt;canvas id="canvas"&gt;&lt;/canvas&gt;
+<pre class="brush: html">&lt;canvas id="canvas"&gt;&lt;/canvas&gt;
 </pre>
 
 <h3 id="JavaScript">JavaScript</h3>
 
-<pre class="brush: js notranslate">var canvas = document.getElementById('canvas');
+<pre class="brush: js">var canvas = document.getElementById('canvas');
 var ctx = canvas.getContext('2d');
 
 ctx.fillStyle = 'green';
@@ -35,10 +35,9 @@ ctx.fillRect(10, 10, 100, 100);
 
 <p>Éditez le code ci-dessous pour voir les changements avoir lieu directement dans le canvas:</p>
 
-<div class="hidden">
-<h6 id="Playable_code">Playable code</h6>
+<h4 id="code_jouable">Code jouable</h4>
 
-<pre class="brush: html notranslate">&lt;canvas id="canvas" width="400" height="200" class="playable-canvas"&gt;&lt;/canvas&gt;
+<pre class="brush: html hidden">&lt;canvas id="canvas" width="400" height="200" class="playable-canvas"&gt;&lt;/canvas&gt;
 &lt;div class="playable-buttons"&gt;
   &lt;input id="edit" type="button" value="Edit" /&gt;
   &lt;input id="reset" type="button" value="Reset" /&gt;
@@ -48,7 +47,7 @@ ctx.fillStyle = 'green';
 ctx.fillRect(10, 10, 100, 100);&lt;/textarea&gt;
 </pre>
 
-<pre class="brush: js notranslate">var canvas = document.getElementById('canvas');
+<pre class="brush: js hidden">var canvas = document.getElementById('canvas');
 var ctx = canvas.getContext("2d");
 var textarea = document.getElementById('code');
 var reset = document.getElementById('reset');
@@ -72,13 +71,11 @@ edit.addEventListener('click', function() {
 textarea.addEventListener('input', drawCanvas);
 window.addEventListener('load', drawCanvas);
 </pre>
-</div>
 
-<p>{{ EmbedLiveSample('Playable_code', 700, 360) }}</p>
+<p>{{ EmbedLiveSample('code_jouable', 700, 360) }}</p>
 
 <h2 id="Références">Références</h2>
 
-<div class="index">
 <ul>
  <li>{{domxref("HTMLCanvasElement")}}</li>
  <li>{{domxref("CanvasRenderingContext2D")}}</li>
@@ -92,9 +89,8 @@ window.addEventListener('load', drawCanvas);
  <li>{{domxref("OffscreenCanvas")}}{{experimental_inline}}</li>
  <li>{{domxref("Path2D")}} {{experimental_inline}}{{domxref("ImageBitmapRenderingContext")}}{{experimental_inline}}</li>
 </ul>
-</div>
 
-<p>Les interfaces liées au <code>WebGLRenderingContext</code> sont référencées sous <a href="/en-US/docs/Web/WebGL" title="/en-US/docs/Web/WebGL">WebGL</a>.</p>
+<p>Les interfaces liées au <code>WebGLRenderingContext</code> sont référencées sous <a href="/en-US/docs/Web/WebGL">WebGL</a>.</p>
 
 <p>{{domxref("CanvasCaptureMediaStream")}} est lié.</p>
 
@@ -103,7 +99,7 @@ window.addEventListener('load', drawCanvas);
 <dl>
  <dt><a href="/fr/docs/Tutoriel_canvas">Tutoriel canvas</a></dt>
  <dd>Un tutoriel complet qui couvre à la fois l'usage élémentaire de <code>&lt;canvas&gt;</code> mais aussi ses fonctionnalités avancées.</dd>
- <dt><a href="/fr/docs/Extraits_de_code/Canvas" title="fr/docs/Extraits_de_code/Canvas">Extraits de code : Canvas</a></dt>
+ <dt><a href="/fr/docs/Extraits_de_code/Canvas">Extraits de code : Canvas</a></dt>
  <dd>Quelques extraits de code orientés vers les développeurs d'extension qui utilisent <code>&lt;canvas&gt;</code>.</dd>
  <dt><a href="/fr/docs/Un_raycaster_basique_avec_canvas">Demo: Un raycaster basique avec canvas</a></dt>
  <dd>Une demonstration d'animation utilisant le ray-tracing dans un élément canvas.</dd>
@@ -134,7 +130,7 @@ window.addEventListener('load', drawCanvas);
  <li><a href="https://playcanvas.com/">PlayCanvas</a> est un moteur de jeu open-source.</li>
  <li><a href="http://www.pixijs.com/">Pixi.js</a> est un moteur de jeu open-source.</li>
  <li><a href="http://www.liquidx.net/plotkit/">PlotKit</a> est une bibliothèque permettant de réaliser des diagrammes et des graphiques.</li>
- <li><a class="link-https" href="https://github.com/jeremyckahn/rekapi">Rekapi</a> est une API d'animation par key-framing pour Canvas.</li>
+ <li><a href="https://github.com/jeremyckahn/rekapi">Rekapi</a> est une API d'animation par key-framing pour Canvas.</li>
  <li><a href="http://senchalabs.github.com/philogl/">PhiloGL</a> est un framework WebGL pour la visualisation de données, pour la programmation créative et pour le developpement de jeux.</li>
  <li><a href="http://thejit.org/">JavaScript InfoVis Toolkit</a> crée des visualisation de données interactives en 2D avec canvas pour le Web.</li>
  <li><a href="http://www.createjs.com/easeljs">EaselJS</a> est une bibliothèque gratuite/open-source qui facilite l'utilisation de canvas pour faire des jeux ou de l'art</li>