convert content to md

37 files changed, 4072 insertions, 4139 deletions

diff --git a/files/fr/web/svg/attribute/accent-height/index.md b/files/fr/web/svg/attribute/accent-height/index.md
index d720356008..7f6314794c 100644
--- a/files/fr/web/svg/attribute/accent-height/index.md
+++ b/files/fr/web/svg/attribute/accent-height/index.md
@@ -10,41 +10,50 @@ tags:
   - SVG
 translation_of: Web/SVG/Attribute/accent-height
 ---
-<div>{{SVGRef}}</div>
+{{SVGRef}}
 
-<p>L'attribut <strong><code>accent-height</code></strong> définit la distance entre l'origine et le haut des accents placés sur les caractères. Cette distance est mesurée dans le système de coordonnées de la police.</p>
+L'attribut **`accent-height`** définit la distance entre l'origine et le haut des accents placés sur les caractères. Cette distance est mesurée dans le système de coordonnées de la police.
 
-<p>Si cet attribut n'est pas défini, l'effet obtenu est identique à celui obtenu avec la valeur de l'attribut {{SVGAttr("ascent")}}.</p>
+Si cet attribut n'est pas défini, l'effet obtenu est identique à celui obtenu avec la valeur de l'attribut {{SVGAttr("ascent")}}.
 
-<h2 id="Contexte_d'utilisation">Contexte d'utilisation</h2>
+## Contexte d'utilisation
 
 <table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="row">Catégories</th>
-   <td>Aucune</td>
-  </tr>
-  <tr>
-   <th scope="row">Type de valeur</th>
-   <td><a href="/fr/docs/Web/SVG/Content_type#Length" title="https://developer.mozilla.org/en/SVG/Content_type#Number">&lt;number&gt;</a></td>
-  </tr>
-  <tr>
-   <th scope="row">Peut être animé</th>
-   <td>Non</td>
-  </tr>
-  <tr>
-   <th scope="row">Spécification</th>
-   <td><a href="https://www.w3.org/TR/SVG/fonts.html#FontFaceElementAccentHeightAttribute">SVG 1.1 (seconde édition)</a></td>
-  </tr>
- </tbody>
+  <tbody>
+    <tr>
+      <th scope="row">Catégories</th>
+      <td>Aucune</td>
+    </tr>
+    <tr>
+      <th scope="row">Type de valeur</th>
+      <td>
+        <a
+          href="/fr/docs/Web/SVG/Content_type#Length"
+          title="https://developer.mozilla.org/en/SVG/Content_type#Number"
+          >&#x3C;number></a
+        >
+      </td>
+    </tr>
+    <tr>
+      <th scope="row">Peut être animé</th>
+      <td>Non</td>
+    </tr>
+    <tr>
+      <th scope="row">Spécification</th>
+      <td>
+        <a
+          href="https://www.w3.org/TR/SVG/fonts.html#FontFaceElementAccentHeightAttribute"
+          >SVG 1.1 (seconde édition)</a
+        >
+      </td>
+    </tr>
+  </tbody>
 </table>
 
-<p>{{page("/fr/docs/Web/SVG/Content_type","Number")}}</p>
+{{page("/fr/docs/Web/SVG/Content_type","Number")}}
 
-<h2 id="Éléments">Éléments</h2>
+## Éléments
 
-<p>On peut utiliser l'attribut <code>accent-height</code> sur les éléments suivants :</p>
+On peut utiliser l'attribut `accent-height` sur les éléments suivants :
 
-<ul>
- <li>{{SVGElement("font-face")}}</li>
-</ul>
+- {{SVGElement("font-face")}}
diff --git a/files/fr/web/svg/attribute/clip-path/index.md b/files/fr/web/svg/attribute/clip-path/index.md
index 7aceae680c..bb69c317d3 100644
--- a/files/fr/web/svg/attribute/clip-path/index.md
+++ b/files/fr/web/svg/attribute/clip-path/index.md
@@ -6,98 +6,82 @@ tags:
   - SVG Attribute
 translation_of: Web/SVG/Attribute/clip-path
 ---
-<div>{{SVGRef}}</div>
+{{SVGRef}}
 
-<p>L'attribut <strong><code>clip-path</code></strong> permet d'appliquer un détourage à un élément.</p>
+L'attribut **`clip-path`** permet d'appliquer un détourage à un élément.
 
-<div class="note">
-  <p><strong>Note :</strong> <code>clip-path</code> étant un attribut de présentation, il peut être utilisé comme propriété CSS.</p>
-</div>
+> **Note :** `clip-path` étant un attribut de présentation, il peut être utilisé comme propriété CSS.
 
-<p>Cet attribut peut être appliqué sur tous les éléments, en revanche il n'aura d'effet que sur les éléments suivants: {{SVGElement('a')}}, {{SVGElement('circle')}}, {{SVGElement('clipPath')}}, {{SVGElement('ellipse')}}, {{SVGElement('g')}}, {{SVGElement('glyph')}}, {{SVGElement('image')}}, {{SVGElement('line')}}, {{SVGElement('marker')}}, {{SVGElement('mask')}}, {{SVGElement('path')}}, {{SVGElement('pattern')}}, {{SVGElement('polygon')}}, {{SVGElement('polyline')}}, {{SVGElement('rect')}}, {{SVGElement('svg')}}, {{SVGElement('symbol')}}, {{SVGElement('text')}}, {{SVGElement('use')}}</p>
+Cet attribut peut être appliqué sur tous les éléments, en revanche il n'aura d'effet que sur les éléments suivants: {{SVGElement('a')}}, {{SVGElement('circle')}}, {{SVGElement('clipPath')}}, {{SVGElement('ellipse')}}, {{SVGElement('g')}}, {{SVGElement('glyph')}}, {{SVGElement('image')}}, {{SVGElement('line')}}, {{SVGElement('marker')}}, {{SVGElement('mask')}}, {{SVGElement('path')}}, {{SVGElement('pattern')}}, {{SVGElement('polygon')}}, {{SVGElement('polyline')}}, {{SVGElement('rect')}}, {{SVGElement('svg')}}, {{SVGElement('symbol')}}, {{SVGElement('text')}}, {{SVGElement('use')}}
 
-<h2>Exemple</h2>
+## Exemple
 
-<pre class="brush: css hidden">html,body,svg { height:100% }</pre>
+```css hidden
+html,body,svg { height:100% }
+```
 
-<pre class="brush: html">&lt;svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"&gt;
-  &lt;clipPath id="myClip" clipPathUnits="objectBoundingBox"&gt;
-    &lt;circle cx=".5" cy=".5" r=".5" /&gt;
-  &lt;/clipPath&gt;
+```html
+<svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+  <clipPath id="myClip" clipPathUnits="objectBoundingBox">
+    <circle cx=".5" cy=".5" r=".5" />
+  </clipPath>
 
-  &lt;!-- En haut à gauche: Applique un détourage précédemment crée --&gt;
-  &lt;rect x="1" y="1" width="8" height="8" stroke="green"
-        clip-path="url(#myClip)" /&gt;
+  <!-- En haut à gauche: Applique un détourage précédemment crée -->
+  <rect x="1" y="1" width="8" height="8" stroke="green"
+        clip-path="url(#myClip)" />
 
-  &lt;!-- En haut à droite: Applique un détourage sur fill-box via une forme CSS.
-       Revient à créer un détourage avec clipPathUnits="objectBoundingBox" --&gt;
-  &lt;rect x="11" y="1" width="8" height="8" stroke="green"
-        clip-path="circle() fill-box" /&gt;
+  <!-- En haut à droite: Applique un détourage sur fill-box via une forme CSS.
+       Revient à créer un détourage avec clipPathUnits="objectBoundingBox" -->
+  <rect x="11" y="1" width="8" height="8" stroke="green"
+        clip-path="circle() fill-box" />
 
-  &lt;!-- En bas à gauche: Applique un détourage sur stroke-box via une forme CSS. --&gt;
-  &lt;rect x="1" y="11" width="8" height="8" stroke="green"
-        clip-path="circle() stroke-box" /&gt;
+  <!-- En bas à gauche: Applique un détourage sur stroke-box via une forme CSS. -->
+  <rect x="1" y="11" width="8" height="8" stroke="green"
+        clip-path="circle() stroke-box" />
 
-  &lt;!-- En bas à droite: Applique un détourage sur view-box via une forme CSS.
-       Revient à créer un détourage avec clipPathUnits="userSpaceOnUse" --&gt;
-  &lt;rect x="11" y="11" width="8" height="8" stroke="green"
-        clip-path="circle() view-box" /&gt;
-&lt;/svg&gt;</pre>
+  <!-- En bas à droite: Applique un détourage sur view-box via une forme CSS.
+       Revient à créer un détourage avec clipPathUnits="userSpaceOnUse" -->
+  <rect x="11" y="11" width="8" height="8" stroke="green"
+        clip-path="circle() view-box" />
+</svg>
+```
 
-<p>{{EmbedLiveSample('exemple', '100%', 200)}}</p>
+{{EmbedLiveSample('exemple', '100%', 200)}}
 
-<h2 id="Notes_d'usage">Notes d'usage</h2>
+## Notes d'usage
 
 <table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="row">Valeur</th>
-   <td>{{cssxref('url')}} | [ {{cssxref('basic-shape')}} || &lt;geometry-box&gt; ] | <code>none</code></td>
-  </tr>
-  <tr>
-   <th scope="row">Valeur par défaut</th>
-   <td><code>none</code></td>
-  </tr>
-  <tr>
-   <th scope="row">Animation</th>
-   <td>Oui</td>
-  </tr>
- </tbody>
+  <tbody>
+    <tr>
+      <th scope="row">Valeur</th>
+      <td>
+        {{cssxref('url')}} | [ {{cssxref('basic-shape')}} ||
+        &#x3C;geometry-box> ] | <code>none</code>
+      </td>
+    </tr>
+    <tr>
+      <th scope="row">Valeur par défaut</th>
+      <td><code>none</code></td>
+    </tr>
+    <tr>
+      <th scope="row">Animation</th>
+      <td>Oui</td>
+    </tr>
+  </tbody>
 </table>
 
-<dl>
- <dt>&lt;geometry-box&gt;</dt>
- <dd>une information supplémentaire pour dire comment une {{cssxref('basic-shape', 'forme CSS')}} est appliquée à un élément: <code>fill-box</code> indique d'utiliser la zone de sélection de l'objet ; <code>stroke-box</code> d'utiliser la zone de sélection de l'objet en prenant en plus le contour de l'élément; <code>view-box</code> d'utiliser le  document SVG parent.</dd>
-</dl>
+- \<geometry-box>
+  - : une information supplémentaire pour dire comment une {{cssxref('basic-shape', 'forme CSS')}} est appliquée à un élément: `fill-box` indique d'utiliser la zone de sélection de l'objet ; `stroke-box` d'utiliser la zone de sélection de l'objet en prenant en plus le contour de l'élément; `view-box` d'utiliser le  document SVG parent.
 
-<div class="note">
-  <p><strong>Note:</strong> Pour plus d'informations sur la syntaxe de clip-path, voir la propriété CSS {{cssxref('clip-path')}}.</p>
-</div>
+> **Note :** Pour plus d'informations sur la syntaxe de clip-path, voir la propriété CSS {{cssxref('clip-path')}}.
 
-<h2>Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("svg.attributes.presentation.clip-path")}}</p>
+{{Compat("svg.attributes.presentation.clip-path")}}
 
-<h2 id="Spécifications">Spécifications</h2>
+## Spécifications
 
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">Statut</th>
-   <th scope="col">Commentaire</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName("CSS Masks", "#the-clip-path", 'clip-path')}}</td>
-   <td>{{Spec2('CSS Masks')}}</td>
-   <td>Étend son application aux éléments HTML. La propriété <code>clip-path</code> remplace la propriété {{cssxref("clip")}} dépréciée.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('SVG1.1', 'masking.html#ClipPathProperty', 'clip-path')}}</td>
-   <td>{{Spec2('SVG1.1')}}</td>
-   <td>Définition initiale (s'applique sur les éléments SVG uniquement).</td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                                                                | Statut                       | Commentaire                                                                                                                 |
+| -------------------------------------------------------------------------------------------- | ---------------------------- | --------------------------------------------------------------------------------------------------------------------------- |
+| {{SpecName("CSS Masks", "#the-clip-path", 'clip-path')}}                 | {{Spec2('CSS Masks')}} | Étend son application aux éléments HTML. La propriété `clip-path` remplace la propriété {{cssxref("clip")}} dépréciée. |
+| {{SpecName('SVG1.1', 'masking.html#ClipPathProperty', 'clip-path')}} | {{Spec2('SVG1.1')}}     | Définition initiale (s'applique sur les éléments SVG uniquement).                                                           |
diff --git a/files/fr/web/svg/attribute/color/index.md b/files/fr/web/svg/attribute/color/index.md
index d1475d4c18..1dc36653d5 100644
--- a/files/fr/web/svg/attribute/color/index.md
+++ b/files/fr/web/svg/attribute/color/index.md
@@ -6,62 +6,68 @@ tags:
   - SVG Attribute
 translation_of: Web/SVG/Attribute/color
 ---
-<p>{{SVGRef}}</p>
+{{SVGRef}}
 
-<p>L'attribut <code>color</code> est utilisé pour définir indirectement une valeur potentielle (<code>currentColor</code>) pour les attributs {{ SVGAttr("fill") }}, {{ SVGAttr("stroke") }}, {{ SvgAttr("stop-color") }}, {{ SVGAttr("flood-color") }} et {{ SVGAttr("lighting-color") }}.</p>
+L'attribut `color` est utilisé pour définir indirectement une valeur potentielle (`currentColor`) pour les attributs {{ SVGAttr("fill") }}, {{ SVGAttr("stroke") }}, {{ SvgAttr("stop-color") }}, {{ SVGAttr("flood-color") }} et {{ SVGAttr("lighting-color") }}.
 
-<div class="note">
-  <p><strong>Note :</strong> <code>color</code> étant un attribut de présentation, il peut être utilisé comme propriété CSS. Voir {{ cssxref("color","CSS color") }} pour plus d'informations.</p>
-</div>
+> **Note :** `color` étant un attribut de présentation, il peut être utilisé comme propriété CSS. Voir {{ cssxref("color","CSS color") }} pour plus d'informations.
 
-<h2 id="Contexte_d'utilisation">Contexte d'utilisation</h2>
+## Contexte d'utilisation
 
 <table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="row">Catégories</th>
-   <td>Attribut de présentation</td>
-  </tr>
-  <tr>
-   <th scope="row">Valeur</th>
-   <td><a href="/fr/SVG/Content_type#Color" title="en/SVG/Content_type#Color">&lt;color&gt;</a> | inherit</td>
-  </tr>
-  <tr>
-   <th scope="row">Animation</th>
-   <td>Yes</td>
-  </tr>
-  <tr>
-   <th scope="row">Document normatif</th>
-   <td><a href="http://www.w3.org/TR/SVG11/color.html#ColorProperty">SVG 1.1 (2nd Edition)</a></td>
-  </tr>
- </tbody>
+  <tbody>
+    <tr>
+      <th scope="row">Catégories</th>
+      <td>Attribut de présentation</td>
+    </tr>
+    <tr>
+      <th scope="row">Valeur</th>
+      <td>
+        <a href="/fr/SVG/Content_type#Color" title="en/SVG/Content_type#Color"
+          >&#x3C;color></a
+        >
+        | inherit
+      </td>
+    </tr>
+    <tr>
+      <th scope="row">Animation</th>
+      <td>Yes</td>
+    </tr>
+    <tr>
+      <th scope="row">Document normatif</th>
+      <td>
+        <a href="http://www.w3.org/TR/SVG11/color.html#ColorProperty"
+          >SVG 1.1 (2nd Edition)</a
+        >
+      </td>
+    </tr>
+  </tbody>
 </table>
 
-<h2 id="Exemple">Exemple</h2>
+## Exemple
 
-<pre class="brush: html">&lt;svg width="100" height="100" xmlns="http://www.w3.org/2000/svg" version="1.1"&gt;
-  &lt;g color="green"&gt;
-    &lt;rect width="50" height="50" fill="currentColor" /&gt;
-    &lt;circle r="25" cx="70" cy="70" stroke="currentColor" fill="none" stroke-width="5" /&gt;
-  &lt;/g&gt;
-&lt;/svg&gt;
-</pre>
+```html
+<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg" version="1.1">
+  <g color="green">
+    <rect width="50" height="50" fill="currentColor" />
+    <circle r="25" cx="70" cy="70" stroke="currentColor" fill="none" stroke-width="5" />
+  </g>
+</svg>
+```
 
-<p>{{ EmbedLiveSample('Exemple', '100%', '110') }}</p>
+{{ EmbedLiveSample('Exemple', '100%', '110') }}
 
-<h2 id="Éléments">Éléments</h2>
+## Éléments
 
-<p>Les éléments suivants peuvent utiliser l'attribut <code>color</code>:</p>
+Les éléments suivants peuvent utiliser l'attribut `color`:
 
-<ul>
- <li><a href="/fr/docs/Web/SVG/Element#Éléments_de_contenu_textuel" title="en/SVG/Element#Text_content_elements">Éléments de contenu textuel</a> »</li>
- <li><a href="/fr/docs/Web/SVG/Element#Éléments_de_formes" title="en/SVG/Element#Shape_elements">Éléments de formes</a>  »</li>
- <li>{{ SVGElement("stop") }}</li>
- <li>{{ SVGElement("feFlood") }}</li>
- <li>{{ SVGElement("feDiffuseLighting") }}</li>
- <li>{{ SVGElement("feSpecularLighting") }}</li>
-</ul>
+- [Éléments de contenu textuel](/fr/docs/Web/SVG/Element#Éléments_de_contenu_textuel "en/SVG/Element#Text_content_elements") »
+- [Éléments de formes](/fr/docs/Web/SVG/Element#Éléments_de_formes "en/SVG/Element#Shape_elements")  »
+- {{ SVGElement("stop") }}
+- {{ SVGElement("feFlood") }}
+- {{ SVGElement("feDiffuseLighting") }}
+- {{ SVGElement("feSpecularLighting") }}
 
-<h2 id="Browser_Compatibility">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("svg.attributes.presentation.color")}}</p>
+{{Compat("svg.attributes.presentation.color")}}
diff --git a/files/fr/web/svg/attribute/conditional_processing/index.md b/files/fr/web/svg/attribute/conditional_processing/index.md
index fe0f0c644d..a753991283 100644
--- a/files/fr/web/svg/attribute/conditional_processing/index.md
+++ b/files/fr/web/svg/attribute/conditional_processing/index.md
@@ -3,32 +3,28 @@ title: Attributs SVG de traitement conditionnel
 slug: Web/SVG/Attribute/Conditional_Processing
 translation_of: Web/SVG/Attribute/Conditional_Processing
 ---
-<p>Les <em>attributs SVG de traitement conditionnel</em> sont tous les attributs qui peuvent être spécifiés sur des éléments SVG pour contrôler si l'élément sur lequel il s'applique doit s'afficher ou non.</p>
+Les _attributs SVG de traitement conditionnel_ sont tous les attributs qui peuvent être spécifiés sur des éléments SVG pour contrôler si l'élément sur lequel il s'applique doit s'afficher ou non.
 
-<ul>
- <li>externalResourcesRequired</li>
- <li>requiredExtensions</li>
- <li>requiredFeatures</li>
- <li>systemLanguage</li>
-</ul>
+- externalResourcesRequired
+- requiredExtensions
+- requiredFeatures
+- systemLanguage
 
-<h2 id="Attributs">Attributs</h2>
+## Attributs
 
-<dl>
- <dt>{{SVGAttr('externalResourcesRequired')}} {{deprecated_inline('svg2')}}</dt>
- <dd>Si sa valeur vaut <code>true</code>, cela indique que le navigateur doit attendre que toutes les ressources externes nécessaires au rendu de cet élément soient chargées avant de traiter l'élément associé.<br>
- <small><em>Valeur</em>: <strong><code>false</code></strong>|<code>true</code>; <em>Animation</em>: <strong>Non</strong></small></dd>
- <dt>{{SVGAttr('requiredExtensions')}}</dt>
- <dd>Liste toutes les fonctionnalités devant être prises en charge par le navigateur pour autoriser l'affichage de l'élément associé.<br>
- <small><em>Valeur</em>: Une liste d'URI séparées par des espaces; <em>Animation</em>: <strong>Non</strong></small></dd>
- <dt>{{SVGAttr('requiredFeatures')}} {{deprecated_inline('svg2')}}</dt>
- <dd>Liste toutes les fonctionnalités, <a href="https://www.w3.org/TR/SVG11/feature.html">telles que définies dans la spécification SVG 1.1</a>, devant être prises en charge par le navigateur pour autoriser l'affichage de l'élément associé.<br>
- <small><em>Valeur</em>: Une list d'URI séparées par espaces; <em>Animation</em>: <strong>Non</strong></small></dd>
- <dt>{{SVGAttr('systemLanguage')}}</dt>
- <dd>Indique la langue que l'utilisatteur doit avoir choisit pour autoriser l'affichage l'élément associé.<br>
- <small><em>Valeur</em>: Une liste d'<a href="http://www.ietf.org/rfc/bcp/bcp47.txt">ID de langage</a> séparés par des virgules; <em>Animation</em>: <strong>Non</strong></small></dd>
-</dl>
+- {{SVGAttr('externalResourcesRequired')}} {{deprecated_inline('svg2')}}
+  - : Si sa valeur vaut `true`, cela indique que le navigateur doit attendre que toutes les ressources externes nécessaires au rendu de cet élément soient chargées avant de traiter l'élément associé.
+    _Valeur_: **`false`**|`true`; _Animation_: **Non**
+- {{SVGAttr('requiredExtensions')}}
+  - : Liste toutes les fonctionnalités devant être prises en charge par le navigateur pour autoriser l'affichage de l'élément associé.
+    _Valeur_: Une liste d'URI séparées par des espaces; _Animation_: **Non**
+- {{SVGAttr('requiredFeatures')}} {{deprecated_inline('svg2')}}
+  - : Liste toutes les fonctionnalités, [telles que définies dans la spécification SVG 1.1](https://www.w3.org/TR/SVG11/feature.html), devant être prises en charge par le navigateur pour autoriser l'affichage de l'élément associé.
+    _Valeur_: Une list d'URI séparées par espaces; _Animation_: **Non**
+- {{SVGAttr('systemLanguage')}}
+  - : Indique la langue que l'utilisatteur doit avoir choisit pour autoriser l'affichage l'élément associé.
+    _Valeur_: Une liste d'[ID de langage](http://www.ietf.org/rfc/bcp/bcp47.txt) séparés par des virgules; _Animation_: **Non**
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("svg.attributes.conditional_processing")}}</p>
+{{Compat("svg.attributes.conditional_processing")}}
diff --git a/files/fr/web/svg/attribute/core/index.md b/files/fr/web/svg/attribute/core/index.md
index bb0b65989e..68eba8a13f 100644
--- a/files/fr/web/svg/attribute/core/index.md
+++ b/files/fr/web/svg/attribute/core/index.md
@@ -3,61 +3,50 @@ title: Attributs SVG de base
 slug: Web/SVG/Attribute/Core
 translation_of: Web/SVG/Attribute/Core
 ---
-<p>Les <em>attributs SVG de base</em> sont  tous les attributs communs pouvant être spécifiés sur n'importe quel élément SVG.</p>
-
-<ul>
- <li><code>id</code></li>
- <li><code>lang</code></li>
- <li><code>tabindex</code></li>
- <li><code>xml:base</code></li>
- <li><code>xml:lang</code></li>
- <li><code>xml:space</code></li>
-</ul>
-
-<h2 id="Attributs">Attributs</h2>
-
-<dl>
- <dt>{{SVGAttr('id')}}</dt>
- <dd>Définit un identifiant (ID) qui doit être unique dans tout le document. Son but est d'identifier l'élément pour pouvoir y faire référence plus tard, comme identificateur de fragment, dans du code, ou pour appliquer du style (avec CSS).<br>
- <small><em>Valuer</em>: Tout ID valide; <em>Animation</em>: <strong>Non</strong></small></dd>
- <dt>{{SVGAttr('lang')}}</dt>
- <dd>
- <p>Définit le langage de l'élément  — la langue dans laquelle sont écrit les éléments non-éditables et celle dans laquelle devrait être écrits les éléments éditables. L'attribut prend pour valeur l'identifiant de la langue tel que définit dans le <a href="https://www.ietf.org/rfc/bcp/bcp47.txt">document IETF "Tags for Identifying Languages" (BCP47)</a>.</p>
-
- <div class="note">
- <p><strong>Note :</strong> SVG 2 introduit l'attribut <code>lang</code>. Si les attributs <code>lang</code> et <code>xml:lang</code> sont tous les deux définis, <code>xml:lang</code> a la priorité sur <code>lang</code>.</p>
- </div>
-
- <p><small><em>Valeur</em>: Tout ID de langage valide; <em>Animation</em>: <strong>Non</strong></small></p>
- </dd>
- <dt>{{SVGAttr('tabindex')}}</dt>
- <dd>L'attribut SVG tabindex permet de contrôler si un élément peut prendre le focus et définit l'ordre relatif des éléments pour la navigation via tabulation.<br>
- <small><em>Type de valeur</em>: <a href="/docs/Web/SVG/Content_type#Integer">&lt;integer&gt;</a>; <em>Animation</em>: <strong>Non</strong></small></dd>
- <dt>{{SVGAttr('xml:base')}}</dt>
- <dd>Spécifie une IRI de base autre que celle du document.<br>
- <small><em>Type de valeur</em>: <a href="/docs/Web/SVG/Content_type#IRI">&lt;IRI&gt;</a>; <em>Animation</em>: <strong>Non</strong></small></dd>
- <dt>{{SVGAttr('xml:lang')}}</dt>
- <dd>
- <p>C'est un attribut universel autorisé dans tous les documents XML pour définir le langage du texte présent dans l'élément. Son utilisation est presque identique à celle de l'attribut <a href="/fr/docs/Web/HTML/Attributs_universels/lang">lang</a> en HTML, hormis que les documents XML 1.0 ne permettent pas l'utilisation d'une valeur d'attribut nulle (<code>xml:lang=""</code>) pour indiquer un langage inconnu. À la place, utiliser <code>xml:lang="und"</code>.</p>
-
- <div class="note">
- <p><strong>Note :</strong> SVG 2 introduit l'attribut <code>lang</code>. Si les attributs <code>lang</code> et <code>xml:lang</code> sont tous les deux définis, <code>xml:lang</code> a la priorité sur <code>lang</code>.</p>
- </div>
-
- <p><small><em>Valeur</em>: Tout ID de langage valide; <em>Animation</em>: <strong>Non</strong></small></p>
- </dd>
- <dt>{{SVGAttr('xml:space')}} {{deprecated_inline('svg2')}}</dt>
- <dd>
- <p>SVG prend en charge l'attribut XML standard <code>xml:space</code> pour spécifier le traitement des caractères d'espaces dans les données d'un élément {{ SVGElement("text") }} donné.</p>
-
- <div class="note">
- <p><strong>Note:</strong> Plutôt qu'utiliser l'attribut <code>xml:space</code> vous devriez utiliser la propriété CSS {{cssxref('white-space')}} à la place.</p>
- </div>
-
- <p><small><em>Valeur</em>: <code><strong>default</strong></code> | <code>preserve</code>; <em>Animation</em>: <strong>Non</strong></small></p>
- </dd>
-</dl>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("svg.attributes.core")}}</p>
+Les _attributs SVG de base_ sont  tous les attributs communs pouvant être spécifiés sur n'importe quel élément SVG.
+
+- `id`
+- `lang`
+- `tabindex`
+- `xml:base`
+- `xml:lang`
+- `xml:space`
+
+## Attributs
+
+- {{SVGAttr('id')}}
+  - : Définit un identifiant (ID) qui doit être unique dans tout le document. Son but est d'identifier l'élément pour pouvoir y faire référence plus tard, comme identificateur de fragment, dans du code, ou pour appliquer du style (avec CSS).
+    _Valuer_: Tout ID valide; _Animation_: **Non**
+- {{SVGAttr('lang')}}
+
+  - : Définit le langage de l'élément  — la langue dans laquelle sont écrit les éléments non-éditables et celle dans laquelle devrait être écrits les éléments éditables. L'attribut prend pour valeur l'identifiant de la langue tel que définit dans le [document IETF "Tags for Identifying Languages" (BCP47)](https://www.ietf.org/rfc/bcp/bcp47.txt).
+
+    > **Note :** SVG 2 introduit l'attribut `lang`. Si les attributs `lang` et `xml:lang` sont tous les deux définis, `xml:lang` a la priorité sur `lang`.
+
+    _Valeur_: Tout ID de langage valide; _Animation_: **Non**
+
+- {{SVGAttr('tabindex')}}
+  - : L'attribut SVG tabindex permet de contrôler si un élément peut prendre le focus et définit l'ordre relatif des éléments pour la navigation via tabulation.
+    _Type de valeur_: [\<integer>](/docs/Web/SVG/Content_type#Integer); _Animation_: **Non**
+- {{SVGAttr('xml:base')}}
+  - : Spécifie une IRI de base autre que celle du document.
+    _Type de valeur_: [\<IRI>](/docs/Web/SVG/Content_type#IRI); _Animation_: **Non**
+- {{SVGAttr('xml:lang')}}
+
+  - : C'est un attribut universel autorisé dans tous les documents XML pour définir le langage du texte présent dans l'élément. Son utilisation est presque identique à celle de l'attribut [lang](/fr/docs/Web/HTML/Attributs_universels/lang) en HTML, hormis que les documents XML 1.0 ne permettent pas l'utilisation d'une valeur d'attribut nulle (`xml:lang=""`) pour indiquer un langage inconnu. À la place, utiliser `xml:lang="und"`.
+
+    > **Note :** SVG 2 introduit l'attribut `lang`. Si les attributs `lang` et `xml:lang` sont tous les deux définis, `xml:lang` a la priorité sur `lang`.
+
+    _Valeur_: Tout ID de langage valide; _Animation_: **Non**
+
+- {{SVGAttr('xml:space')}} {{deprecated_inline('svg2')}}
+
+  - : SVG prend en charge l'attribut XML standard `xml:space` pour spécifier le traitement des caractères d'espaces dans les données d'un élément {{ SVGElement("text") }} donné.
+
+    > **Note :** Plutôt qu'utiliser l'attribut `xml:space` vous devriez utiliser la propriété CSS {{cssxref('white-space')}} à la place.
+
+    _Valeur_: **`default`** | `preserve`; _Animation_: **Non**
+
+## Compatibilité des navigateurs
+
+{{Compat("svg.attributes.core")}}
diff --git a/files/fr/web/svg/attribute/cx/index.md b/files/fr/web/svg/attribute/cx/index.md
index 02eeedde0c..fdc7a96f5c 100644
--- a/files/fr/web/svg/attribute/cx/index.md
+++ b/files/fr/web/svg/attribute/cx/index.md
@@ -6,167 +6,166 @@ tags:
   - SVG Attribute
 translation_of: Web/SVG/Attribute/cx
 ---
-<p>{{SVGRef}}</p>
+{{SVGRef}}
 
-<p>L'attribut <strong><code>cx</code></strong> définit la coordonnée de l'axe x pour le point central d'un élément.</p>
+L'attribut **`cx`** définit la coordonnée de l'axe x pour le point central d'un élément.
 
-<p>Trois éléments utilisent cet attribut: {{SVGElement("circle")}}, {{SVGElement("ellipse")}}, et {{SVGElement("radialGradient")}}</p>
+Trois éléments utilisent cet attribut: {{SVGElement("circle")}}, {{SVGElement("ellipse")}}, et {{SVGElement("radialGradient")}}
 
-<h2>Exemple</h2>
+## Exemple
 
-<pre class="brush: css hidden">html,body,svg { height:100% }</pre>
+```css hidden
+html,body,svg { height:100% }
+```
 
-<pre class="brush: html">&lt;svg viewBox="0 0 300 100" xmlns="http://www.w3.org/2000/svg"&gt;
-  &lt;radialGradient cx="25%" id="myGradient"&gt;
-    &lt;stop offset="0"    stop-color="white" /&gt;
-    &lt;stop offset="100%" stop-color="black" /&gt;
-  &lt;/radialGradient&gt;
+```html
+<svg viewBox="0 0 300 100" xmlns="http://www.w3.org/2000/svg">
+  <radialGradient cx="25%" id="myGradient">
+    <stop offset="0"    stop-color="white" />
+    <stop offset="100%" stop-color="black" />
+  </radialGradient>
 
-  &lt;circle cx="50" cy="50" r="45"/&gt;
-  &lt;ellipse cx="150" cy="50" rx="45" ry="25" /&gt;
-  &lt;rect x="205" y="5" width="90" height="90" fill="url(#myGradient)" /&gt;
-&lt;/svg&gt;</pre>
+  <circle cx="50" cy="50" r="45"/>
+  <ellipse cx="150" cy="50" rx="45" ry="25" />
+  <rect x="205" y="5" width="90" height="90" fill="url(#myGradient)" />
+</svg>
+```
 
-<p>{{EmbedLiveSample('exemple', 100, 100)}}</p>
+{{EmbedLiveSample('exemple', 100, 100)}}
 
-<h2 id="circle">circle</h2>
+## circle
 
-<p>Pour un élément {{SVGElement('circle')}}, <code>cx</code> définit la coordonnée x de son centre.</p>
+Pour un élément {{SVGElement('circle')}}, `cx` définit la coordonnée x de son centre.
 
 <table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="row">Valeur</th>
-   <td><strong><a href="/docs/Web/SVG/Content_type#Length">&lt;length&gt;</a></strong> | <strong><a href="/docs/Web/SVG/Content_type#Percentage">&lt;percentage&gt;</a></strong></td>
-  </tr>
-  <tr>
-   <th scope="row">Valeur par défaut</th>
-   <td><code>0</code></td>
-  </tr>
-  <tr>
-   <th scope="row">Animation</th>
-   <td>Oui</td>
-  </tr>
- </tbody>
+  <tbody>
+    <tr>
+      <th scope="row">Valeur</th>
+      <td>
+        <strong
+          ><a href="/docs/Web/SVG/Content_type#Length">&#x3C;length></a></strong
+        >
+        |
+        <strong
+          ><a href="/docs/Web/SVG/Content_type#Percentage"
+            >&#x3C;percentage></a
+          ></strong
+        >
+      </td>
+    </tr>
+    <tr>
+      <th scope="row">Valeur par défaut</th>
+      <td><code>0</code></td>
+    </tr>
+    <tr>
+      <th scope="row">Animation</th>
+      <td>Oui</td>
+    </tr>
+  </tbody>
 </table>
 
-<div class="note">
-  <p><strong>Note:</strong> À partir de SVG2, <code>cx</code> est une<em> propriété de géométrie</em>, ce qui signifie que cet attribut peut être utilisé comme propriété CSS pour les cercles.</p>
-</div>
+> **Note :** À partir de SVG2, `cx` est une _propriété de géométrie_, ce qui signifie que cet attribut peut être utilisé comme propriété CSS pour les cercles.
 
-<h2 id="ellipse">ellipse</h2>
+## ellipse
 
-<p>Pour un élément {{SVGElement('ellipse')}}, <code>cx</code> définit la coordonnées x de son centre.</p>
+Pour un élément {{SVGElement('ellipse')}}, `cx` définit la coordonnées x de son centre.
 
 <table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="row">Valeur</th>
-   <td><strong><a href="/docs/Web/SVG/Content_type#Length">&lt;length&gt;</a></strong> | <strong><a href="/docs/Web/SVG/Content_type#Percentage">&lt;percentage&gt;</a></strong></td>
-  </tr>
-  <tr>
-   <th scope="row">Valeur par défaut</th>
-   <td><code>0</code></td>
-  </tr>
-  <tr>
-   <th scope="row">Animation</th>
-   <td>Oui</td>
-  </tr>
- </tbody>
+  <tbody>
+    <tr>
+      <th scope="row">Valeur</th>
+      <td>
+        <strong
+          ><a href="/docs/Web/SVG/Content_type#Length">&#x3C;length></a></strong
+        >
+        |
+        <strong
+          ><a href="/docs/Web/SVG/Content_type#Percentage"
+            >&#x3C;percentage></a
+          ></strong
+        >
+      </td>
+    </tr>
+    <tr>
+      <th scope="row">Valeur par défaut</th>
+      <td><code>0</code></td>
+    </tr>
+    <tr>
+      <th scope="row">Animation</th>
+      <td>Oui</td>
+    </tr>
+  </tbody>
 </table>
 
-<div class="note">
-  <p><strong>Note :</strong> À partir de SVG2, <code>cx</code> est une<em> propriété de géométrie</em>, ce qui signifie que cet attribut peut être utilisé comme propriété CSS pour les ellipses.</p>
-</div>
+> **Note :** À partir de SVG2, `cx` est une _propriété de géométrie_, ce qui signifie que cet attribut peut être utilisé comme propriété CSS pour les ellipses.
 
-<h2 id="radialGradient">radialGradient</h2>
+## radialGradient
 
-<p>Pour un élément {{SVGElement('radialGradient')}}, <code>cx</code> définit la coordonnées x du plus grand cercle pour le dégradé radial (c'est-à-dire du plus externe). Le dégradé sera dessiné de telle façon que la <a href="/fr/docs/SVG/Element/stop" title="/en-US/docs/SVG/Element/stop">limite du dégradé</a> à <strong>100%</strong> corresponde au périmètre de ce plus grand cercle.</p>
+Pour un élément {{SVGElement('radialGradient')}}, `cx` définit la coordonnées x du plus grand cercle pour le dégradé radial (c'est-à-dire du plus externe). Le dégradé sera dessiné de telle façon que la [limite du dégradé](/fr/docs/SVG/Element/stop "/en-US/docs/SVG/Element/stop") à **100%** corresponde au périmètre de ce plus grand cercle.
 
 <table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="row">Valeur</th>
-   <td><strong><a href="/docs/Web/SVG/Content_type#Length">&lt;length&gt;</a></strong></td>
-  </tr>
-  <tr>
-   <th scope="row">Valeur par défaut</th>
-   <td><code>50%</code></td>
-  </tr>
-  <tr>
-   <th scope="row">Animation</th>
-   <td>Oui</td>
-  </tr>
- </tbody>
+  <tbody>
+    <tr>
+      <th scope="row">Valeur</th>
+      <td>
+        <strong
+          ><a href="/docs/Web/SVG/Content_type#Length">&#x3C;length></a></strong
+        >
+      </td>
+    </tr>
+    <tr>
+      <th scope="row">Valeur par défaut</th>
+      <td><code>50%</code></td>
+    </tr>
+    <tr>
+      <th scope="row">Animation</th>
+      <td>Oui</td>
+    </tr>
+  </tbody>
 </table>
 
-<h4 id="autre_exemple">Autre exemple</h4>
-
-<pre class="brush: css hidden">html,body,svg { height:100% }</pre>
-
-<pre class="brush: html">&lt;svg viewBox="0 0 34 10" xmlns="http://www.w3.org/2000/svg"&gt;
-  &lt;defs&gt;
-    &lt;radialGradient cx="0" id="myGradient000"&gt;
-      &lt;stop offset="0%"   stop-color="gold" /&gt;
-      &lt;stop offset="50%"  stop-color="green" /&gt;
-      &lt;stop offset="100%" stop-color="white" /&gt;
-    &lt;/radialGradient&gt;
-
-    &lt;radialGradient cx="50%" id="myGradient050"&gt;
-      &lt;stop offset="0%"   stop-color="gold" /&gt;
-      &lt;stop offset="50%"  stop-color="green" /&gt;
-      &lt;stop offset="100%" stop-color="white" /&gt;
-    &lt;/radialGradient&gt;
-
-    &lt;radialGradient cx="100%" id="myGradient100"&gt;
-      &lt;stop offset="0%"   stop-color="gold" /&gt;
-      &lt;stop offset="50%"  stop-color="green" /&gt;
-      &lt;stop offset="100%" stop-color="white" /&gt;
-    &lt;/radialGradient&gt;
-  &lt;/defs&gt;
-
-  &lt;rect x="1"  y="1" width="8" height="8" fill="url(#myGradient000)" stroke="black" /&gt;
-  &lt;rect x="13" y="1" width="8" height="8" fill="url(#myGradient050)" stroke="black" /&gt;
-  &lt;rect x="25" y="1" width="8" height="8" fill="url(#myGradient100)" stroke="black" /&gt;
-&lt;/svg&gt;</pre>
-
-<p>{{EmbedLiveSample('radialGradient', 150, '100%')}}</p>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">Statut</th>
-   <th scope="col">Commentaire</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName("SVG2", "geometry.html#CX", "cx")}}</td>
-   <td>{{Spec2("SVG2")}}</td>
-   <td>Définition comme propriété de géométrie</td>
-  </tr>
-  <tr>
-   <td>{{SpecName("SVG2", "pservers.html#RadialGradientElementCXAttribute", "cx")}}</td>
-   <td>{{Spec2("SVG2")}}</td>
-   <td>Définition pour SVG2</td>
-  </tr>
-  <tr>
-   <td>{{SpecName("SVG1.1", "pservers.html#RadialGradientElementCXAttribute", "cx")}}</td>
-   <td>{{Spec2("SVG1.1")}}</td>
-   <td>Définition initiale pour <code>&lt;radialGradient&gt;</code></td>
-  </tr>
-  <tr>
-   <td>{{SpecName("SVG1.1", "shapes.html#EllipseElementCXAttribute", "cx")}}</td>
-   <td>{{Spec2("SVG1.1")}}</td>
-   <td>Définition initiale pour <code>&lt;ellipse&gt;</code></td>
-  </tr>
-  <tr>
-   <td>{{SpecName("SVG1.1", "shapes.html#CircleElementCXAttribute", "cx")}}</td>
-   <td>{{Spec2("SVG1.1")}}</td>
-   <td>Définition initiale pour <code>&lt;circle&gt;</code></td>
-  </tr>
- </tbody>
-</table>
+#### Autre exemple
+
+```css hidden
+html,body,svg { height:100% }
+```
+
+```html
+<svg viewBox="0 0 34 10" xmlns="http://www.w3.org/2000/svg">
+  <defs>
+    <radialGradient cx="0" id="myGradient000">
+      <stop offset="0%"   stop-color="gold" />
+      <stop offset="50%"  stop-color="green" />
+      <stop offset="100%" stop-color="white" />
+    </radialGradient>
+
+    <radialGradient cx="50%" id="myGradient050">
+      <stop offset="0%"   stop-color="gold" />
+      <stop offset="50%"  stop-color="green" />
+      <stop offset="100%" stop-color="white" />
+    </radialGradient>
+
+    <radialGradient cx="100%" id="myGradient100">
+      <stop offset="0%"   stop-color="gold" />
+      <stop offset="50%"  stop-color="green" />
+      <stop offset="100%" stop-color="white" />
+    </radialGradient>
+  </defs>
+
+  <rect x="1"  y="1" width="8" height="8" fill="url(#myGradient000)" stroke="black" />
+  <rect x="13" y="1" width="8" height="8" fill="url(#myGradient050)" stroke="black" />
+  <rect x="25" y="1" width="8" height="8" fill="url(#myGradient100)" stroke="black" />
+</svg>
+```
+
+{{EmbedLiveSample('radialGradient', 150, '100%')}}
+
+## Spécifications
+
+| Spécification                                                                                            | Statut                   | Commentaire                                 |
+| -------------------------------------------------------------------------------------------------------- | ------------------------ | ------------------------------------------- |
+| {{SpecName("SVG2", "geometry.html#CX", "cx")}}                                             | {{Spec2("SVG2")}} | Définition comme propriété de géométrie     |
+| {{SpecName("SVG2", "pservers.html#RadialGradientElementCXAttribute", "cx")}}     | {{Spec2("SVG2")}} | Définition pour SVG2                        |
+| {{SpecName("SVG1.1", "pservers.html#RadialGradientElementCXAttribute", "cx")}} | {{Spec2("SVG1.1")}} | Définition initiale pour `<radialGradient>` |
+| {{SpecName("SVG1.1", "shapes.html#EllipseElementCXAttribute", "cx")}}             | {{Spec2("SVG1.1")}} | Définition initiale pour `<ellipse>`        |
+| {{SpecName("SVG1.1", "shapes.html#CircleElementCXAttribute", "cx")}}             | {{Spec2("SVG1.1")}} | Définition initiale pour `<circle>`         |
diff --git a/files/fr/web/svg/attribute/cy/index.md b/files/fr/web/svg/attribute/cy/index.md
index 24ec4c6c58..b230dfd661 100644
--- a/files/fr/web/svg/attribute/cy/index.md
+++ b/files/fr/web/svg/attribute/cy/index.md
@@ -6,167 +6,166 @@ tags:
   - SVG Attribute
 translation_of: Web/SVG/Attribute/cy
 ---
-<div>{{SVGRef}}</div>
+{{SVGRef}}
 
-<p>L'attribut <strong><code>cy</code></strong> définit la coordonnée de l'axe y pour le point central d'un élément.</p>
+L'attribut **`cy`** définit la coordonnée de l'axe y pour le point central d'un élément.
 
-<p>Trois éléments utilisent cet attribut: {{SVGElement("circle")}}, {{SVGElement("ellipse")}}, et {{SVGElement("radialGradient")}}</p>
+Trois éléments utilisent cet attribut: {{SVGElement("circle")}}, {{SVGElement("ellipse")}}, et {{SVGElement("radialGradient")}}
 
-<h2>Exemple</h2>
+## Exemple
 
-<pre class="brush: css hidden">html,body,svg { height:100% }</pre>
+```css hidden
+html,body,svg { height:100% }
+```
 
-<pre class="brush: html">&lt;svg viewBox="0 0 100 300" xmlns="http://www.w3.org/2000/svg"&gt;
-  &lt;radialGradient cy="25%" id="myGradient"&gt;
-    &lt;stop offset="0"    stop-color="white" /&gt;
-    &lt;stop offset="100%" stop-color="black" /&gt;
-  &lt;/radialGradient&gt;
+```html
+<svg viewBox="0 0 100 300" xmlns="http://www.w3.org/2000/svg">
+  <radialGradient cy="25%" id="myGradient">
+    <stop offset="0"    stop-color="white" />
+    <stop offset="100%" stop-color="black" />
+  </radialGradient>
 
-  &lt;circle  cy="50"  cx="50" r="45"/&gt;
-  &lt;ellipse cy="150" cx="50" rx="45" ry="25" /&gt;
-  &lt;rect x="5" y="205" width="90" height="90" fill="url(#myGradient)" /&gt;
-&lt;/svg&gt;</pre>
+  <circle  cy="50"  cx="50" r="45"/>
+  <ellipse cy="150" cx="50" rx="45" ry="25" />
+  <rect x="5" y="205" width="90" height="90" fill="url(#myGradient)" />
+</svg>
+```
 
-<p>{{EmbedLiveSample('exemple', '100%', 300)}}</p>
+{{EmbedLiveSample('exemple', '100%', 300)}}
 
-<h2 id="circle">circle</h2>
+## circle
 
-<p>Pour un élément {{SVGElement('circle')}}, <code>cy</code> définit la coordonnée y de son centre.</p>
+Pour un élément {{SVGElement('circle')}}, `cy` définit la coordonnée y de son centre.
 
 <table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="row">Valeur</th>
-   <td><strong><a href="/docs/Web/SVG/Content_type#Length">&lt;length&gt;</a></strong> | <strong><a href="/docs/Web/SVG/Content_type#Percentage">&lt;percentage&gt;</a></strong></td>
-  </tr>
-  <tr>
-   <th scope="row">Valeur par défaut</th>
-   <td><code>0</code></td>
-  </tr>
-  <tr>
-   <th scope="row">Animation</th>
-   <td>Oui</td>
-  </tr>
- </tbody>
+  <tbody>
+    <tr>
+      <th scope="row">Valeur</th>
+      <td>
+        <strong
+          ><a href="/docs/Web/SVG/Content_type#Length">&#x3C;length></a></strong
+        >
+        |
+        <strong
+          ><a href="/docs/Web/SVG/Content_type#Percentage"
+            >&#x3C;percentage></a
+          ></strong
+        >
+      </td>
+    </tr>
+    <tr>
+      <th scope="row">Valeur par défaut</th>
+      <td><code>0</code></td>
+    </tr>
+    <tr>
+      <th scope="row">Animation</th>
+      <td>Oui</td>
+    </tr>
+  </tbody>
 </table>
 
-<div class="note">
-  <p><strong>Note:</strong> À partir de SVG2, <code>cy</code> est une<em> propriété de géométrie</em>, ce qui signifie que cet attribut peut être utilisé comme propriété CSS pour les cercles.</p>
-</div>
+> **Note :** À partir de SVG2, `cy` est une _propriété de géométrie_, ce qui signifie que cet attribut peut être utilisé comme propriété CSS pour les cercles.
 
-<h2 id="ellipse">ellipse</h2>
+## ellipse
 
-<p>Pour un élément {{SVGElement('ellipse')}}, <code>cy</code> définit la coordonnée y de son centre.</p>
+Pour un élément {{SVGElement('ellipse')}}, `cy` définit la coordonnée y de son centre.
 
 <table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="row">Valeur</th>
-   <td><strong><a href="/docs/Web/SVG/Content_type#Length">&lt;length&gt;</a></strong> | <strong><a href="/docs/Web/SVG/Content_type#Percentage">&lt;percentage&gt;</a></strong></td>
-  </tr>
-  <tr>
-   <th scope="row">Valeur par défaut</th>
-   <td><code>0</code></td>
-  </tr>
-  <tr>
-   <th scope="row">Animation</th>
-   <td>Oui</td>
-  </tr>
- </tbody>
+  <tbody>
+    <tr>
+      <th scope="row">Valeur</th>
+      <td>
+        <strong
+          ><a href="/docs/Web/SVG/Content_type#Length">&#x3C;length></a></strong
+        >
+        |
+        <strong
+          ><a href="/docs/Web/SVG/Content_type#Percentage"
+            >&#x3C;percentage></a
+          ></strong
+        >
+      </td>
+    </tr>
+    <tr>
+      <th scope="row">Valeur par défaut</th>
+      <td><code>0</code></td>
+    </tr>
+    <tr>
+      <th scope="row">Animation</th>
+      <td>Oui</td>
+    </tr>
+  </tbody>
 </table>
 
-<div class="note">
-  <p><strong>Note :</strong> À partir de SVG2, <code>cy</code> est une<em> propriété de géométrie</em>, ce qui signifie que cet attribut peut être utilisé comme propriété CSS pour les ellipses.</p>
-</div>
+> **Note :** À partir de SVG2, `cy` est une _propriété de géométrie_, ce qui signifie que cet attribut peut être utilisé comme propriété CSS pour les ellipses.
 
-<h2 id="radialGradient">radialGradient</h2>
+## radialGradient
 
-<p>Pour un élément {{SVGElement('radialGradient')}}, <code>cy</code> définit la coordonnées x du plus grand cercle pour le dégradé radial (c'est-à-dire du plus externe). Le dégradé sera dessiné de telle façon que la <a href="/fr/docs/SVG/Element/stop" title="/en-US/docs/SVG/Element/stop">limite de dégradé</a> de <strong>100%</strong> corresponde au périmètre de ce plus grand cercle.</p>
+Pour un élément {{SVGElement('radialGradient')}}, `cy` définit la coordonnées x du plus grand cercle pour le dégradé radial (c'est-à-dire du plus externe). Le dégradé sera dessiné de telle façon que la [limite de dégradé](/fr/docs/SVG/Element/stop "/en-US/docs/SVG/Element/stop") de **100%** corresponde au périmètre de ce plus grand cercle.
 
 <table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="row">Valeur</th>
-   <td><strong><a href="/docs/Web/SVG/Content_type#Length">&lt;length&gt;</a></strong></td>
-  </tr>
-  <tr>
-   <th scope="row">Valeur par défaut</th>
-   <td><code>50%</code></td>
-  </tr>
-  <tr>
-   <th scope="row">Animation</th>
-   <td>Oui</td>
-  </tr>
- </tbody>
+  <tbody>
+    <tr>
+      <th scope="row">Valeur</th>
+      <td>
+        <strong
+          ><a href="/docs/Web/SVG/Content_type#Length">&#x3C;length></a></strong
+        >
+      </td>
+    </tr>
+    <tr>
+      <th scope="row">Valeur par défaut</th>
+      <td><code>50%</code></td>
+    </tr>
+    <tr>
+      <th scope="row">Animation</th>
+      <td>Oui</td>
+    </tr>
+  </tbody>
 </table>
 
-<h4 id="autre_exemple">Autre exemple</h4>
-
-<pre class="brush: css hidden">html,body,svg { height:100% }</pre>
-
-<pre class="brush: html">&lt;svg viewBox="0 0 34 10" xmlns="http://www.w3.org/2000/svg"&gt;
-  &lt;defs&gt;
-    &lt;radialGradient cy="0" id="myGradient000"&gt;
-      &lt;stop offset="0%"   stop-color="gold" /&gt;
-      &lt;stop offset="50%"  stop-color="green" /&gt;
-      &lt;stop offset="100%" stop-color="white" /&gt;
-    &lt;/radialGradient&gt;
-
-    &lt;radialGradient cy="50%" id="myGradient050"&gt;
-      &lt;stop offset="0%"   stop-color="gold" /&gt;
-      &lt;stop offset="50%"  stop-color="green" /&gt;
-      &lt;stop offset="100%" stop-color="white" /&gt;
-    &lt;/radialGradient&gt;
-
-    &lt;radialGradient cy="100%" id="myGradient100"&gt;
-      &lt;stop offset="0%"   stop-color="gold" /&gt;
-      &lt;stop offset="50%"  stop-color="green" /&gt;
-      &lt;stop offset="100%" stop-color="white" /&gt;
-    &lt;/radialGradient&gt;
-  &lt;/defs&gt;
-
-  &lt;rect x="1"  y="1" width="8" height="8" fill="url(#myGradient000)" stroke="black" /&gt;
-  &lt;rect x="13" y="1" width="8" height="8" fill="url(#myGradient050)" stroke="black" /&gt;
-  &lt;rect x="25" y="1" width="8" height="8" fill="url(#myGradient100)" stroke="black" /&gt;
-&lt;/svg&gt;</pre>
-
-<p>{{EmbedLiveSample('radialGradient', 150, '100%')}}</p>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">Statut</th>
-   <th scope="col">Commentaire</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName("SVG2", "geometry.html#CY", "cy")}}</td>
-   <td>{{Spec2("SVG2")}}</td>
-   <td>Définition comme propriété de géométrie</td>
-  </tr>
-  <tr>
-   <td>{{SpecName("SVG2", "pservers.html#RadialGradientElementCYAttribute", "cy")}}</td>
-   <td>{{Spec2("SVG2")}}</td>
-   <td>Définition pour SVG2</td>
-  </tr>
-  <tr>
-   <td>{{SpecName("SVG1.1", "pservers.html#RadialGradientElementCYAttribute", "cy")}}</td>
-   <td>{{Spec2("SVG1.1")}}</td>
-   <td>Définition initiale pour <code>&lt;radialGradient&gt;</code></td>
-  </tr>
-  <tr>
-   <td>{{SpecName("SVG1.1", "shapes.html#EllipseElementCYAttribute", "cy")}}</td>
-   <td>{{Spec2("SVG1.1")}}</td>
-   <td>Définition initiale pour <code>&lt;ellipse&gt;</code></td>
-  </tr>
-  <tr>
-   <td>{{SpecName("SVG1.1", "shapes.html#CircleElementCYAttribute", "cy")}}</td>
-   <td>{{Spec2("SVG1.1")}}</td>
-   <td>Définition initiale pour <code>&lt;circle&gt;</code></td>
-  </tr>
- </tbody>
-</table>
+#### Autre exemple
+
+```css hidden
+html,body,svg { height:100% }
+```
+
+```html
+<svg viewBox="0 0 34 10" xmlns="http://www.w3.org/2000/svg">
+  <defs>
+    <radialGradient cy="0" id="myGradient000">
+      <stop offset="0%"   stop-color="gold" />
+      <stop offset="50%"  stop-color="green" />
+      <stop offset="100%" stop-color="white" />
+    </radialGradient>
+
+    <radialGradient cy="50%" id="myGradient050">
+      <stop offset="0%"   stop-color="gold" />
+      <stop offset="50%"  stop-color="green" />
+      <stop offset="100%" stop-color="white" />
+    </radialGradient>
+
+    <radialGradient cy="100%" id="myGradient100">
+      <stop offset="0%"   stop-color="gold" />
+      <stop offset="50%"  stop-color="green" />
+      <stop offset="100%" stop-color="white" />
+    </radialGradient>
+  </defs>
+
+  <rect x="1"  y="1" width="8" height="8" fill="url(#myGradient000)" stroke="black" />
+  <rect x="13" y="1" width="8" height="8" fill="url(#myGradient050)" stroke="black" />
+  <rect x="25" y="1" width="8" height="8" fill="url(#myGradient100)" stroke="black" />
+</svg>
+```
+
+{{EmbedLiveSample('radialGradient', 150, '100%')}}
+
+## Spécifications
+
+| Spécification                                                                                            | Statut                   | Commentaire                                 |
+| -------------------------------------------------------------------------------------------------------- | ------------------------ | ------------------------------------------- |
+| {{SpecName("SVG2", "geometry.html#CY", "cy")}}                                             | {{Spec2("SVG2")}} | Définition comme propriété de géométrie     |
+| {{SpecName("SVG2", "pservers.html#RadialGradientElementCYAttribute", "cy")}}     | {{Spec2("SVG2")}} | Définition pour SVG2                        |
+| {{SpecName("SVG1.1", "pservers.html#RadialGradientElementCYAttribute", "cy")}} | {{Spec2("SVG1.1")}} | Définition initiale pour `<radialGradient>` |
+| {{SpecName("SVG1.1", "shapes.html#EllipseElementCYAttribute", "cy")}}             | {{Spec2("SVG1.1")}} | Définition initiale pour `<ellipse>`        |
+| {{SpecName("SVG1.1", "shapes.html#CircleElementCYAttribute", "cy")}}             | {{Spec2("SVG1.1")}} | Définition initiale pour `<circle>`         |
diff --git a/files/fr/web/svg/attribute/d/index.md b/files/fr/web/svg/attribute/d/index.md
index 8593128d7e..95bd172da6 100644
--- a/files/fr/web/svg/attribute/d/index.md
+++ b/files/fr/web/svg/attribute/d/index.md
@@ -6,194 +6,188 @@ tags:
   - SVG
 translation_of: Web/SVG/Attribute/d
 ---
-<div>{{SVGRef}}</div>
+{{SVGRef}}
 
-<p>L'attribut <strong><code>d</code></strong> définit un tracé à dessiner.</p>
+L'attribut **`d`** définit un tracé à dessiner.
 
-<p>La définition d'un tracé est une liste de commandes de tracé où chaque commande est composée d'une lettre pour la commande, et de nombres qui représentent les paramètres de la commande. Les commandes sont détaillées ci-dessous.</p>
+La définition d'un tracé est une liste de commandes de tracé où chaque commande est composée d'une lettre pour la commande, et de nombres qui représentent les paramètres de la commande. Les commandes sont détaillées ci-dessous.
 
-<p>Trois éléments ont cet attribut : {{SVGElement("path")}}, {{SVGElement("glyph")}}, and {{SVGElement("missing-glyph")}}</p>
+Trois éléments ont cet attribut : {{SVGElement("path")}}, {{SVGElement("glyph")}}, and {{SVGElement("missing-glyph")}}
 
-<h2>Exemple</h2>
+## Exemple
 
-<pre class="brush: css hidden">html,body,svg { height:100% }</pre>
+```css hidden
+html,body,svg { height:100% }
+```
 
-<pre class="brush: html">&lt;svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"&gt;
-  &lt;path fill="none" stroke="red"
+```html
+<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
+  <path fill="none" stroke="red"
     d="M 10,30
        A 20, 20 0, 0, 1 50, 30
        A 20, 20 0, 0, 1 90, 30
        Q 90, 60 50, 90
-       Q 10, 60 10, 30 z" /&gt;
-&lt;/svg&gt;</pre>
+       Q 10, 60 10, 30 z" />
+</svg>
+```
 
-<p>{{EmbedLiveSample('exemple', '100%', 200)}}</p>
+{{EmbedLiveSample('exemple', '100%', 200)}}
 
-<h2 id="Tracé">Tracé</h2>
+## Tracé
 
-<p>Pour un {{SVGElement('path')}}, <code>d</code> est une chaîne de caractère qui contient une série de commandes de tracé qui définissent le tracé à dessiner.</p>
+Pour un {{SVGElement('path')}}, `d` est une chaîne de caractère qui contient une série de commandes de tracé qui définissent le tracé à dessiner.
 
 <table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="row">Valeur</th>
-   <td><strong><a href="/docs/Web/SVG/Content_type#String">&lt;string&gt;</a></strong></td>
-  </tr>
-  <tr>
-   <th scope="row">Valeur par défaut</th>
-   <td><em>aucune</em></td>
-  </tr>
-  <tr>
-   <th scope="row">Animable</th>
-   <td>Oui</td>
-  </tr>
- </tbody>
+  <tbody>
+    <tr>
+      <th scope="row">Valeur</th>
+      <td>
+        <strong
+          ><a href="/docs/Web/SVG/Content_type#String">&#x3C;string></a></strong
+        >
+      </td>
+    </tr>
+    <tr>
+      <th scope="row">Valeur par défaut</th>
+      <td><em>aucune</em></td>
+    </tr>
+    <tr>
+      <th scope="row">Animable</th>
+      <td>Oui</td>
+    </tr>
+  </tbody>
 </table>
 
-<h2 id="glyph">glyph</h2>
+## glyph
 
-<div class="warning">
-  <p><strong>Attention :</strong> Depuis SVG2, {{SVGElement('glyph')}} est dépréciée et ne doit plus être utilisé.</p>
-</div>
+> **Attention :** Depuis SVG2, {{SVGElement('glyph')}} est dépréciée et ne doit plus être utilisé.
 
-<p>Pour un {{SVGElement('glyph')}}, <code>d</code> est une chaîne de caractères qui contient une série de commandes de tracé qui définissent la forme du contour de la glyphe.</p>
+Pour un {{SVGElement('glyph')}}, `d` est une chaîne de caractères qui contient une série de commandes de tracé qui définissent la forme du contour de la glyphe.
 
 <table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="row">Valeur</th>
-   <td><strong><a href="/docs/Web/SVG/Content_type#String">&lt;string&gt;</a></strong></td>
-  </tr>
-  <tr>
-   <th scope="row">Valeur par défaut</th>
-   <td><em>aucune</em></td>
-  </tr>
-  <tr>
-   <th scope="row">Animable</th>
-   <td>Oui</td>
-  </tr>
- </tbody>
+  <tbody>
+    <tr>
+      <th scope="row">Valeur</th>
+      <td>
+        <strong
+          ><a href="/docs/Web/SVG/Content_type#String">&#x3C;string></a></strong
+        >
+      </td>
+    </tr>
+    <tr>
+      <th scope="row">Valeur par défaut</th>
+      <td><em>aucune</em></td>
+    </tr>
+    <tr>
+      <th scope="row">Animable</th>
+      <td>Oui</td>
+    </tr>
+  </tbody>
 </table>
 
-<div class="note">
-  <p><strong>Note :</strong> Le point d'origine (coordonnée <code>0,0</code>) est généralement le point du <em>coin en haut à gauche</em> du context. Néanmoins, l'élément {{SVGElement("glyph")}} a son point d'origine dans le coin en bas à gauche de son enveloppe.</p>
-</div>
+> **Note :** Le point d'origine (coordonnée `0,0`) est généralement le point du _coin en haut à gauche_ du context. Néanmoins, l'élément {{SVGElement("glyph")}} a son point d'origine dans le coin en bas à gauche de son enveloppe.
 
-<h2 id="missing-glyph">missing-glyph</h2>
+## missing-glyph
 
-<div class="warning">
-  <p><strong>Attention :</strong> Depuis SVG2, {{SVGElement('missing-glyph')}} est dépréciée et ne doit plus être utilisé.</p>
-</div>
+> **Attention :** Depuis SVG2, {{SVGElement('missing-glyph')}} est dépréciée et ne doit plus être utilisé.
 
-<p>Pour un {{SVGElement('missing-glyph')}}, <code>d</code> est une chaîne de caractères qui contient une série de commandes de tracé qui définissent la forme du contour de la glyphe.</p>
+Pour un {{SVGElement('missing-glyph')}}, `d` est une chaîne de caractères qui contient une série de commandes de tracé qui définissent la forme du contour de la glyphe.
 
 <table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="row">Valeur</th>
-   <td><strong><a href="/docs/Web/SVG/Content_type#String">&lt;string&gt;</a></strong></td>
-  </tr>
-  <tr>
-   <th scope="row">Valeur par défaut</th>
-   <td><em>aucune</em></td>
-  </tr>
-  <tr>
-   <th scope="row">Animable</th>
-   <td>Oui</td>
-  </tr>
- </tbody>
+  <tbody>
+    <tr>
+      <th scope="row">Valeur</th>
+      <td>
+        <strong
+          ><a href="/docs/Web/SVG/Content_type#String">&#x3C;string></a></strong
+        >
+      </td>
+    </tr>
+    <tr>
+      <th scope="row">Valeur par défaut</th>
+      <td><em>aucune</em></td>
+    </tr>
+    <tr>
+      <th scope="row">Animable</th>
+      <td>Oui</td>
+    </tr>
+  </tbody>
 </table>
 
-<h2 id="Commandes_de_tracé">Commandes de tracé</h2>
+## Commandes de tracé
 
-<p>Les commandes de tracé sont des instructions qui définissent un tracé à dessiner. Chaque commande est composée d'une lettre de commande et de nombres qui représentent les paramètres de la commande.</p>
+Les commandes de tracé sont des instructions qui définissent un tracé à dessiner. Chaque commande est composée d'une lettre de commande et de nombres qui représentent les paramètres de la commande.
 
-<p>SVG définit 6 types de commandes, pour un total de 20 commandes :</p>
+SVG définit 6 types de commandes, pour un total de 20 commandes :
 
-<ul>
- <li>Aller à (Moveto)</li>
- <li>Tracer une ligne jusqu'à (Lineto)</li>
- <li>Tracer une courbe jusqu'à (Curveto)</li>
- <li>Tracer un arc de cercle jusqu'à (Arcto)</li>
- <li>Fermer le chemin (ClosePath)</li>
-</ul>
+- Aller à (Moveto)
+- Tracer une ligne jusqu'à (Lineto)
+- Tracer une courbe jusqu'à (Curveto)
+- Tracer un arc de cercle jusqu'à (Arcto)
+- Fermer le chemin (ClosePath)
 
-<div class="note">
-  <p><strong>Note:</strong> Les commandes sont sensibles à la casse; une commande en majuscule attend des positions absolues en arguments, alors qu'une commande en minuscule attend des points relatifs à la position actuelle du point.</p>
-</div>
+> **Note :** Les commandes sont sensibles à la casse; une commande en majuscule attend des positions absolues en arguments, alors qu'une commande en minuscule attend des points relatifs à la position actuelle du point.
 
-<p>Il est toujours possible de spécifier une valeur négative en argument d'une commande : des angles négatifs pointeront dans une direction vers le sens inverse des aiguilles d'une montre; des positions <code>x</code> et <code>y</code> seront interprétées commandes coordonnées négatives; des valeurs <code>x</code> négatives se déplaceront vers la gauche; et des valeurs <code>y</code> négatives se déplaceront vers le haut.</p>
+Il est toujours possible de spécifier une valeur négative en argument d'une commande : des angles négatifs pointeront dans une direction vers le sens inverse des aiguilles d'une montre; des positions `x` et `y` seront interprétées commandes coordonnées négatives; des valeurs `x` négatives se déplaceront vers la gauche; et des valeurs `y` négatives se déplaceront vers le haut.
 
-<h2 id="Moveto_(aller_à)">Moveto (aller à)</h2>
+## Moveto (aller à)
 
-<p>Cette instuction peut être vue comme un déplacement du pinceau à une position donnée sans rien tracer. Une bonne pratique consiste à commencer tous ses chemins par une instruction Moveto car, sans un positionnement initial, les instructions du chemin commencerons à un point quelconque ce qui peut donner des résultats non désirés.</p>
+Cette instuction peut être vue comme un déplacement du pinceau à une position donnée sans rien tracer. Une bonne pratique consiste à commencer tous ses chemins par une instruction Moveto car, sans un positionnement initial, les instructions du chemin commencerons à un point quelconque ce qui peut donner des résultats non désirés.
 
-<p>Syntaxe:</p>
+Syntaxe:
 
-<ul>
- <li><strong><code>M x, y</code></strong> où x et y sont des coordonnées absolues, respectivement horizontale et verticale.</li>
- <li><strong><code>m dx, dy</code></strong> où dx et dy sont des distances relatives à la position courante, respectivement vers la droite et vers le bas.</li>
-</ul>
+- **`M x, y`** où x et y sont des coordonnées absolues, respectivement horizontale et verticale.
+- **`m dx, dy`** où dx et dy sont des distances relatives à la position courante, respectivement vers la droite et vers le bas.
 
-<p>Exemples :</p>
+Exemples :
 
-<ul>
- <li>Positionnement absolu en x = 50, y = 100 : <code>&lt;path d="M 50, 100..." /&gt;</code></li>
- <li>Déplacement de 50 vers la droite et 100 vers le bas : <code>&lt;path d="m 50, 100..." /&gt;</code></li>
-</ul>
+- Positionnement absolu en x = 50, y = 100 : `<path d="M 50, 100..." />`
+- Déplacement de 50 vers la droite et 100 vers le bas : `<path d="m 50, 100..." />`
 
-<h2 id="Lineto_(tracer_une_ligne_jusqu'à)">Lineto (tracer une ligne jusqu'à)</h2>
+## Lineto (tracer une ligne jusqu'à)
 
-<p>À l'opposé de l'instruction Moveto, Lineto trace réellement une ligne de la position courante à la position définie. La syntaxe générique est <code>L x, y</code> ou <code>l dx, dy</code> avec <code>x, y</code> des coordonnées absolues et <code>dx, dy</code> des distances relatives au point courant, respectivement dans les sens de gauche à droite pour <code>dx</code> et de haut en bas pour <code>dy</code>.</p>
+À l'opposé de l'instruction Moveto, Lineto trace réellement une ligne de la position courante à la position définie. La syntaxe générique est `L x, y` ou `l dx, dy` avec `x, y` des coordonnées absolues et `dx, dy` des distances relatives au point courant, respectivement dans les sens de gauche à droite pour `dx` et de haut en bas pour `dy`.
 
-<p>Il existe aussi des raccourcis pour définir des lignes horizontales (H) ou verticales (V). Leur syntaxe est similaire à celle de L, mais il n'y a qu'une valeur à donner.</p>
+Il existe aussi des raccourcis pour définir des lignes horizontales (H) ou verticales (V). Leur syntaxe est similaire à celle de L, mais il n'y a qu'une valeur à donner.
 
-<p>Exemples :</p>
+Exemples :
 
-<ul>
- <li>Dessiner un carré (avec coordonnées relatives) : <code>&lt;path d="M -10, -10 h 50 v 50 h -50 v -50"/&gt;</code></li>
- <li>Dessiner un carré (avec coordonnées absolues) : <code>&lt;path d="M -10, -10 H 40 V 40 H -10 V -10"/&gt;</code></li>
-</ul>
+- Dessiner un carré (avec coordonnées relatives) : `<path d="M -10, -10 h 50 v 50 h -50 v -50"/>`
+- Dessiner un carré (avec coordonnées absolues) : `<path d="M -10, -10 H 40 V 40 H -10 V -10"/>`
 
-<h2 id="Curveto">Curveto</h2>
+## Curveto
 
-<p>L'instruction Curveto trace une courbe de Bézier. Il existe deux types de courbes de Bézier : cubique et quadratique. Les courbes cubiques sont un cas particulier des courbes quadratiques puisque le point de contrôle est commun au point de départ et au point d'arrivée. La syntaxe d'une courbe quadratique de Bézier est "Q cx,cy x,y" ou "q dcx,dcy dx,dy". cx et cy sont les coordonnées absolues du point de contrôle tandis que dcx et dcy sont les coordonnées du point de contrôle relatives au point courant. x et y sont les coordonnées absolues du point d'arrivée tandis que dx et dy sont les coordonnées relatives de ce point par rapport au point courant.</p>
+L'instruction Curveto trace une courbe de Bézier. Il existe deux types de courbes de Bézier : cubique et quadratique. Les courbes cubiques sont un cas particulier des courbes quadratiques puisque le point de contrôle est commun au point de départ et au point d'arrivée. La syntaxe d'une courbe quadratique de Bézier est "Q cx,cy x,y" ou "q dcx,dcy dx,dy". cx et cy sont les coordonnées absolues du point de contrôle tandis que dcx et dcy sont les coordonnées du point de contrôle relatives au point courant. x et y sont les coordonnées absolues du point d'arrivée tandis que dx et dy sont les coordonnées relatives de ce point par rapport au point courant.
 
-<p>Les courbes cubiques de Bézier suivent le même principe mais avec deux points de contrôle. La syntaxe de ces courbes est <code>C c1x, c1y c2x, c2y x, y</code> ou <code>c dc1x, dc1y dc2x, dc2y dx, dy</code>.</p>
+Les courbes cubiques de Bézier suivent le même principe mais avec deux points de contrôle. La syntaxe de ces courbes est `C c1x, c1y c2x, c2y x, y` ou `c dc1x, dc1y dc2x, dc2y dx, dy`.
 
+Pour réaliser des chaînes de courbes de Bézier "adoucies", il est possible d'utiliser les commandes T et S. Leur syntaxe est plus simple que les autres commandes Curveto car elles estiment que le premier point de contrôle est le symétrique du point de contrôle précédent par rapport au point terminal de la courbe précédente, ou que c'est le point précédent lui-même s'il n'y a pas eu de courbe tracée directement avant. La syntaxe de T est `T x, y` ou `t dx, dy` pour un point d'arrivée de position absolue ou relatives et sert à créer des courbes quadratiques de Bézier. S sert donc à faire des courbes cubiques de Bézier avec la syntaxe `S cx, cy x, y` ou `s dcx,dcy dx,dy`, où (d)cx indique le second point de contrôle.
 
+Finalement, toutes les commandes de courbes de Bézier peuvent servir de "polybézier" en spécifiant tous les paramètres successivement après la commande initiale. En conséquence, les deux commandes suivantes sont équivalentes en résultat :
 
+`<path d="c 50, 0 50, 100 100, 100 50, 0 50, -100 100, -100" /> <path d="c 50, 0 50, 100 100, 100 c 50, 0 50, -100 100, -100" />`
 
-<p>Pour réaliser des chaînes de courbes de Bézier "adoucies", il est possible d'utiliser les commandes T et S. Leur syntaxe est plus simple que les autres commandes Curveto car elles estiment que le premier point de contrôle est le symétrique du point de contrôle précédent par rapport au point terminal de la courbe précédente, ou que c'est le point précédent lui-même s'il n'y a pas eu de courbe tracée directement avant. La syntaxe de T est <code>T x, y</code> ou <code>t dx, dy</code> pour un point d'arrivée de position absolue ou relatives et sert à créer des courbes quadratiques de Bézier. S sert donc à faire des courbes cubiques de Bézier avec la syntaxe <code>S cx, cy x, y</code> ou <code>s dcx,dcy dx,dy</code>, où (d)cx indique le second point de contrôle.</p>
+## Arcto
 
-<p>Finalement, toutes les commandes de courbes de Bézier peuvent servir de "polybézier" en spécifiant tous les paramètres successivement après la commande initiale. En conséquence, les deux commandes suivantes sont équivalentes en résultat :</p>
+Parfois il est plus simple de définir un `path` comme une courbe elliptique plutôt que comme une courbe de Bézier. Dans cette optique, les commandes Arcto sont supportées par les balises `path`.
 
-<p><code>&lt;path d="c 50, 0 50, 100 100, 100 50, 0 50, -100 100, -100" /&gt;<br>
- &lt;path d="c 50, 0 50, 100 100, 100 c 50, 0 50, -100 100, -100" /&gt;</code></p>
+La définition d'un Arcto est relativement complexe : `A rx, ry xAxisRotate LargeArcFlag, SweepFlag x, y`, où `rx` et `ry` représentent les rayons sur les axes x et y, respectivement ; `LargeArcFlag` est une valeur à 0 ou 1, et permet de déterminer si le plus petit (0) ou le plus grand (1) arc possible doit être dessiné ; `SweepFlag` est une valeur à 0 ou 1 et définit le sens de balayage de la courbe : horaire (1) ou anti-horaire (0) ; et enfin `x` et `y` sont les coordonnées de destination.
 
-<h2 id="Arcto">Arcto</h2>
+La propriété `xAxisRotate` est censée changer l'axe des x relativement au viewport de référence. Cependant, il semble que cette propriété n'ait aucun effet avec le moteur de rendu Gecko 7.
 
-<p>Parfois il est plus simple de définir un <code>path</code> comme une courbe elliptique plutôt que comme une courbe de Bézier. Dans cette optique, les commandes Arcto sont supportées par les balises <code>path</code>.</p>
+## ClosePath (fermer un chemin)
 
-<p>La définition d'un Arcto est relativement complexe : <code>A rx, ry xAxisRotate LargeArcFlag, SweepFlag x, y</code>, où <code>rx</code> et <code>ry</code> représentent les rayons sur les axes x et y, respectivement ; <code>LargeArcFlag</code> est une valeur à 0 ou 1, et permet de déterminer si le plus petit (0) ou le plus grand (1) arc possible doit être dessiné ; <code>SweepFlag</code> est une valeur à 0 ou 1 et définit le sens de balayage de la courbe : horaire (1) ou anti-horaire (0) ; et enfin <code>x</code> et <code>y</code> sont les coordonnées de destination.</p>
+L'instruction ClosePath trace simplement une ligne droite de la position actuelle jusqu'au point initial de la courbe. C'est l'instruction la plus simple puisqu'elle n'attend aucun argument. Il n'y a pas de différence entre la version majuscule ("Z") et la version minuscule ("z").
 
-<p>La propriété <code>xAxisRotate</code> est censée changer l'axe des x relativement au viewport de référence. Cependant, il semble que cette propriété n'ait aucun effet avec le moteur de rendu Gecko 7.</p>
+## Éléments
 
-<h2 id="ClosePath_(fermer_un_chemin)">ClosePath (fermer un chemin)</h2>
+Les éléments suivants peuvent utiliser l'attribut **d** :
 
-<p>L'instruction ClosePath trace simplement une ligne droite de la position actuelle jusqu'au point initial de la courbe. C'est l'instruction la plus simple puisqu'elle n'attend aucun argument. Il n'y a pas de différence entre la version majuscule ("Z") et la version minuscule ("z").</p>
+- {{SVGElement("path")}}
+- {{SVGElement("glyph")}}
 
-<h2 id="Éléments">Éléments</h2>
+De plus, les mêmes règles s'appliquent aux animations de chemin {{SVGElement("animate")}}.
 
-<p>Les éléments suivants peuvent utiliser l'attribut <strong>d</strong> :</p>
+## Notes
 
-<ul>
- <li>{{SVGElement("path")}}</li>
- <li>{{SVGElement("glyph")}}</li>
-</ul>
-
-<p>De plus, les mêmes règles s'appliquent aux animations de chemin {{SVGElement("animate")}}.</p>
-
-<h2 id="Notes">Notes</h2>
-
-<p>Le point d'origine (de coordonnées 0,0) est habituellement le <strong>coin supérieur gauche</strong> du contexte. Cependant, l'élément {{SVGElement("glyph")}} a son origine dans le <strong>coin inférieur gauche</strong> de la boîte contenant son caractère.</p>
+Le point d'origine (de coordonnées 0,0) est habituellement le **coin supérieur gauche** du contexte. Cependant, l'élément {{SVGElement("glyph")}} a son origine dans le **coin inférieur gauche** de la boîte contenant son caractère.
diff --git a/files/fr/web/svg/attribute/dx/index.md b/files/fr/web/svg/attribute/dx/index.md
index a77d19da24..9f2ae06637 100644
--- a/files/fr/web/svg/attribute/dx/index.md
+++ b/files/fr/web/svg/attribute/dx/index.md
@@ -6,289 +6,286 @@ tags:
   - SVG Attribute
 translation_of: Web/SVG/Attribute/dx
 ---
-<div>{{SVGRef}}</div>
+{{SVGRef}}
 
-<p>L'attribut <strong><code>dx</code></strong> indique un décalage sur l'axe x de la position d'un élément ou de son contenu.</p>
+L'attribut **`dx`** indique un décalage sur l'axe x de la position d'un élément ou de son contenu.
 
-<p>Sept éléments utilisent cet attribut: {{SVGElement('altGlyph')}}, {{SVGElement('feDropShadow')}}, {{SVGElement('feOffset')}}, {{SVGElement('glyphRef')}}, {{SVGElement('text')}}, {{SVGElement('tref')}}, et {{SVGElement('tspan')}}</p>
+Sept éléments utilisent cet attribut: {{SVGElement('altGlyph')}}, {{SVGElement('feDropShadow')}}, {{SVGElement('feOffset')}}, {{SVGElement('glyphRef')}}, {{SVGElement('text')}}, {{SVGElement('tref')}}, et {{SVGElement('tspan')}}
 
-<h2>Exemple</h2>
+## Exemple
 
-<pre class="brush: css hidden">html,body,svg { height:100% }</pre>
+```css hidden
+html,body,svg { height:100% }
+```
 
-<pre class="brush: html">&lt;svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"&gt;
-  &lt;!-- Lignes indiquant la position des glyphes --&gt;
-  &lt;line x1="0"  x2="100%" y1="50%" y2="50%" /&gt;
-  &lt;line x1="10%" x2="10%" y1="0"   y2="100%" /&gt;
-  &lt;line x1="60%" x2="60%" y1="0"   y2="100%" /&gt;
+```html
+<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
+  <!-- Lignes indiquant la position des glyphes -->
+  <line x1="0"  x2="100%" y1="50%" y2="50%" />
+  <line x1="10%" x2="10%" y1="0"   y2="100%" />
+  <line x1="60%" x2="60%" y1="0"   y2="100%" />
 
-  &lt;!-- Un texte de référence --&gt;
-  &lt;text x="10%" y="50%" fill="grey"&gt;SVG&lt;/text&gt;
+  <!-- Un texte de référence -->
+  <text x="10%" y="50%" fill="grey">SVG</text>
 
-  &lt;!-- Le même texte avec un décalage sur l'axe x --&gt;
-  &lt;text dx="50%" x="10%" y="50%"&gt;SVG&lt;/text&gt;
-&lt;/svg&gt;</pre>
+  <!-- Le même texte avec un décalage sur l'axe x -->
+  <text dx="50%" x="10%" y="50%">SVG</text>
+</svg>
+```
 
-<pre class="brush: css">line {
+```css
+line {
   stroke: red;
   stroke-width: .5px;
   stroke-dasharray: 3px;
-}</pre>
+}
+```
 
-<p>{{EmbedLiveSample('exemple', '100%', 200)}}</p>
+{{EmbedLiveSample('exemple', '100%', 200)}}
 
-<h2 id="altGlyph">altGlyph</h2>
+## altGlyph
 
-<div class="warning">
-  <p><strong>Attention :</strong> Depuis SVG2 {{SVGElement('altGlyph')}} est déprécié et ne devrait pas être utilisé.</p>
-</div>
+> **Attention :** Depuis SVG2 {{SVGElement('altGlyph')}} est déprécié et ne devrait pas être utilisé.
 
-<p>Pour {{SVGElement('altGlyph')}}, s'il ne contient qu'une seule valeur, <code>dx</code> définit un décalage sur l'axe x pour l'ensemble des glyphes.</p>
+Pour {{SVGElement('altGlyph')}}, s'il ne contient qu'une seule valeur, `dx` définit un décalage sur l'axe x pour l'ensemble des glyphes.
 
-<p>S'il a plusieurs valeurs, <code>dx</code> définit un décalage sur l'axe x individuellement pour chaque glyphe, relativement au glyphe précédent. S'il y a moins de valeurs qu'il n'y a de glyphes, les glyphes restants utilisent une valeur de <code>0</code>. S'il y a plus de valeurs qu'il n'y a de glyphes, les valeurs supplémentaires sont ignorées.</p>
+S'il a plusieurs valeurs, `dx` définit un décalage sur l'axe x individuellement pour chaque glyphe, relativement au glyphe précédent. S'il y a moins de valeurs qu'il n'y a de glyphes, les glyphes restants utilisent une valeur de `0`. S'il y a plus de valeurs qu'il n'y a de glyphes, les valeurs supplémentaires sont ignorées.
 
 <table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="row">Valeur</th>
-   <td>Liste de <strong><a href="/docs/Web/SVG/Content_type#Length">&lt;length&gt;</a></strong></td>
-  </tr>
-  <tr>
-   <th scope="row">Valeur par défaut</th>
-   <td><em>aucune</em></td>
-  </tr>
-  <tr>
-   <th scope="row">Animation</th>
-   <td>Oui</td>
-  </tr>
- </tbody>
+  <tbody>
+    <tr>
+      <th scope="row">Valeur</th>
+      <td>
+        Liste de
+        <strong
+          ><a href="/docs/Web/SVG/Content_type#Length">&#x3C;length></a></strong
+        >
+      </td>
+    </tr>
+    <tr>
+      <th scope="row">Valeur par défaut</th>
+      <td><em>aucune</em></td>
+    </tr>
+    <tr>
+      <th scope="row">Animation</th>
+      <td>Oui</td>
+    </tr>
+  </tbody>
 </table>
 
-<h2 id="feDropShadow">feDropShadow</h2>
+## feDropShadow
 
-<p>Pour {{SVGElement('feDropShadow')}}, <code>dx</code> définit le décalage x de l'ombre portée. L'unité utilisée pour résoudre la valeur de l'attribut est définie par l'attribut {{SVGAttr('primitiveUnits')}} de l'élément {{SVGElement('filter')}}.</p>
+Pour {{SVGElement('feDropShadow')}}, `dx` définit le décalage x de l'ombre portée. L'unité utilisée pour résoudre la valeur de l'attribut est définie par l'attribut {{SVGAttr('primitiveUnits')}} de l'élément {{SVGElement('filter')}}.
 
 <table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="row">Valeur</th>
-   <td><strong><a href="/docs/Web/SVG/Content_type#Number">&lt;number&gt;</a></strong></td>
-  </tr>
-  <tr>
-   <th scope="row">Valeur par défaut</th>
-   <td><code>2</code></td>
-  </tr>
-  <tr>
-   <th scope="row">Animation</th>
-   <td>Oui</td>
-  </tr>
- </tbody>
+  <tbody>
+    <tr>
+      <th scope="row">Valeur</th>
+      <td>
+        <strong
+          ><a href="/docs/Web/SVG/Content_type#Number">&#x3C;number></a></strong
+        >
+      </td>
+    </tr>
+    <tr>
+      <th scope="row">Valeur par défaut</th>
+      <td><code>2</code></td>
+    </tr>
+    <tr>
+      <th scope="row">Animation</th>
+      <td>Oui</td>
+    </tr>
+  </tbody>
 </table>
 
-<h2 id="feOffset">feOffset</h2>
+## feOffset
 
-<p>Pour {{SVGElement('feOffset')}}, <code>dx</code> définit le décalage x de l'élément source du filtre. L'unité utilisée pour résoudre la valeur de l'attribut est définie par l'attribut {{SVGAttr('primitiveUnits')}} de l'élément {{SVGElement('filter')}}.</p>
+Pour {{SVGElement('feOffset')}}, `dx` définit le décalage x de l'élément source du filtre. L'unité utilisée pour résoudre la valeur de l'attribut est définie par l'attribut {{SVGAttr('primitiveUnits')}} de l'élément {{SVGElement('filter')}}.
 
 <table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="row">Valeur</th>
-   <td><strong><a href="/docs/Web/SVG/Content_type#Number">&lt;number&gt;</a></strong></td>
-  </tr>
-  <tr>
-   <th scope="row">Valeur par défaut</th>
-   <td><code>0</code></td>
-  </tr>
-  <tr>
-   <th scope="row">Animation</th>
-   <td>Oui</td>
-  </tr>
- </tbody>
+  <tbody>
+    <tr>
+      <th scope="row">Valeur</th>
+      <td>
+        <strong
+          ><a href="/docs/Web/SVG/Content_type#Number">&#x3C;number></a></strong
+        >
+      </td>
+    </tr>
+    <tr>
+      <th scope="row">Valeur par défaut</th>
+      <td><code>0</code></td>
+    </tr>
+    <tr>
+      <th scope="row">Animation</th>
+      <td>Oui</td>
+    </tr>
+  </tbody>
 </table>
 
-<h2 id="glyphRef">glyphRef</h2>
+## glyphRef
 
-<div class="warning">
-  <p><strong>Attention :</strong> Depuis SVG2 {{SVGElement('glyphRef')}} est déprécié et ne devrait pas être utilisé.</p>
-</div>
+> **Attention :** Depuis SVG2 {{SVGElement('glyphRef')}} est déprécié et ne devrait pas être utilisé.
 
-<p>Pour {{SVGElement('glyphRef')}}, <code>dx</code> définit le décalage x du glyphe, dans le système métrique de la police.</p>
+Pour {{SVGElement('glyphRef')}}, `dx` définit le décalage x du glyphe, dans le système métrique de la police.
 
 <table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="row">Valeur</th>
-   <td><strong><a href="/docs/Web/SVG/Content_type#Number">&lt;number&gt;</a></strong></td>
-  </tr>
-  <tr>
-   <th scope="row">Valeur par défaut</th>
-   <td><code>0</code></td>
-  </tr>
-  <tr>
-   <th scope="row">Animation</th>
-   <td>Oui</td>
-  </tr>
- </tbody>
+  <tbody>
+    <tr>
+      <th scope="row">Valeur</th>
+      <td>
+        <strong
+          ><a href="/docs/Web/SVG/Content_type#Number">&#x3C;number></a></strong
+        >
+      </td>
+    </tr>
+    <tr>
+      <th scope="row">Valeur par défaut</th>
+      <td><code>0</code></td>
+    </tr>
+    <tr>
+      <th scope="row">Animation</th>
+      <td>Oui</td>
+    </tr>
+  </tbody>
 </table>
 
-<h2 id="text">text</h2>
+## text
 
-<p>Pour {{SVGElement('text')}}, s'il ne contient qu'une seule valeur, <code>dx</code> définit un décalage sur l'axe x pour tous les glyphes.</p>
+Pour {{SVGElement('text')}}, s'il ne contient qu'une seule valeur, `dx` définit un décalage sur l'axe x pour tous les glyphes.
 
-<p>S'il a plusieurs valeurs, <code>dx</code> définit un décalage sur l'axe x individuellement pour chaque glyphe, relativement au glyphe précédent. S'il y a moins de valeurs qu'il n'y a de glyphes, les glyphes restants utilisent une valeur de <code>0</code>. S'il y a plus de valeurs qu'il n'y a de glyphes, les valeurs supplémentaires sont ignorées.</p>
+S'il a plusieurs valeurs, `dx` définit un décalage sur l'axe x individuellement pour chaque glyphe, relativement au glyphe précédent. S'il y a moins de valeurs qu'il n'y a de glyphes, les glyphes restants utilisent une valeur de `0`. S'il y a plus de valeurs qu'il n'y a de glyphes, les valeurs supplémentaires sont ignorées.
 
 <table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="row">Valeur</th>
-   <td>Liste de <strong><a href="/docs/Web/SVG/Content_type#Length">&lt;length&gt;</a></strong></td>
-  </tr>
-  <tr>
-   <th scope="row">Valeur par défaut</th>
-   <td><em>aucune</em></td>
-  </tr>
-  <tr>
-   <th scope="row">Animation</th>
-   <td>Oui</td>
-  </tr>
- </tbody>
+  <tbody>
+    <tr>
+      <th scope="row">Valeur</th>
+      <td>
+        Liste de
+        <strong
+          ><a href="/docs/Web/SVG/Content_type#Length">&#x3C;length></a></strong
+        >
+      </td>
+    </tr>
+    <tr>
+      <th scope="row">Valeur par défaut</th>
+      <td><em>aucune</em></td>
+    </tr>
+    <tr>
+      <th scope="row">Animation</th>
+      <td>Oui</td>
+    </tr>
+  </tbody>
 </table>
 
-<h3 id="Exemple">Exemple</h3>
-
-<pre class="brush: css hidden">html,body,svg { height:100% }</pre>
-
-<pre class="brush: html">&lt;svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"&gt;
-  &lt;!-- Linges indiquant la position des glyphes --&gt;
-  &lt;line x1="0"  x2="100%" y1="25%" y2="25%" /&gt;
-  &lt;line x1="0"  x2="100%" y1="50%" y2="50%" /&gt;
-  &lt;line x1="0"  x2="100%" y1="75%" y2="75%" /&gt;
-
-  &lt;line x1="10%" x2="10%" y1="0"   y2="100%" /&gt;
-  &lt;line x1="30%" x2="30%" y1="0"   y2="100%" /&gt;
-  &lt;line x1="60%" x2="60%" y1="0"   y2="100%" /&gt;
-
-  &lt;!-- Le comportement change en fonction du nombre
-       de valeurs de l'attribut --&gt;
-  &lt;text dx="20%"       x="10%" y="25%"&gt;SVG&lt;/text&gt;
-  &lt;text dx="0 10%"     x="10%" y="50%"&gt;SVG&lt;/text&gt;
-  &lt;text dx="0 10% 20%" x="10%" y="75%"&gt;SVG&lt;/text&gt;
-&lt;/svg&gt;</pre>
-
-<pre class="brush: css">line {
+### Exemple
+
+```css hidden
+html,body,svg { height:100% }
+```
+
+```html
+<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
+  <!-- Linges indiquant la position des glyphes -->
+  <line x1="0"  x2="100%" y1="25%" y2="25%" />
+  <line x1="0"  x2="100%" y1="50%" y2="50%" />
+  <line x1="0"  x2="100%" y1="75%" y2="75%" />
+
+  <line x1="10%" x2="10%" y1="0"   y2="100%" />
+  <line x1="30%" x2="30%" y1="0"   y2="100%" />
+  <line x1="60%" x2="60%" y1="0"   y2="100%" />
+
+  <!-- Le comportement change en fonction du nombre
+       de valeurs de l'attribut -->
+  <text dx="20%"       x="10%" y="25%">SVG</text>
+  <text dx="0 10%"     x="10%" y="50%">SVG</text>
+  <text dx="0 10% 20%" x="10%" y="75%">SVG</text>
+</svg>
+```
+
+```css
+line {
   stroke: red;
   stroke-width: .5px;
   stroke-dasharray: 3px;
-}</pre>
+}
+```
 
-<p>{{EmbedLiveSample('text', '100%', 100)}}</p>
+{{EmbedLiveSample('text', '100%', 100)}}
 
-<h2 id="tref">tref</h2>
+## tref
 
-<div class="warning">
-  <p><strong>Attention :</strong> Depuis SVG2 {{SVGElement('tref')}} est déprécié et ne devrait pas être utilisé.</p>
-</div>
+> **Attention :** Depuis SVG2 {{SVGElement('tref')}} est déprécié et ne devrait pas être utilisé.
 
-<p>Pour {{SVGElement('tref')}}, s'il ne contient qu'une seule valeur, <code>dx</code> définit un décalage sur l'axe x pour tous les glyphes.</p>
+Pour {{SVGElement('tref')}}, s'il ne contient qu'une seule valeur, `dx` définit un décalage sur l'axe x pour tous les glyphes.
+
+S'il a plusieurs valeurs, `dx` définit un décalage sur l'axe x individuellement pour chaque glyphe, relativement au glyphe précédent. S'il y a moins de valeurs qu'il n'y a de glyphes, les glyphes restants utilisent une valeur de `0`. S'il y a plus de valeurs qu'il n'y a de glyphes, les valeurs supplémentaires sont ignorées.
 
-<p>S'il a plusieurs valeurs, <code>dx</code> définit un décalage sur l'axe x individuellement pour chaque glyphe, relativement au glyphe précédent. S'il y a moins de valeurs qu'il n'y a de glyphes, les glyphes restants utilisent une valeur de <code>0</code>. S'il y a plus de valeurs qu'il n'y a de glyphes, les valeurs supplémentaires sont ignorées.</p>
 
-<p> </p>
 
 <table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="row">Valeur</th>
-   <td>Liste de <strong><a href="/docs/Web/SVG/Content_type#Length">&lt;length&gt;</a></strong></td>
-  </tr>
-  <tr>
-   <th scope="row">Valeur par défaut</th>
-   <td><em>aucune</em></td>
-  </tr>
-  <tr>
-   <th scope="row">Animation</th>
-   <td>Oui</td>
-  </tr>
- </tbody>
+  <tbody>
+    <tr>
+      <th scope="row">Valeur</th>
+      <td>
+        Liste de
+        <strong
+          ><a href="/docs/Web/SVG/Content_type#Length">&#x3C;length></a></strong
+        >
+      </td>
+    </tr>
+    <tr>
+      <th scope="row">Valeur par défaut</th>
+      <td><em>aucune</em></td>
+    </tr>
+    <tr>
+      <th scope="row">Animation</th>
+      <td>Oui</td>
+    </tr>
+  </tbody>
 </table>
 
-<h2 id="tspan">tspan</h2>
+## tspan
 
-<p> </p>
 
-<p>Pour {{SVGElement('tspan')}}, s'il ne contient qu'une seule valeur, <code>dx</code> définit un décalage sur l'axe x pour tous les glyphes.</p>
 
-<p>S'il a plusieurs valeurs, <code>dx</code> définit un décalage sur l'axe x individuellement pour chaque glyphe, relativement au glyphe précédent. S'il y a moins de valeurs qu'il n'y a de glyphes, les glyphes restants utilisent une valeur de <code>0</code>. S'il y a plus de valeurs qu'il n'y a de glyphes, les valeurs supplémentaires sont ignorées.</p>
+Pour {{SVGElement('tspan')}}, s'il ne contient qu'une seule valeur, `dx` définit un décalage sur l'axe x pour tous les glyphes.
 
-<p> </p>
+S'il a plusieurs valeurs, `dx` définit un décalage sur l'axe x individuellement pour chaque glyphe, relativement au glyphe précédent. S'il y a moins de valeurs qu'il n'y a de glyphes, les glyphes restants utilisent une valeur de `0`. S'il y a plus de valeurs qu'il n'y a de glyphes, les valeurs supplémentaires sont ignorées.
 
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="row">Valeur</th>
-   <td>Liste de <strong><a href="/docs/Web/SVG/Content_type#Length">&lt;length&gt;</a></strong></td>
-  </tr>
-  <tr>
-   <th scope="row">Valeur par défaut</th>
-   <td><em>aucune</em></td>
-  </tr>
-  <tr>
-   <th scope="row">Animation</th>
-   <td>Oui</td>
-  </tr>
- </tbody>
-</table>
 
-<h2 id="Spécifications">Spécifications</h2>
 
 <table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">Statut</th>
-   <th scope="col">Commentaire</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{ SpecName('Filters 1.0', '#element-attrdef-fedropshadow-dx', 'dx') }}</td>
-   <td>{{Spec2('Filters 1.0')}}</td>
-   <td>Définition initiale pour <code>&lt;feDropShadow&gt;</code></td>
-  </tr>
-  <tr>
-   <td>{{ SpecName('Filters 1.0', '#element-attrdef-feoffset-dx', 'dx') }}</td>
-   <td>{{Spec2('Filters 1.0')}}</td>
-   <td>Définition pour <code>&lt;feOffset&gt;</code></td>
-  </tr>
-  <tr>
-   <td>{{SpecName("SVG2", "text.html#TextElementDXAttribute", "dx")}}</td>
-   <td>{{Spec2("SVG2")}}</td>
-   <td>Définition pour <code>&lt;text&gt;</code> et <code>&lt;tspan&gt;</code></td>
-  </tr>
-  <tr>
-   <td>{{SpecName("SVG1.1", "filters.html#feOffsetDxAttribute", "dx")}}</td>
-   <td>{{Spec2("SVG1.1")}}</td>
-   <td>Définition initiale pour <code>&lt;feOffset&gt;</code></td>
-  </tr>
-  <tr>
-   <td>{{SpecName("SVG1.1", "text.html#AltGlyphElementDXAttribute", "dx")}}</td>
-   <td>{{Spec2("SVG1.1")}}</td>
-   <td>Définition initiale pour <code>&lt;altGlyph&gt;</code></td>
-  </tr>
-  <tr>
-   <td>{{SpecName("SVG1.1", "text.html#GlyphRefElementDXAttribute", "dx")}}</td>
-   <td>{{Spec2("SVG1.1")}}</td>
-   <td>Définition initiale pour <code>&lt;glyphRef&gt;</code></td>
-  </tr>
-  <tr>
-   <td>{{SpecName("SVG1.1", "text.html#TextElementDXAttribute", "dx")}}</td>
-   <td>{{Spec2("SVG1.1")}}</td>
-   <td>Définition initiale pour <code>&lt;text&gt;</code></td>
-  </tr>
-  <tr>
-   <td>{{SpecName("SVG1.1", "text.html#TSpanElementDXAttribute", "dx")}}</td>
-   <td>{{Spec2("SVG1.1")}}</td>
-   <td>Définition initiale pour <code>&lt;tref&gt;</code> et <code>&lt;tspan&gt;</code></td>
-  </tr>
- </tbody>
+  <tbody>
+    <tr>
+      <th scope="row">Valeur</th>
+      <td>
+        Liste de
+        <strong
+          ><a href="/docs/Web/SVG/Content_type#Length">&#x3C;length></a></strong
+        >
+      </td>
+    </tr>
+    <tr>
+      <th scope="row">Valeur par défaut</th>
+      <td><em>aucune</em></td>
+    </tr>
+    <tr>
+      <th scope="row">Animation</th>
+      <td>Oui</td>
+    </tr>
+  </tbody>
 </table>
+
+## Spécifications
+
+| Spécification                                                                                    | Statut                           | Commentaire                                    |
+| ------------------------------------------------------------------------------------------------ | -------------------------------- | ---------------------------------------------- |
+| {{ SpecName('Filters 1.0', '#element-attrdef-fedropshadow-dx', 'dx') }} | {{Spec2('Filters 1.0')}} | Définition initiale pour `<feDropShadow>`      |
+| {{ SpecName('Filters 1.0', '#element-attrdef-feoffset-dx', 'dx') }}         | {{Spec2('Filters 1.0')}} | Définition pour `<feOffset>`                   |
+| {{SpecName("SVG2", "text.html#TextElementDXAttribute", "dx")}}             | {{Spec2("SVG2")}}         | Définition pour `<text>` et `<tspan>`          |
+| {{SpecName("SVG1.1", "filters.html#feOffsetDxAttribute", "dx")}}             | {{Spec2("SVG1.1")}}         | Définition initiale pour `<feOffset>`          |
+| {{SpecName("SVG1.1", "text.html#AltGlyphElementDXAttribute", "dx")}}     | {{Spec2("SVG1.1")}}         | Définition initiale pour `<altGlyph>`          |
+| {{SpecName("SVG1.1", "text.html#GlyphRefElementDXAttribute", "dx")}}     | {{Spec2("SVG1.1")}}         | Définition initiale pour `<glyphRef>`          |
+| {{SpecName("SVG1.1", "text.html#TextElementDXAttribute", "dx")}}             | {{Spec2("SVG1.1")}}         | Définition initiale pour `<text>`              |
+| {{SpecName("SVG1.1", "text.html#TSpanElementDXAttribute", "dx")}}         | {{Spec2("SVG1.1")}}         | Définition initiale pour `<tref>` et `<tspan>` |
diff --git a/files/fr/web/svg/attribute/dy/index.md b/files/fr/web/svg/attribute/dy/index.md
index 08d75f48a1..45b758a28c 100644
--- a/files/fr/web/svg/attribute/dy/index.md
+++ b/files/fr/web/svg/attribute/dy/index.md
@@ -6,284 +6,281 @@ tags:
   - SVG Attribute
 translation_of: Web/SVG/Attribute/dy
 ---
-<div>{{SVGRef}}</div>
+{{SVGRef}}
 
-<p>L'attribut <strong><code>dy</code></strong> indique un décalage sur l'axe y de la position d'un élément ou de son contenu.</p>
+L'attribut **`dy`** indique un décalage sur l'axe y de la position d'un élément ou de son contenu.
 
-<p>Sept éléments utilisent cet attribut: {{SVGElement('altGlyph')}}, {{SVGElement('feDropShadow')}}, {{SVGElement('feOffset')}}, {{SVGElement('glyphRef')}}, {{SVGElement('text')}}, {{SVGElement('tref')}}, et {{SVGElement('tspan')}}</p>
+Sept éléments utilisent cet attribut: {{SVGElement('altGlyph')}}, {{SVGElement('feDropShadow')}}, {{SVGElement('feOffset')}}, {{SVGElement('glyphRef')}}, {{SVGElement('text')}}, {{SVGElement('tref')}}, et {{SVGElement('tspan')}}
 
-<h2>Exemple</h2>
+## Exemple
 
-<pre class="brush: css hidden">html,body,svg { height:100% }</pre>
+```css hidden
+html,body,svg { height:100% }
+```
 
-<pre class="brush: html">&lt;svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"&gt;
-  &lt;!-- Lignes indiquant la position des glyphes --&gt;
-  &lt;line x1="10%" x2="10%"  y1="0"   y2="100%" /&gt;
-  &lt;line x1="0"   x2="100%" y1="30%" y2="30%"  /&gt;
-  &lt;line x1="0"   x2="100%" y1="80%" y2="80%"  /&gt;
+```html
+<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
+  <!-- Lignes indiquant la position des glyphes -->
+  <line x1="10%" x2="10%"  y1="0"   y2="100%" />
+  <line x1="0"   x2="100%" y1="30%" y2="30%"  />
+  <line x1="0"   x2="100%" y1="80%" y2="80%"  />
 
-  &lt;!-- Un texte de référence --&gt;
-  &lt;text x="10%" y="30%" fill="grey"&gt;SVG&lt;/text&gt;
+  <!-- Un texte de référence -->
+  <text x="10%" y="30%" fill="grey">SVG</text>
 
-  &lt;!-- Le même texte avec un décalage sur l'axe y --&gt;
-  &lt;text dy="50%" x="10%" y="30%"&gt;SVG&lt;/text&gt;
-&lt;/svg&gt;</pre>
+  <!-- Le même texte avec un décalage sur l'axe y -->
+  <text dy="50%" x="10%" y="30%">SVG</text>
+</svg>
+```
 
-<pre class="brush: css">line {
+```css
+line {
   stroke: red;
   stroke-width: .5px;
   stroke-dasharray: 3px;
-}</pre>
+}
+```
 
-<p>{{EmbedLiveSample('exemple', '100%', 200)}}</p>
+{{EmbedLiveSample('exemple', '100%', 200)}}
 
-<h2 id="altGlyph">altGlyph</h2>
+## altGlyph
 
-<div class="warning">
-  <p><strong>Attention :</strong> Depuis {{SVGElement('altGlyph')}} est déprécié et ne devrait pas être utilisé.</p>
-</div>
+> **Attention :** Depuis {{SVGElement('altGlyph')}} est déprécié et ne devrait pas être utilisé.
 
-<p>Pour {{SVGElement('altGlyph')}}, s'il ne contient qu'une seule valeur, <code>dy</code> définit un décalge sur l'axe y pour tous les glyphes.</p>
+Pour {{SVGElement('altGlyph')}}, s'il ne contient qu'une seule valeur, `dy` définit un décalge sur l'axe y pour tous les glyphes.
 
-<p>S'il a plusieurs valeurs, <code>dy</code> définit un décalage sur l'axe y individuellement pour chaque glyphe, relativement au glyphe précédent. S'il y a moins de valeurs qu'il n'y a de glyphes, les glyphes restants utilisent la valeur <code>0</code>. S'il y a plus de valeurs qu'il n'y a de glyphes, les valeurs restantes sont ignorées.</p>
+S'il a plusieurs valeurs, `dy` définit un décalage sur l'axe y individuellement pour chaque glyphe, relativement au glyphe précédent. S'il y a moins de valeurs qu'il n'y a de glyphes, les glyphes restants utilisent la valeur `0`. S'il y a plus de valeurs qu'il n'y a de glyphes, les valeurs restantes sont ignorées.
 
 <table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="row">Valeur</th>
-   <td>Liste de <strong><a href="/docs/Web/SVG/Content_type#Length">&lt;length&gt;</a></strong></td>
-  </tr>
-  <tr>
-   <th scope="row">Valeur par défaut</th>
-   <td><em>aucune</em></td>
-  </tr>
-  <tr>
-   <th scope="row">Animation</th>
-   <td>Oui</td>
-  </tr>
- </tbody>
+  <tbody>
+    <tr>
+      <th scope="row">Valeur</th>
+      <td>
+        Liste de
+        <strong
+          ><a href="/docs/Web/SVG/Content_type#Length">&#x3C;length></a></strong
+        >
+      </td>
+    </tr>
+    <tr>
+      <th scope="row">Valeur par défaut</th>
+      <td><em>aucune</em></td>
+    </tr>
+    <tr>
+      <th scope="row">Animation</th>
+      <td>Oui</td>
+    </tr>
+  </tbody>
 </table>
 
-<h2 id="feDropShadow">feDropShadow</h2>
+## feDropShadow
 
-<p>Pour {{SVGElement('feDropShadow')}}, <code>dy</code> définit le décalage x de l'ombre portée. L'unité utilisée pour résoudre la valeur est définie par l'attribut {{SVGAttr('primitiveUnits')}} de l'élément {{SVGElement('filter')}}.</p>
+Pour {{SVGElement('feDropShadow')}}, `dy` définit le décalage x de l'ombre portée. L'unité utilisée pour résoudre la valeur est définie par l'attribut {{SVGAttr('primitiveUnits')}} de l'élément {{SVGElement('filter')}}.
 
 <table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="row">Valeur</th>
-   <td><strong><a href="/docs/Web/SVG/Content_type#Number">&lt;number&gt;</a></strong></td>
-  </tr>
-  <tr>
-   <th scope="row">Valeur par défaut</th>
-   <td><code>2</code></td>
-  </tr>
-  <tr>
-   <th scope="row">Animation</th>
-   <td>Oui</td>
-  </tr>
- </tbody>
+  <tbody>
+    <tr>
+      <th scope="row">Valeur</th>
+      <td>
+        <strong
+          ><a href="/docs/Web/SVG/Content_type#Number">&#x3C;number></a></strong
+        >
+      </td>
+    </tr>
+    <tr>
+      <th scope="row">Valeur par défaut</th>
+      <td><code>2</code></td>
+    </tr>
+    <tr>
+      <th scope="row">Animation</th>
+      <td>Oui</td>
+    </tr>
+  </tbody>
 </table>
 
-<h2 id="feOffset">feOffset</h2>
+## feOffset
 
-<p>Pour {{SVGElement('feOffset')}}, <code>dy</code> définit le décalage x de l'élément source du filtre. L'unité utilisée pour résoudre la valeur est définie par l'attribut {{SVGAttr('primitiveUnits')}} de l'élément {{SVGElement('filter')}}.</p>
+Pour {{SVGElement('feOffset')}}, `dy` définit le décalage x de l'élément source du filtre. L'unité utilisée pour résoudre la valeur est définie par l'attribut {{SVGAttr('primitiveUnits')}} de l'élément {{SVGElement('filter')}}.
 
 <table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="row">Valeur</th>
-   <td><strong><a href="/docs/Web/SVG/Content_type#Number">&lt;number&gt;</a></strong></td>
-  </tr>
-  <tr>
-   <th scope="row">Valeur par défaut</th>
-   <td><code>0</code></td>
-  </tr>
-  <tr>
-   <th scope="row">Animation</th>
-   <td>Oui</td>
-  </tr>
- </tbody>
+  <tbody>
+    <tr>
+      <th scope="row">Valeur</th>
+      <td>
+        <strong
+          ><a href="/docs/Web/SVG/Content_type#Number">&#x3C;number></a></strong
+        >
+      </td>
+    </tr>
+    <tr>
+      <th scope="row">Valeur par défaut</th>
+      <td><code>0</code></td>
+    </tr>
+    <tr>
+      <th scope="row">Animation</th>
+      <td>Oui</td>
+    </tr>
+  </tbody>
 </table>
 
-<h2 id="glyphRef">glyphRef</h2>
+## glyphRef
 
-<div class="warning">
-  <p><strong>Attention :</strong> Depuis SVG2 {{SVGElement('glyphRef')}} est déprécié et ne devrait pas être utilisé.</p>
-</div>
+> **Attention :** Depuis SVG2 {{SVGElement('glyphRef')}} est déprécié et ne devrait pas être utilisé.
 
-<p>Pour {{SVGElement('glyphRef')}}, <code>dy</code> définit le décalage x du glyphe, dans le système métrique de la police.</p>
+Pour {{SVGElement('glyphRef')}}, `dy` définit le décalage x du glyphe, dans le système métrique de la police.
 
 <table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="row">Valeur</th>
-   <td><strong><a href="/docs/Web/SVG/Content_type#Number">&lt;number&gt;</a></strong></td>
-  </tr>
-  <tr>
-   <th scope="row">Valeur par défaut</th>
-   <td><code>0</code></td>
-  </tr>
-  <tr>
-   <th scope="row">Animation</th>
-   <td>Oui</td>
-  </tr>
- </tbody>
+  <tbody>
+    <tr>
+      <th scope="row">Valeur</th>
+      <td>
+        <strong
+          ><a href="/docs/Web/SVG/Content_type#Number">&#x3C;number></a></strong
+        >
+      </td>
+    </tr>
+    <tr>
+      <th scope="row">Valeur par défaut</th>
+      <td><code>0</code></td>
+    </tr>
+    <tr>
+      <th scope="row">Animation</th>
+      <td>Oui</td>
+    </tr>
+  </tbody>
 </table>
 
-<h2 id="text">text</h2>
+## text
 
-<p>Pour {{SVGElement('text')}}, s'il ne contient qu'une seule valeur, <code>dx</code> définit un décalage sur l'axe x pour tous les glyphes.</p>
+Pour {{SVGElement('text')}}, s'il ne contient qu'une seule valeur, `dx` définit un décalage sur l'axe x pour tous les glyphes.
 
-<p>S'il a plusieurs valeurs, <code>dx</code> définit un décalage sur l'axe x individuellement pour chaque glyphe, relativement au glyphe précédent. S'il y a moins de valeurs qu'il n'y a de glyphes, les glyphes restants utilisent une valeur de <code>0</code>. S'il y a plus de valeurs qu'il n'y a de glyphes, les valeurs supplémentaires sont ignorées.</p>
+S'il a plusieurs valeurs, `dx` définit un décalage sur l'axe x individuellement pour chaque glyphe, relativement au glyphe précédent. S'il y a moins de valeurs qu'il n'y a de glyphes, les glyphes restants utilisent une valeur de `0`. S'il y a plus de valeurs qu'il n'y a de glyphes, les valeurs supplémentaires sont ignorées.
 
 <table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="row">Valeur</th>
-   <td>Liste de <strong><a href="/docs/Web/SVG/Content_type#Length">&lt;length&gt;</a></strong></td>
-  </tr>
-  <tr>
-   <th scope="row">Valeur par défaut</th>
-   <td><em>aucune</em></td>
-  </tr>
-  <tr>
-   <th scope="row">Animation</th>
-   <td>Oui</td>
-  </tr>
- </tbody>
+  <tbody>
+    <tr>
+      <th scope="row">Valeur</th>
+      <td>
+        Liste de
+        <strong
+          ><a href="/docs/Web/SVG/Content_type#Length">&#x3C;length></a></strong
+        >
+      </td>
+    </tr>
+    <tr>
+      <th scope="row">Valeur par défaut</th>
+      <td><em>aucune</em></td>
+    </tr>
+    <tr>
+      <th scope="row">Animation</th>
+      <td>Oui</td>
+    </tr>
+  </tbody>
 </table>
 
-<h3 id="Exemple">Exemple</h3>
-
-<pre class="brush: css hidden">html,body,svg { height:100% }</pre>
-
-<pre class="brush: html">&lt;svg viewBox="0 0 150 100" xmlns="http://www.w3.org/2000/svg"&gt;
-  &lt;!-- Lignes horizontales --&gt;
-  &lt;line x1="0" x2="100%" y1="30" y2="30" /&gt;
-  &lt;line x1="0" x2="100%" y1="40" y2="40" /&gt;
-  &lt;line x1="0" x2="100%" y1="50" y2="50" /&gt;
-  &lt;line x1="0" x2="100%" y1="60" y2="60" /&gt;
-
-  &lt;!-- Lignes verticales --&gt;
-  &lt;line x1="10" x2="10" y1="0" y2="100%" /&gt;
-  &lt;line x1="50" x2="50" y1="0" y2="100%" /&gt;
-  &lt;line x1="90" x2="90" y1="0" y2="100%" /&gt;
-
-  &lt;!-- Le comportement change en fonction du nombre de valeurs de l'attribut --&gt;
-  &lt;text dy="20"      x="10" y="30"&gt;SVG&lt;/text&gt;
-  &lt;text dy="0 10"    x="50" y="30"&gt;SVG&lt;/text&gt;
-  &lt;text dy="0 10 20" x="90" y="30"&gt;SVG&lt;/text&gt;
-&lt;/svg&gt;</pre>
-
-<pre class="brush: css">line {
+### Exemple
+
+```css hidden
+html,body,svg { height:100% }
+```
+
+```html
+<svg viewBox="0 0 150 100" xmlns="http://www.w3.org/2000/svg">
+  <!-- Lignes horizontales -->
+  <line x1="0" x2="100%" y1="30" y2="30" />
+  <line x1="0" x2="100%" y1="40" y2="40" />
+  <line x1="0" x2="100%" y1="50" y2="50" />
+  <line x1="0" x2="100%" y1="60" y2="60" />
+
+  <!-- Lignes verticales -->
+  <line x1="10" x2="10" y1="0" y2="100%" />
+  <line x1="50" x2="50" y1="0" y2="100%" />
+  <line x1="90" x2="90" y1="0" y2="100%" />
+
+  <!-- Le comportement change en fonction du nombre de valeurs de l'attribut -->
+  <text dy="20"      x="10" y="30">SVG</text>
+  <text dy="0 10"    x="50" y="30">SVG</text>
+  <text dy="0 10 20" x="90" y="30">SVG</text>
+</svg>
+```
+
+```css
+line {
   stroke: red;
   stroke-width: .5px;
   stroke-dasharray: 3px;
-}</pre>
+}
+```
 
-<p>{{EmbedLiveSample('text', '100%', 100)}}</p>
+{{EmbedLiveSample('text', '100%', 100)}}
 
-<h2 id="tref">tref</h2>
+## tref
 
-<div class="warning">
-  <p><strong>Attention :</strong> Depuis SVG2 {{SVGElement('tref')}} est déprécié et ne devrait pas être utilisé.</p>
-</div>
+> **Attention :** Depuis SVG2 {{SVGElement('tref')}} est déprécié et ne devrait pas être utilisé.
 
-<p>Pour {{SVGElement('tref')}}, s'il ne contient qu'une seule valeur, <code>dx</code> définit un décalage sur l'axe x pour tous les glyphes.</p>
+Pour {{SVGElement('tref')}}, s'il ne contient qu'une seule valeur, `dx` définit un décalage sur l'axe x pour tous les glyphes.
 
-<p>S'il a plusieurs valeurs, <code>dx</code> définit un décalage sur l'axe x individuellement pour chaque glyphe, relativement au glyphe précédent. S'il y a moins de valeurs qu'il n'y a de glyphes, les glyphes restants utilisent une valeur de <code>0</code>. S'il y a plus de valeurs qu'il n'y a de glyphes, les valeurs supplémentaires sont ignorées.</p>
+S'il a plusieurs valeurs, `dx` définit un décalage sur l'axe x individuellement pour chaque glyphe, relativement au glyphe précédent. S'il y a moins de valeurs qu'il n'y a de glyphes, les glyphes restants utilisent une valeur de `0`. S'il y a plus de valeurs qu'il n'y a de glyphes, les valeurs supplémentaires sont ignorées.
 
 <table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="row">Valeur</th>
-   <td>Liste de <strong><a href="/docs/Web/SVG/Content_type#Length">&lt;length&gt;</a></strong></td>
-  </tr>
-  <tr>
-   <th scope="row">Valeur par défaut</th>
-   <td><em>aucune</em></td>
-  </tr>
-  <tr>
-   <th scope="row">Animation</th>
-   <td>Oui</td>
-  </tr>
- </tbody>
+  <tbody>
+    <tr>
+      <th scope="row">Valeur</th>
+      <td>
+        Liste de
+        <strong
+          ><a href="/docs/Web/SVG/Content_type#Length">&#x3C;length></a></strong
+        >
+      </td>
+    </tr>
+    <tr>
+      <th scope="row">Valeur par défaut</th>
+      <td><em>aucune</em></td>
+    </tr>
+    <tr>
+      <th scope="row">Animation</th>
+      <td>Oui</td>
+    </tr>
+  </tbody>
 </table>
 
-<h2 id="tspan">tspan</h2>
+## tspan
 
-<p>Pour {{SVGElement('tspan')}}, s'il ne contient qu'une seule valeur, <code>dx</code> définit un décalage sur l'axe x pour tous les glyphes.</p>
+Pour {{SVGElement('tspan')}}, s'il ne contient qu'une seule valeur, `dx` définit un décalage sur l'axe x pour tous les glyphes.
 
-<p>S'il a plusieurs valeurs, <code>dx</code> définit un décalage sur l'axe x individuellement pour chaque glyphe, relativement au glyphe précédent. S'il y a moins de valeurs qu'il n'y a de glyphes, les glyphes restants utilisent une valeur de <code>0</code>. S'il y a plus de valeurs qu'il n'y a de glyphes, les valeurs supplémentaires sont ignorées.</p>
+S'il a plusieurs valeurs, `dx` définit un décalage sur l'axe x individuellement pour chaque glyphe, relativement au glyphe précédent. S'il y a moins de valeurs qu'il n'y a de glyphes, les glyphes restants utilisent une valeur de `0`. S'il y a plus de valeurs qu'il n'y a de glyphes, les valeurs supplémentaires sont ignorées.
 
 <table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="row">Valeur</th>
-   <td>Liste de <strong><a href="/docs/Web/SVG/Content_type#Length">&lt;length&gt;</a></strong></td>
-  </tr>
-  <tr>
-   <th scope="row">Valeur par défaut</th>
-   <td><em>aucune</em></td>
-  </tr>
-  <tr>
-   <th scope="row">Animation</th>
-   <td>Oui</td>
-  </tr>
- </tbody>
+  <tbody>
+    <tr>
+      <th scope="row">Valeur</th>
+      <td>
+        Liste de
+        <strong
+          ><a href="/docs/Web/SVG/Content_type#Length">&#x3C;length></a></strong
+        >
+      </td>
+    </tr>
+    <tr>
+      <th scope="row">Valeur par défaut</th>
+      <td><em>aucune</em></td>
+    </tr>
+    <tr>
+      <th scope="row">Animation</th>
+      <td>Oui</td>
+    </tr>
+  </tbody>
 </table>
 
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">Statut</th>
-   <th scope="col">Commentaire</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{ SpecName('Filters 1.0', '#element-attrdef-fedropshadow-dy', 'dy') }}</td>
-   <td>{{Spec2('Filters 1.0')}}</td>
-   <td>Définition initiale pour <code>&lt;feDropShadow&gt;</code></td>
-  </tr>
-  <tr>
-   <td>{{ SpecName('Filters 1.0', '#element-attrdef-feoffset-dy', 'dy') }}</td>
-   <td>{{Spec2('Filters 1.0')}}</td>
-   <td>Définition pour <code>&lt;feOffset&gt;</code></td>
-  </tr>
-  <tr>
-   <td>{{SpecName("SVG2", "text.html#TextElementDYAttribute", "dy")}}</td>
-   <td>{{Spec2("SVG2")}}</td>
-   <td>Définition pour <code>&lt;text&gt;</code> et <code>&lt;tspan&gt;</code></td>
-  </tr>
-  <tr>
-   <td>{{SpecName("SVG1.1", "filters.html#feOffsetDyAttribute", "dy")}}</td>
-   <td>{{Spec2("SVG1.1")}}</td>
-   <td>Définition initiale pour <code>&lt;feOffset&gt;</code></td>
-  </tr>
-  <tr>
-   <td>{{SpecName("SVG1.1", "text.html#AltGlyphElementDYAttribute", "dy")}}</td>
-   <td>{{Spec2("SVG1.1")}}</td>
-   <td>Définition initiale pour <code>&lt;altGlyph&gt;</code></td>
-  </tr>
-  <tr>
-   <td>{{SpecName("SVG1.1", "text.html#GlyphRefElementDYAttribute", "dy")}}</td>
-   <td>{{Spec2("SVG1.1")}}</td>
-   <td>Définition initiale pour <code>&lt;glyphRef&gt;</code></td>
-  </tr>
-  <tr>
-   <td>{{SpecName("SVG1.1", "text.html#TextElementDYAttribute", "dy")}}</td>
-   <td>{{Spec2("SVG1.1")}}</td>
-   <td>Définition initiale pour <code>&lt;text&gt;</code></td>
-  </tr>
-  <tr>
-   <td>{{SpecName("SVG1.1", "text.html#TSpanElementDYAttribute", "dy")}}</td>
-   <td>{{Spec2("SVG1.1")}}</td>
-   <td>Définition initiale pour <code>&lt;tref&gt;</code> et <code>&lt;tspan&gt;</code></td>
-  </tr>
- </tbody>
-</table>
+## Spécifications
+
+| Spécification                                                                                    | Statut                           | Commentaire                                    |
+| ------------------------------------------------------------------------------------------------ | -------------------------------- | ---------------------------------------------- |
+| {{ SpecName('Filters 1.0', '#element-attrdef-fedropshadow-dy', 'dy') }} | {{Spec2('Filters 1.0')}} | Définition initiale pour `<feDropShadow>`      |
+| {{ SpecName('Filters 1.0', '#element-attrdef-feoffset-dy', 'dy') }}         | {{Spec2('Filters 1.0')}} | Définition pour `<feOffset>`                   |
+| {{SpecName("SVG2", "text.html#TextElementDYAttribute", "dy")}}             | {{Spec2("SVG2")}}         | Définition pour `<text>` et `<tspan>`          |
+| {{SpecName("SVG1.1", "filters.html#feOffsetDyAttribute", "dy")}}             | {{Spec2("SVG1.1")}}         | Définition initiale pour `<feOffset>`          |
+| {{SpecName("SVG1.1", "text.html#AltGlyphElementDYAttribute", "dy")}}     | {{Spec2("SVG1.1")}}         | Définition initiale pour `<altGlyph>`          |
+| {{SpecName("SVG1.1", "text.html#GlyphRefElementDYAttribute", "dy")}}     | {{Spec2("SVG1.1")}}         | Définition initiale pour `<glyphRef>`          |
+| {{SpecName("SVG1.1", "text.html#TextElementDYAttribute", "dy")}}             | {{Spec2("SVG1.1")}}         | Définition initiale pour `<text>`              |
+| {{SpecName("SVG1.1", "text.html#TSpanElementDYAttribute", "dy")}}         | {{Spec2("SVG1.1")}}         | Définition initiale pour `<tref>` et `<tspan>` |
diff --git a/files/fr/web/svg/attribute/events/index.md b/files/fr/web/svg/attribute/events/index.md
index b34fa715e6..d5c9470a0a 100644
--- a/files/fr/web/svg/attribute/events/index.md
+++ b/files/fr/web/svg/attribute/events/index.md
@@ -6,36 +6,36 @@ tags:
   - SVG
 translation_of: Web/SVG/Attribute/Events
 ---
-<p>Tout attribut d'événement a un nom qui commence par "on" suivit du nom de l'événement auquel il est rattaché. Ces attributs spécifient quel script exécuter lorsque l'événement du type donné est déclenché sur l'élément.</p>
+Tout attribut d'événement a un nom qui commence par "on" suivit du nom de l'événement auquel il est rattaché. Ces attributs spécifient quel script exécuter lorsque l'événement du type donné est déclenché sur l'élément.
 
-<p>SVG prend en charge tous les types d'événement pris en charge par le navigateur, en suivant les mêmes spécifications que les attributs d'événement HTML.</p>
+SVG prend en charge tous les types d'événement pris en charge par le navigateur, en suivant les mêmes spécifications que les attributs d'événement HTML.
 
-<p>Les attributs d'événements globaux sont disponibles sur <em>tous les éléments SVG</em>. Les autres attributs d'événement sont disponible au cas par cas sur les différents éléments.</p>
+Les attributs d'événements globaux sont disponibles sur _tous les éléments SVG_. Les autres attributs d'événement sont disponible au cas par cas sur les différents éléments.
 
-<p>Tous les attributs d'événements <em>ne peuvent pas être animés.</em></p>
+Tous les attributs d'événements _ne peuvent pas être animés._
 
-<h2 id="Attributs">Attributs</h2>
+## Attributs
 
-<h3 id="Attributs_d'événement_d'animation">Attributs d'événement d'animation</h3>
+### Attributs d'événement d'animation
 
-<p><code><strong>onbegin</strong></code>, <code><strong>onend</strong></code>, <code><strong>onrepeat</strong></code></p>
+**`onbegin`**, **`onend`**, **`onrepeat`**
 
-<h3 id="Attributs_d'événement_du_document">Attributs d'événement du document</h3>
+### Attributs d'événement du document
 
-<p><code><strong>onabort</strong></code>, <code><strong>onerror</strong></code>, <code><strong>onresize</strong></code>, <code><strong>onscroll</strong></code>, <code><strong>onunload</strong></code></p>
+**`onabort`**, **`onerror`**, **`onresize`**, **`onscroll`**, **`onunload`**
 
-<h3 id="Attributs_d'événement_des_éléments_du_document">Attributs d'événement des éléments du document</h3>
+### Attributs d'événement des éléments du document
 
-<p><strong><code>oncopy</code></strong>, <strong><code>oncut</code></strong>, <strong><code>onpaste</code></strong></p>
+**`oncopy`**, **`oncut`**, **`onpaste`**
 
-<h3 id="Attributs_d'événement_globaux">Attributs d'événement globaux</h3>
+### Attributs d'événement globaux
 
-<p><code><strong>oncancel</strong></code>, <code><strong>oncanplay</strong></code>, <code><strong>oncanplaythrough</strong></code>, <code><strong>onchange</strong></code>, <code><strong>onclick</strong></code>, <code><strong>onclose</strong></code>, <code><strong>oncuechange</strong></code>, <code><strong>ondblclick</strong></code>, <code><strong>ondrag</strong></code>, <code><strong>ondragend</strong></code>, <code><strong>ondragenter</strong></code>, <code><strong>ondragexit</strong></code>, <code><strong>ondragleave</strong></code>, <code><strong>ondragover</strong></code>, <code><strong>ondragstart</strong></code>, <code><strong>ondrop</strong></code>, <code><strong>ondurationchange</strong></code>, <code><strong>onemptied</strong></code>, <code><strong>onended</strong></code>, <code><strong>onerror</strong></code>, <code><strong>onfocus</strong></code>, <code><strong>oninput</strong></code>, <code><strong>oninvalid</strong></code>, <code><strong>onkeydown</strong></code>, <code><strong>onkeypress</strong></code>, <code><strong>onkeyup</strong></code>, <code><strong>onload</strong></code>, <code><strong>onloadeddata</strong></code>, <code><strong>onloadedmetadata</strong></code>, <code><strong>onloadstart</strong></code>, <code><strong>onmousedown</strong></code>, <code><strong>onmouseenter</strong></code>, <code><strong>onmouseleave</strong></code>, <code><strong>onmousemove</strong></code>, <code><strong>onmouseout</strong></code>, <code><strong>onmouseover</strong></code>, <code><strong>onmouseup</strong></code>, <code><strong>onmousewheel</strong></code>, <code><strong>onpause</strong></code>, <code><strong>onplay</strong></code>, <code><strong>onplaying</strong></code>, <code><strong>onprogress</strong></code>, <code><strong>onratechange</strong></code>, <code><strong>onreset</strong></code>, <code><strong>onresize</strong></code>, <code><strong>onscroll</strong></code>, <code><strong>onseeked</strong></code>, <code><strong>onseeking</strong></code>, <code><strong>onselect</strong></code>, <code><strong>onshow</strong></code>, <code><strong>onstalled</strong></code>, <code><strong>onsubmit</strong></code>, <code><strong>onsuspend</strong></code>, <code><strong>ontimeupdate</strong></code>, <code><strong>ontoggle</strong></code>, <code><strong>onvolumechange</strong></code>, <code><strong>onwaiting</strong></code></p>
+**`oncancel`**, **`oncanplay`**, **`oncanplaythrough`**, **`onchange`**, **`onclick`**, **`onclose`**, **`oncuechange`**, **`ondblclick`**, **`ondrag`**, **`ondragend`**, **`ondragenter`**, **`ondragexit`**, **`ondragleave`**, **`ondragover`**, **`ondragstart`**, **`ondrop`**, **`ondurationchange`**, **`onemptied`**, **`onended`**, **`onerror`**, **`onfocus`**, **`oninput`**, **`oninvalid`**, **`onkeydown`**, **`onkeypress`**, **`onkeyup`**, **`onload`**, **`onloadeddata`**, **`onloadedmetadata`**, **`onloadstart`**, **`onmousedown`**, **`onmouseenter`**, **`onmouseleave`**, **`onmousemove`**, **`onmouseout`**, **`onmouseover`**, **`onmouseup`**, **`onmousewheel`**, **`onpause`**, **`onplay`**, **`onplaying`**, **`onprogress`**, **`onratechange`**, **`onreset`**, **`onresize`**, **`onscroll`**, **`onseeked`**, **`onseeking`**, **`onselect`**, **`onshow`**, **`onstalled`**, **`onsubmit`**, **`onsuspend`**, **`ontimeupdate`**, **`ontoggle`**, **`onvolumechange`**, **`onwaiting`**
 
-<h3 id="Attributs_d'événement_graphiques">Attributs d'événement graphiques</h3>
+### Attributs d'événement graphiques
 
-<p><code><strong>onactivate</strong></code>, <code><strong>onfocusin</strong></code>, <code><strong>onfocusout</strong></code></p>
+**`onactivate`**, **`onfocusin`**, **`onfocusout`**
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("svg.attributes.events")}}</p>
+{{Compat("svg.attributes.events")}}
diff --git a/files/fr/web/svg/attribute/fill-opacity/index.md b/files/fr/web/svg/attribute/fill-opacity/index.md
index 82e5f456c3..1d8d621138 100644
--- a/files/fr/web/svg/attribute/fill-opacity/index.md
+++ b/files/fr/web/svg/attribute/fill-opacity/index.md
@@ -6,86 +6,76 @@ tags:
   - SVG Attribute
 translation_of: Web/SVG/Attribute/fill-opacity
 ---
-<div>{{SVGRef}}</div>
+{{SVGRef}}
 
-<p>L'attribut <strong><code>fill-opacity</code></strong> définit l'opacité du remplissage (<em>couleur, dégradé, motif</em>, etc) appliqué à une forme.</p>
+L'attribut **`fill-opacity`** définit l'opacité du remplissage (_couleur, dégradé, motif_, etc) appliqué à une forme.
 
-<div class="note">
-  <p><strong>Note :</strong> <code>fill-opacity</code> étant un attribut de présentation, il peut être utilisé comme propriété CSS.</p>
-</div>
+> **Note :** `fill-opacity` étant un attribut de présentation, il peut être utilisé comme propriété CSS.
 
-<p>Cet attribut peut être appliqué sur tous les éléments, en revanche il n'aura d'effet que sur les éléments suivants: {{SVGElement('altGlyph')}}, {{SVGElement('circle')}}, {{SVGElement('ellipse')}}, {{SVGElement('path')}}, {{SVGElement('polygon')}}, {{SVGElement('polyline')}}, {{SVGElement('rect')}}, {{SVGElement('text')}}, {{SVGElement('textPath')}}, {{SVGElement('tref')}}, et {{SVGElement('tspan')}}</p>
+Cet attribut peut être appliqué sur tous les éléments, en revanche il n'aura d'effet que sur les éléments suivants: {{SVGElement('altGlyph')}}, {{SVGElement('circle')}}, {{SVGElement('ellipse')}}, {{SVGElement('path')}}, {{SVGElement('polygon')}}, {{SVGElement('polyline')}}, {{SVGElement('rect')}}, {{SVGElement('text')}}, {{SVGElement('textPath')}}, {{SVGElement('tref')}}, et {{SVGElement('tspan')}}
 
-<h2>Exemple</h2>
+## Exemple
 
-<pre class="brush: css hidden">html,body,svg { height:100% }</pre>
+```css hidden
+html,body,svg { height:100% }
+```
 
-<pre class="brush: html">&lt;svg viewBox="0 0 400 100" xmlns="http://www.w3.org/2000/svg"&gt;
-  &lt;!-- Opacité par défaut: 1 --&gt;
-  &lt;circle cx="50" cy="50" r="40" /&gt;
+```html
+<svg viewBox="0 0 400 100" xmlns="http://www.w3.org/2000/svg">
+  <!-- Opacité par défaut: 1 -->
+  <circle cx="50" cy="50" r="40" />
 
-  &lt;!-- Définit l'opacité avec un nombre --&gt;
-  &lt;circle cx="150" cy="50" r="40"
-          fill-opacity="0.7" /&gt;
+  <!-- Définit l'opacité avec un nombre -->
+  <circle cx="150" cy="50" r="40"
+          fill-opacity="0.7" />
 
-  &lt;!-- Définit l'opaité avec un pourcentage --&gt;
-  &lt;circle cx="250" cy="50" r="40"
-          fill-opacity="50%" /&gt;
+  <!-- Définit l'opaité avec un pourcentage -->
+  <circle cx="250" cy="50" r="40"
+          fill-opacity="50%" />
 
-  &lt;!-- Définit l'opacité avec une propriété CSS --&gt;
-  &lt;circle cx="350" cy="50" r="40"
-          style="fill-opacity: .25;" /&gt;
-&lt;/svg&gt;</pre>
+  <!-- Définit l'opacité avec une propriété CSS -->
+  <circle cx="350" cy="50" r="40"
+          style="fill-opacity: .25;" />
+</svg>
+```
 
-<p>{{EmbedLiveSample('exemple', '100%', 150)}}</p>
+{{EmbedLiveSample('exemple', '100%', 150)}}
 
-<h2 id="Notes_d'utilisation">Notes d'utilisation</h2>
+## Notes d'utilisation
 
 <table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="row">Valeur</th>
-   <td><code>[0-1]</code> | <strong><a href="/docs/Web/SVG/Content_type#Paint">&lt;percentage&gt;</a></strong></td>
-  </tr>
-  <tr>
-   <th scope="row">Valeur par défaut</th>
-   <td><code>1</code></td>
-  </tr>
-  <tr>
-   <th scope="row">Animation</th>
-   <td>Oui</td>
-  </tr>
- </tbody>
+  <tbody>
+    <tr>
+      <th scope="row">Valeur</th>
+      <td>
+        <code>[0-1]</code> |
+        <strong
+          ><a href="/docs/Web/SVG/Content_type#Paint"
+            >&#x3C;percentage></a
+          ></strong
+        >
+      </td>
+    </tr>
+    <tr>
+      <th scope="row">Valeur par défaut</th>
+      <td><code>1</code></td>
+    </tr>
+    <tr>
+      <th scope="row">Animation</th>
+      <td>Oui</td>
+    </tr>
+  </tbody>
 </table>
 
-<div class="note">
-  <p><strong>Note :</strong> SVG2 introduit les valeurs en pourcentage pour <code>fill-opacity</code>. Cependant,  ce n'est pas souvent pris en charge pour le moment (<em>Voir {{anch('Compatibilité des navigateurs')}} ci-dessous</em>). Il est par conséquent recommandé d'utiliser les valeurs de l'intervalle <code>[0-1]</code>.</p>
-</div>
+> **Note :** SVG2 introduit les valeurs en pourcentage pour `fill-opacity`. Cependant,  ce n'est pas souvent pris en charge pour le moment (_Voir {{anch('Compatibilité des navigateurs')}} ci-dessous_). Il est par conséquent recommandé d'utiliser les valeurs de l'intervalle `[0-1]`.
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("svg.attributes.presentation.fill-opacity")}}</p>
+{{Compat("svg.attributes.presentation.fill-opacity")}}
 
-<h2 id="Spécifications">Spécifications</h2>
+## Spécifications
 
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">Statut</th>
-   <th scope="col">Commentaire</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName("SVG2", "painting.html#FillOpacityProperty", "fill-opacity")}}</td>
-   <td>{{Spec2("SVG2")}}</td>
-   <td>Définition pour les formes et le texte.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName("SVG1.1", "painting.html#FillOpacityProperty", "fill-opacity")}}</td>
-   <td>{{Spec2("SVG1.1")}}</td>
-   <td>Définition initiale pour les formes et le texte.</td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                                                                        | Statut                   | Commentaire                                      |
+| ---------------------------------------------------------------------------------------------------- | ------------------------ | ------------------------------------------------ |
+| {{SpecName("SVG2", "painting.html#FillOpacityProperty", "fill-opacity")}}     | {{Spec2("SVG2")}} | Définition pour les formes et le texte.          |
+| {{SpecName("SVG1.1", "painting.html#FillOpacityProperty", "fill-opacity")}} | {{Spec2("SVG1.1")}} | Définition initiale pour les formes et le texte. |
diff --git a/files/fr/web/svg/attribute/fill-rule/index.md b/files/fr/web/svg/attribute/fill-rule/index.md
index 04872838d2..cd1066edd3 100644
--- a/files/fr/web/svg/attribute/fill-rule/index.md
+++ b/files/fr/web/svg/attribute/fill-rule/index.md
@@ -6,155 +6,146 @@ tags:
   - SVG Attribute
 translation_of: Web/SVG/Attribute/fill-rule
 ---
-<div>{{SVGRef}}</div>
+{{SVGRef}}
 
-<p>L'attribut <strong><code>fill-rule</code></strong> définit l'algorithme à utiliser pour déterminer les parties qui sont considérées <em>à l'intérieur</em> de la forme.</p>
+L'attribut **`fill-rule`** définit l'algorithme à utiliser pour déterminer les parties qui sont considérées _à l'intérieur_ de la forme.
 
-<div class="note">
-  <p><strong>Note :</strong> <code>fill-rule</code> est un attribut de présentation et peut donc être utilisé comme propriété CSS.</p>
-</div>
+> **Note :** `fill-rule` est un attribut de présentation et peut donc être utilisé comme propriété CSS.
 
-<p>Cet attribut peut être appliqué à n'importe quel élément mais n'aura d'effet que sur les éléments suivants: {{SVGElement('altGlyph')}}, {{SVGElement('path')}}, {{SVGElement('polygon')}}, {{SVGElement('polyline')}}, {{SVGElement('text')}}, {{SVGElement('textPath')}}, {{SVGElement('tref')}}, et {{SVGElement('tspan')}}</p>
+Cet attribut peut être appliqué à n'importe quel élément mais n'aura d'effet que sur les éléments suivants: {{SVGElement('altGlyph')}}, {{SVGElement('path')}}, {{SVGElement('polygon')}}, {{SVGElement('polyline')}}, {{SVGElement('text')}}, {{SVGElement('textPath')}}, {{SVGElement('tref')}}, et {{SVGElement('tspan')}}
 
-<h2>Exemple</h2>
+## Exemple
 
-<pre class="brush: css hidden">html,body,svg { height:100% }</pre>
+```css hidden
+html,body,svg { height:100% }
+```
 
-<pre class="brush: html">&lt;svg viewBox="-10 -10 220 120" xmlns="http://www.w3.org/2000/svg"&gt;
-  &lt;!-- Valeur par défaut pour fill-rule --&gt;
-  &lt;polygon fill-rule="nonzero" stroke="red"
-   points="50,0 21,90 98,35 2,35 79,90"/&gt;
+```html
+<svg viewBox="-10 -10 220 120" xmlns="http://www.w3.org/2000/svg">
+  <!-- Valeur par défaut pour fill-rule -->
+  <polygon fill-rule="nonzero" stroke="red"
+   points="50,0 21,90 98,35 2,35 79,90"/>
 
-  &lt;!--
+  <!--
   Les points au centre de la forme ont 2
   segments (matérialisés par le trait rouge)
   Avec la règle evenodd, ils sont considérés en
   dehors de la forme, et l'intérieur de l'étoile
   est donc vide.
-  --&gt;
-  &lt;polygon fill-rule="evenodd" stroke="red"
-   points="150,0 121,90 198,35 102,35 179,90"/&gt;
-&lt;/svg&gt;</pre>
+  -->
+  <polygon fill-rule="evenodd" stroke="red"
+   points="150,0 121,90 198,35 102,35 179,90"/>
+</svg>
+```
 
-<p>{{EmbedLiveSample('exemple', '100%', 200)}}</p>
+{{EmbedLiveSample('exemple', '100%', 200)}}
 
-<h2 id="Usage">Usage</h2>
+## Usage
 
 <table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="row">Valeur</th>
-   <td><code>nonzero</code> | <code>evenodd</code></td>
-  </tr>
-  <tr>
-   <th scope="row">Valeur par défaut</th>
-   <td><code>nonzero</code></td>
-  </tr>
-  <tr>
-   <th scope="row">Animation</th>
-   <td>Yes</td>
-  </tr>
- </tbody>
+  <tbody>
+    <tr>
+      <th scope="row">Valeur</th>
+      <td><code>nonzero</code> | <code>evenodd</code></td>
+    </tr>
+    <tr>
+      <th scope="row">Valeur par défaut</th>
+      <td><code>nonzero</code></td>
+    </tr>
+    <tr>
+      <th scope="row">Animation</th>
+      <td>Yes</td>
+    </tr>
+  </tbody>
 </table>
 
-<p>L'attribut <code>fill-rule</code> peut prendre deux valeurs:</p>
+L'attribut `fill-rule` peut prendre deux valeurs:
 
-<h3 id="nonzero">nonzero</h3>
+### nonzero
 
-<p>La valeur <code>nonzero</code> détermine si un point est à l'intérieur d'une forme en dessinant un rayon à partir de ce point vers l'infini dans toutes les directions, puis examine les endroits où un segment de la forme traverse le rayon.</p>
+La valeur `nonzero` détermine si un point est à l'intérieur d'une forme en dessinant un rayon à partir de ce point vers l'infini dans toutes les directions, puis examine les endroits où un segment de la forme traverse le rayon.
 
-<p>À chaque fois qu'un segment traverse le rayon de gauche à droite, on ajoute un. À chaque fois qu'un segment traverse le rayon de droite à gauche, on soustrait un. Si au final, le compte est égal à zéro, le point est l'extérieur. Dans le cas contraire, il est à l'intérieur.</p>
+À chaque fois qu'un segment traverse le rayon de gauche à droite, on ajoute un. À chaque fois qu'un segment traverse le rayon de droite à gauche, on soustrait un. Si au final, le compte est égal à zéro, le point est l'extérieur. Dans le cas contraire, il est à l'intérieur.
 
-<h4 id="Exemple">Exemple</h4>
+#### Exemple
 
-<pre class="brush: css hidden">html,body,svg { height:100% }</pre>
+```css hidden
+html,body,svg { height:100% }
+```
 
-<pre class="brush: html">&lt;svg viewBox="-10 -10 320 120" xmlns="http://www.w3.org/2000/svg"&gt;
-  &lt;!-- Effet de la règle de remplissage sur les segments qui se croisent --&gt;
-  &lt;polygon fill-rule="nonzero" stroke="red"
-           points="50,0 21,90 98,35 2,35 79,90"/&gt;
+```html
+<svg viewBox="-10 -10 320 120" xmlns="http://www.w3.org/2000/svg">
+  <!-- Effet de la règle de remplissage sur les segments qui se croisent -->
+  <polygon fill-rule="nonzero" stroke="red"
+           points="50,0 21,90 98,35 2,35 79,90"/>
 
-  &lt;!--
+  <!--
   Effet sur une forme dans une forme
   lorsque le segment va dans la même direction
   (vers la droite)
-  --&gt;
-  &lt;path fill-rule="nonzero" stroke="red"
+  -->
+  <path fill-rule="nonzero" stroke="red"
         d="M110,0  h90 v90 h-90 z
-           M130,20 h50 v50 h-50 z"/&gt;
+           M130,20 h50 v50 h-50 z"/>
 
-  &lt;!--
+  <!--
   Effet sur une forme dans une forme
   lorsque le segment va dans la direction opposée
   (vers la gauche contre vers la droite)
-  --&gt;
-  &lt;path fill-rule="nonzero" stroke="red"
+  -->
+  <path fill-rule="nonzero" stroke="red"
         d="M210,0  h90 v90 h-90 z
-           M230,20 v50 h50 v-50 z"/&gt;
-&lt;/svg&gt;</pre>
+           M230,20 v50 h50 v-50 z"/>
+</svg>
+```
 
-<p>{{EmbedLiveSample('nonzero', '100%', 200)}}</p>
+{{EmbedLiveSample('nonzero', '100%', 200)}}
 
-<h3 id="evenodd">evenodd</h3>
+### evenodd
 
-<p>La valeur <code>evenodd</code> détermine si un point est à l'intérieur d'une forme en dessinant un rayon de à partir de ce point vers l'infini dans toutes les directions, et compte le nombre de segments de la forme qui traversent ce rayon. Si ce nombre est impair (<em>odd</em> en anglais), alors le point est à l'intérieur. Si le nombre est pair (<em>even</em> en anglais), alors le point est à l'extérieur.</p>
+La valeur `evenodd` détermine si un point est à l'intérieur d'une forme en dessinant un rayon de à partir de ce point vers l'infini dans toutes les directions, et compte le nombre de segments de la forme qui traversent ce rayon. Si ce nombre est impair (_odd_ en anglais), alors le point est à l'intérieur. Si le nombre est pair (_even_ en anglais), alors le point est à l'extérieur.
 
-<h4 id="Exemple_2">Exemple</h4>
+#### Exemple
 
-<pre class="brush: css hidden">html,body,svg { height:100% }</pre>
+```css hidden
+html,body,svg { height:100% }
+```
 
-<pre class="brush: html">&lt;svg viewBox="-10 -10 320 120" xmlns="http://www.w3.org/2000/svg"&gt;
-  &lt;!-- Effet de la règle de remplissage sur les segments qui se croisent --&gt;
-  &lt;polygon fill-rule="evenodd" stroke="red"
-           points="50,0 21,90 98,35 2,35 79,90"/&gt;
+```html
+<svg viewBox="-10 -10 320 120" xmlns="http://www.w3.org/2000/svg">
+  <!-- Effet de la règle de remplissage sur les segments qui se croisent -->
+  <polygon fill-rule="evenodd" stroke="red"
+           points="50,0 21,90 98,35 2,35 79,90"/>
 
-  &lt;!--
+  <!--
   Effet sur une forme dans une forme
   lorsque le segment va dans la même direction
   (vers la droite)
-  --&gt;
-  &lt;path fill-rule="evenodd" stroke="red"
+  -->
+  <path fill-rule="evenodd" stroke="red"
         d="M110,0  h90 v90 h-90 z
-           M130,20 h50 v50 h-50 z"/&gt;
+           M130,20 h50 v50 h-50 z"/>
 
-  &lt;!--
+  <!--
   Effet sur une forme dans une forme
   lorsque le segment va dans la direction opposée
   (vers la gauche contre vers la droite)
-  --&gt;
-  &lt;path fill-rule="evenodd" stroke="red"
+  -->
+  <path fill-rule="evenodd" stroke="red"
         d="M210,0  h90 v90 h-90 z
-           M230,20 v50 h50 v-50 z"/&gt;
-&lt;/svg&gt;</pre>
+           M230,20 v50 h50 v-50 z"/>
+</svg>
+```
 
-<p>{{EmbedLiveSample('evenodd', '100%', 200)}}</p>
+{{EmbedLiveSample('evenodd', '100%', 200)}}
 
-<h2 id="Browser_Compatibility">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("svg.attributes.presentation.fill-rule")}}</p>
+{{Compat("svg.attributes.presentation.fill-rule")}}
 
-<h2 id="Spécification">Spécification</h2>
+## Spécification
 
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">Statut</th>
-   <th scope="col">Commentaire</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName("SVG2", "painting.html#FillRuleProperty", "fill-rule")}}</td>
-   <td>{{Spec2("SVG2")}}</td>
-   <td>Définition pour les formes et le texte</td>
-  </tr>
-  <tr>
-   <td>{{SpecName("SVG1.1", "painting.html#FillRuleProperty", "fill-rule")}}</td>
-   <td>{{Spec2("SVG1.1")}}</td>
-   <td>Définition initiale pour les formes et le texte</td>
-  </tr>
- </tbody>
-</table>
-
-<p> </p>
+| Spécification                                                                                | Statut                   | Commentaire                                     |
+| -------------------------------------------------------------------------------------------- | ------------------------ | ----------------------------------------------- |
+| {{SpecName("SVG2", "painting.html#FillRuleProperty", "fill-rule")}}     | {{Spec2("SVG2")}} | Définition pour les formes et le texte          |
+| {{SpecName("SVG1.1", "painting.html#FillRuleProperty", "fill-rule")}} | {{Spec2("SVG1.1")}} | Définition initiale pour les formes et le texte |
diff --git a/files/fr/web/svg/attribute/fill/index.md b/files/fr/web/svg/attribute/fill/index.md
index bca17a20a8..c0aef89760 100644
--- a/files/fr/web/svg/attribute/fill/index.md
+++ b/files/fr/web/svg/attribute/fill/index.md
@@ -6,474 +6,490 @@ tags:
   - SVG Attribute
 translation_of: Web/SVG/Attribute/fill
 ---
-<div>{{SVGRef}}</div>
+{{SVGRef}}
 
-<p>L'attribut <strong><code>fill</code></strong> a deux significations différentes: 1. pour les formes et le texte, il définit le remplissage (<em>couleur, dégradé, motif, etc</em>); 2. pour les animations, il définit l'état final.</p>
+L'attribut **`fill`** a deux significations différentes: 1. pour les formes et le texte, il définit le remplissage (_couleur, dégradé, motif, etc_); 2. pour les animations, il définit l'état final.
 
-<p>Cet attribut peut être appliqué à tous les éléments, en revanche il n'aura d'effet que sur les formes suivantes: {{SVGElement('altGlyph')}}, {{SVGElement('circle')}}, {{SVGElement('ellipse')}}, {{SVGElement('path')}}, {{SVGElement('polygon')}}, {{SVGElement('polyline')}}, {{SVGElement('rect')}}, {{SVGElement('text')}}, {{SVGElement('textPath')}}, {{SVGElement('tref')}}, et {{SVGElement('tspan')}}</p>
+Cet attribut peut être appliqué à tous les éléments, en revanche il n'aura d'effet que sur les formes suivantes: {{SVGElement('altGlyph')}}, {{SVGElement('circle')}}, {{SVGElement('ellipse')}}, {{SVGElement('path')}}, {{SVGElement('polygon')}}, {{SVGElement('polyline')}}, {{SVGElement('rect')}}, {{SVGElement('text')}}, {{SVGElement('textPath')}}, {{SVGElement('tref')}}, et {{SVGElement('tspan')}}
 
-<p>Pour les animations, il s'applique à cinq éléments: {{SVGElement('animate')}}, {{SVGElement('animateColor')}}, {{SVGElement('animateMotion')}}, {{SVGElement('animateTransform')}}, et {{SVGElement('set')}}</p>
+Pour les animations, il s'applique à cinq éléments: {{SVGElement('animate')}}, {{SVGElement('animateColor')}}, {{SVGElement('animateMotion')}}, {{SVGElement('animateTransform')}}, et {{SVGElement('set')}}
 
-<h2>Exemple</h2>
+## Exemple
 
-<pre class="brush: css hidden">html,body,svg { height:100% }</pre>
+```css hidden
+html,body,svg { height:100% }
+```
 
-<pre class="brush: html">&lt;svg viewBox="0 0 300 100" xmlns="http://www.w3.org/2000/svg"&gt;
-  &lt;!-- Remplir avec une simple couleur --&gt;
-  &lt;circle cx="50" cy="50" r="40" fill="pink" /&gt;
+```html
+<svg viewBox="0 0 300 100" xmlns="http://www.w3.org/2000/svg">
+  <!-- Remplir avec une simple couleur -->
+  <circle cx="50" cy="50" r="40" fill="pink" />
 
-  &lt;!-- Remplir avec un dégradé --&gt;
-  &lt;defs&gt;
-    &lt;radialGradient id="myGradient"&gt;
-      &lt;stop offset="0%"   stop-color="pink" /&gt;
-      &lt;stop offset="100%" stop-color="black" /&gt;
-    &lt;/radialGradient&gt;
-  &lt;/defs&gt;
-  &lt;circle cx="150" cy="50" r="40" fill="url(#myGradient)" /&gt;
+  <!-- Remplir avec un dégradé -->
+  <defs>
+    <radialGradient id="myGradient">
+      <stop offset="0%"   stop-color="pink" />
+      <stop offset="100%" stop-color="black" />
+    </radialGradient>
+  </defs>
+  <circle cx="150" cy="50" r="40" fill="url(#myGradient)" />
 
-  &lt;!-- Définit l'état final d'un cercle animé --&gt;
-  &lt;circle cx="250" cy="50" r="20"&gt;
-    &lt;animate attributeType="XML"
+  <!-- Définit l'état final d'un cercle animé -->
+  <circle cx="250" cy="50" r="20">
+    <animate attributeType="XML"
              attributeName="r"
              from="0" to="40" dur="5s"
-             fill="freeze" /&gt;
-  &lt;/circle&gt;
-&lt;/svg&gt;
-</pre>
+             fill="freeze" />
+  </circle>
+</svg>
+```
 
-<p>{{EmbedLiveSample('exemple', '100%', 200)}}</p>
+{{EmbedLiveSample('exemple', '100%', 200)}}
 
-<h2 id="altGlyph">altGlyph</h2>
+## altGlyph
 
-<div class="warning">
-  <p><strong>Attention :</strong> {{SVGElement('altGlyph')}} est déprécié en SVG2 et ne devrait pas être utilisé.</p>
-</div>
+> **Attention :** {{SVGElement('altGlyph')}} est déprécié en SVG2 et ne devrait pas être utilisé.
 
-<p>Pour {{SVGElement('altGlyph')}}, <code>fill</code> est un attribut de présentation qui définit la couleur du glyphe.</p>
+Pour {{SVGElement('altGlyph')}}, `fill` est un attribut de présentation qui définit la couleur du glyphe.
 
 <table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="row">Valeur</th>
-   <td><strong><a href="/docs/Web/SVG/Content_type#Paint">&lt;paint&gt;</a></strong></td>
-  </tr>
-  <tr>
-   <th scope="row">Valeur par défaut</th>
-   <td><code>black</code></td>
-  </tr>
-  <tr>
-   <th scope="row">Animation</th>
-   <td>Oui</td>
-  </tr>
- </tbody>
+  <tbody>
+    <tr>
+      <th scope="row">Valeur</th>
+      <td>
+        <strong
+          ><a href="/docs/Web/SVG/Content_type#Paint">&#x3C;paint></a></strong
+        >
+      </td>
+    </tr>
+    <tr>
+      <th scope="row">Valeur par défaut</th>
+      <td><code>black</code></td>
+    </tr>
+    <tr>
+      <th scope="row">Animation</th>
+      <td>Oui</td>
+    </tr>
+  </tbody>
 </table>
 
-<div class="note">
-  <p><strong>Note :</strong> <code>fill</code> étant un attribut de présentation, il peut être utilisé comme propriété CSS.</p>
-</div>
+> **Note :** `fill` étant un attribut de présentation, il peut être utilisé comme propriété CSS.
 
-<h2 id="animate">animate</h2>
+## animate
 
-<p>Pour {{SVGElement('animate')}}, <code>fill</code> définit l'état final de l'animation.</p>
+Pour {{SVGElement('animate')}}, `fill` définit l'état final de l'animation.
 
 <table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="row">Valeur</th>
-   <td><code>freeze</code> (<em>Conserver la dernière image de l'animation</em>) | <code>remove</code> (<em>Conserver la première image de l'animation</em>)</td>
-  </tr>
-  <tr>
-   <th scope="row">Valeur par défaut</th>
-   <td><code>remove</code></td>
-  </tr>
-  <tr>
-   <th scope="row">Animation</th>
-   <td>Non</td>
-  </tr>
- </tbody>
+  <tbody>
+    <tr>
+      <th scope="row">Valeur</th>
+      <td>
+        <code>freeze</code> (<em>Conserver la dernière image de l'animation</em
+        >) | <code>remove</code> (<em
+          >Conserver la première image de l'animation</em
+        >)
+      </td>
+    </tr>
+    <tr>
+      <th scope="row">Valeur par défaut</th>
+      <td><code>remove</code></td>
+    </tr>
+    <tr>
+      <th scope="row">Animation</th>
+      <td>Non</td>
+    </tr>
+  </tbody>
 </table>
 
-<h2 id="animateColor">animateColor</h2>
+## animateColor
 
-<div class="warning">
-  <p><strong>Attention :</strong> {{SVGElement('animateColor')}} est déprécié en SVG2 et ne devrait pas être utilisé. Utiliser {{SVGElement('animate')}} à la place.</p>
-</div>
+> **Attention :** {{SVGElement('animateColor')}} est déprécié en SVG2 et ne devrait pas être utilisé. Utiliser {{SVGElement('animate')}} à la place.
 
-<p>Pour {{SVGElement('animateColor')}}, <code>fill</code> définit l'état final de l'animation.</p>
+Pour {{SVGElement('animateColor')}}, `fill` définit l'état final de l'animation.
 
 <table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="row">Valeur</th>
-   <td><code>freeze</code> (<em>Conserver la dernière image de l'animation</em>) | <code>remove</code> (<em>Conserver la première image de l'animation</em>)</td>
-  </tr>
-  <tr>
-   <th scope="row">Valeur par défaut</th>
-   <td><code>remove</code></td>
-  </tr>
-  <tr>
-   <th scope="row">Animation</th>
-   <td>Non</td>
-  </tr>
- </tbody>
+  <tbody>
+    <tr>
+      <th scope="row">Valeur</th>
+      <td>
+        <code>freeze</code> (<em>Conserver la dernière image de l'animation</em
+        >) | <code>remove</code> (<em
+          >Conserver la première image de l'animation</em
+        >)
+      </td>
+    </tr>
+    <tr>
+      <th scope="row">Valeur par défaut</th>
+      <td><code>remove</code></td>
+    </tr>
+    <tr>
+      <th scope="row">Animation</th>
+      <td>Non</td>
+    </tr>
+  </tbody>
 </table>
 
-<h2 id="animateMotion">animateMotion</h2>
+## animateMotion
 
-<p>Pour {{SVGElement('animateMotion')}}, <code>fill</code> définit l'état final de l'animation.</p>
+Pour {{SVGElement('animateMotion')}}, `fill` définit l'état final de l'animation.
 
 <table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="row">Valeur</th>
-   <td><code>freeze</code> (<em>Conserver la dernière image de l'animation</em>) | <code>remove</code> (<em>Conserver la première image de l'animation</em>)</td>
-  </tr>
-  <tr>
-   <th scope="row">Valeur par défaut</th>
-   <td><code>remove</code></td>
-  </tr>
-  <tr>
-   <th scope="row">Animation</th>
-   <td>Non</td>
-  </tr>
- </tbody>
+  <tbody>
+    <tr>
+      <th scope="row">Valeur</th>
+      <td>
+        <code>freeze</code> (<em>Conserver la dernière image de l'animation</em
+        >) | <code>remove</code> (<em
+          >Conserver la première image de l'animation</em
+        >)
+      </td>
+    </tr>
+    <tr>
+      <th scope="row">Valeur par défaut</th>
+      <td><code>remove</code></td>
+    </tr>
+    <tr>
+      <th scope="row">Animation</th>
+      <td>Non</td>
+    </tr>
+  </tbody>
 </table>
 
-<h2 id="animateTransform">animateTransform</h2>
+## animateTransform
 
-<p>Pour {{SVGElement('animateTransform')}}, <code>fill</code> définit l'état final de l'animation.</p>
+Pour {{SVGElement('animateTransform')}}, `fill` définit l'état final de l'animation.
 
 <table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="row">Valeur</th>
-   <td><code>freeze</code> (<em>Conserver la dernière image de l'animation</em>) | <code>remove</code> (<em>Conserver la première image de l'animation</em>)</td>
-  </tr>
-  <tr>
-   <th scope="row">Valeur par défaut</th>
-   <td><code>remove</code></td>
-  </tr>
-  <tr>
-   <th scope="row">Animation</th>
-   <td>Non</td>
-  </tr>
- </tbody>
+  <tbody>
+    <tr>
+      <th scope="row">Valeur</th>
+      <td>
+        <code>freeze</code> (<em>Conserver la dernière image de l'animation</em
+        >) | <code>remove</code> (<em
+          >Conserver la première image de l'animation</em
+        >)
+      </td>
+    </tr>
+    <tr>
+      <th scope="row">Valeur par défaut</th>
+      <td><code>remove</code></td>
+    </tr>
+    <tr>
+      <th scope="row">Animation</th>
+      <td>Non</td>
+    </tr>
+  </tbody>
 </table>
 
-<h2 id="circle">circle</h2>
+## circle
 
-<p>Pour {{SVGElement('circle')}}, <code>fill</code> est un attribut de présentation qui définit la couleur de remplissage du cercle.</p>
+Pour {{SVGElement('circle')}}, `fill` est un attribut de présentation qui définit la couleur de remplissage du cercle.
 
 <table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="row">Valeur</th>
-   <td><strong><a href="/docs/Web/SVG/Content_type#Paint">&lt;paint&gt;</a></strong></td>
-  </tr>
-  <tr>
-   <th scope="row">Valeur par défaut</th>
-   <td><code>black</code></td>
-  </tr>
-  <tr>
-   <th scope="row">Animation</th>
-   <td>Oui</td>
-  </tr>
- </tbody>
+  <tbody>
+    <tr>
+      <th scope="row">Valeur</th>
+      <td>
+        <strong
+          ><a href="/docs/Web/SVG/Content_type#Paint">&#x3C;paint></a></strong
+        >
+      </td>
+    </tr>
+    <tr>
+      <th scope="row">Valeur par défaut</th>
+      <td><code>black</code></td>
+    </tr>
+    <tr>
+      <th scope="row">Animation</th>
+      <td>Oui</td>
+    </tr>
+  </tbody>
 </table>
 
-<div class="note">
-  <p><strong>Note :</strong> <code>fill</code> étant un attribut de présentation, il peut être utilisé comme propriété CSS.</p>
-</div>
+> **Note :** `fill` étant un attribut de présentation, il peut être utilisé comme propriété CSS.
 
-<h2 id="ellipse">ellipse</h2>
+## ellipse
 
-<p>Pour {{SVGElement('ellipse')}}, <code>fill</code> est un attribut de présentation qui définit la couleur de remplissage du cercle.</p>
+Pour {{SVGElement('ellipse')}}, `fill` est un attribut de présentation qui définit la couleur de remplissage du cercle.
 
 <table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="row">Valeur</th>
-   <td><strong><a href="/docs/Web/SVG/Content_type#Paint">&lt;paint&gt;</a></strong></td>
-  </tr>
-  <tr>
-   <th scope="row">Valeur par défaut</th>
-   <td><code>black</code></td>
-  </tr>
-  <tr>
-   <th scope="row">Animation</th>
-   <td>Oui</td>
-  </tr>
- </tbody>
+  <tbody>
+    <tr>
+      <th scope="row">Valeur</th>
+      <td>
+        <strong
+          ><a href="/docs/Web/SVG/Content_type#Paint">&#x3C;paint></a></strong
+        >
+      </td>
+    </tr>
+    <tr>
+      <th scope="row">Valeur par défaut</th>
+      <td><code>black</code></td>
+    </tr>
+    <tr>
+      <th scope="row">Animation</th>
+      <td>Oui</td>
+    </tr>
+  </tbody>
 </table>
 
-<div class="note">
-  <p><strong>Note :</strong> <code>fill</code> étant un attribut de présentation, il peut être utilisé comme propriété CSS.</p>
-</div>
+> **Note :** `fill` étant un attribut de présentation, il peut être utilisé comme propriété CSS.
 
-<h2 id="path">path</h2>
+## path
 
-<p>Pour {{SVGElement('path')}}, <code>fill</code> est un attribut de présentation qui définit la couleur de remplissage de la forme. (<em>Intérieur définit par l'attribut {{SVGAttr('fill-rule')}}</em>)</p>
+Pour {{SVGElement('path')}}, `fill` est un attribut de présentation qui définit la couleur de remplissage de la forme. (_Intérieur définit par l'attribut {{SVGAttr('fill-rule')}}_)
 
 <table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="row">Valeur</th>
-   <td><strong><a href="/docs/Web/SVG/Content_type#Paint">&lt;paint&gt;</a></strong></td>
-  </tr>
-  <tr>
-   <th scope="row">Valeur par défaut</th>
-   <td><code>black</code></td>
-  </tr>
-  <tr>
-   <th scope="row">Animation</th>
-   <td>Oui</td>
-  </tr>
- </tbody>
+  <tbody>
+    <tr>
+      <th scope="row">Valeur</th>
+      <td>
+        <strong
+          ><a href="/docs/Web/SVG/Content_type#Paint">&#x3C;paint></a></strong
+        >
+      </td>
+    </tr>
+    <tr>
+      <th scope="row">Valeur par défaut</th>
+      <td><code>black</code></td>
+    </tr>
+    <tr>
+      <th scope="row">Animation</th>
+      <td>Oui</td>
+    </tr>
+  </tbody>
 </table>
 
-<div class="note">
-  <p><strong>Note :</strong> <code>fill</code> étant un attribut de présentation, il peut être utilisé comme propriété CSS.</p>
-</div>
+> **Note :** `fill` étant un attribut de présentation, il peut être utilisé comme propriété CSS.
 
-<h2 id="polygon">polygon</h2>
+## polygon
 
-<p>Pour {{SVGElement('polygon')}}, <code>fill</code> est un attribut de présentation qui définit la couleur de remplissage de la forme. (<em>Intérieur définit par l'attribut {{SVGAttr('fill-rule')}}</em>)</p>
+Pour {{SVGElement('polygon')}}, `fill` est un attribut de présentation qui définit la couleur de remplissage de la forme. (_Intérieur définit par l'attribut {{SVGAttr('fill-rule')}}_)
 
 <table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="row">Valeur</th>
-   <td><strong><a href="/docs/Web/SVG/Content_type#Paint">&lt;paint&gt;</a></strong></td>
-  </tr>
-  <tr>
-   <th scope="row">Valeur par défaut</th>
-   <td><code>black</code></td>
-  </tr>
-  <tr>
-   <th scope="row">Animation</th>
-   <td>Oui</td>
-  </tr>
- </tbody>
+  <tbody>
+    <tr>
+      <th scope="row">Valeur</th>
+      <td>
+        <strong
+          ><a href="/docs/Web/SVG/Content_type#Paint">&#x3C;paint></a></strong
+        >
+      </td>
+    </tr>
+    <tr>
+      <th scope="row">Valeur par défaut</th>
+      <td><code>black</code></td>
+    </tr>
+    <tr>
+      <th scope="row">Animation</th>
+      <td>Oui</td>
+    </tr>
+  </tbody>
 </table>
 
-<div class="note">
-  <p><strong>Note :</strong> <code>fill</code> étant un attribut de présentation, il peut être utilisé comme propriété CSS.</p>
-</div>
+> **Note :** `fill` étant un attribut de présentation, il peut être utilisé comme propriété CSS.
 
-<h2 id="polyline">polyline</h2>
+## polyline
 
-<p>For {{SVGElement('polyline')}}, <code>fill</code> est un attribut de présentation qui définit la couleur de remplissage de la forme. (<em>Intérieur définit par l'attribut {{SVGAttr('fill-rule')}}</em>)</p>
+For {{SVGElement('polyline')}}, `fill` est un attribut de présentation qui définit la couleur de remplissage de la forme. (_Intérieur définit par l'attribut {{SVGAttr('fill-rule')}}_)
 
 <table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="row">Valeur</th>
-   <td><strong><a href="/docs/Web/SVG/Content_type#Paint">&lt;paint&gt;</a></strong></td>
-  </tr>
-  <tr>
-   <th scope="row">Valeur par défaut</th>
-   <td><code>black</code></td>
-  </tr>
-  <tr>
-   <th scope="row">Animation</th>
-   <td>Oui</td>
-  </tr>
- </tbody>
+  <tbody>
+    <tr>
+      <th scope="row">Valeur</th>
+      <td>
+        <strong
+          ><a href="/docs/Web/SVG/Content_type#Paint">&#x3C;paint></a></strong
+        >
+      </td>
+    </tr>
+    <tr>
+      <th scope="row">Valeur par défaut</th>
+      <td><code>black</code></td>
+    </tr>
+    <tr>
+      <th scope="row">Animation</th>
+      <td>Oui</td>
+    </tr>
+  </tbody>
 </table>
 
-<div class="note">
-  <p><strong>Note :</strong> <code>fill</code> étant un attribut de présentation, il peut être utilisé comme propriété CSS.</p>
-</div>
+> **Note :** `fill` étant un attribut de présentation, il peut être utilisé comme propriété CSS.
 
-<h2 id="rect">rect</h2>
+## rect
 
-<p>Pour {{SVGElement('rect')}}, <code>fill</code> est un attribut de présentation qui définit la couleur de remplissage du rectangle.</p>
+Pour {{SVGElement('rect')}}, `fill` est un attribut de présentation qui définit la couleur de remplissage du rectangle.
 
 <table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="row">Valeur</th>
-   <td><strong><a href="/docs/Web/SVG/Content_type#Paint">&lt;paint&gt;</a></strong></td>
-  </tr>
-  <tr>
-   <th scope="row">Valeur par défaut</th>
-   <td><code>black</code></td>
-  </tr>
-  <tr>
-   <th scope="row">Animation</th>
-   <td>Oui</td>
-  </tr>
- </tbody>
+  <tbody>
+    <tr>
+      <th scope="row">Valeur</th>
+      <td>
+        <strong
+          ><a href="/docs/Web/SVG/Content_type#Paint">&#x3C;paint></a></strong
+        >
+      </td>
+    </tr>
+    <tr>
+      <th scope="row">Valeur par défaut</th>
+      <td><code>black</code></td>
+    </tr>
+    <tr>
+      <th scope="row">Animation</th>
+      <td>Oui</td>
+    </tr>
+  </tbody>
 </table>
 
-<div class="note">
-  <p><strong>Note :</strong> <code>fill</code> étant un attribut de présentation, il peut être utilisé comme propriété CSS.</p>
-</div>
+> **Note :** `fill` étant un attribut de présentation, il peut être utilisé comme propriété CSS.
 
-<h2 id="set">set</h2>
+## set
 
-<p>Pour {{SVGElement('set')}}, <code>fill</code> définit l'état final de l'animation.</p>
+Pour {{SVGElement('set')}}, `fill` définit l'état final de l'animation.
 
 <table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="row">Valeur</th>
-   <td><code>freeze</code> (<em>Conserver la dernière image de l'animation</em>) | <code>remove</code> (<em>Conserver la première image de l'animation</em>)</td>
-  </tr>
-  <tr>
-   <th scope="row">Valeur par défaut</th>
-   <td><code>remove</code></td>
-  </tr>
-  <tr>
-   <th scope="row">Animation</th>
-   <td>Non</td>
-  </tr>
- </tbody>
+  <tbody>
+    <tr>
+      <th scope="row">Valeur</th>
+      <td>
+        <code>freeze</code> (<em>Conserver la dernière image de l'animation</em
+        >) | <code>remove</code> (<em
+          >Conserver la première image de l'animation</em
+        >)
+      </td>
+    </tr>
+    <tr>
+      <th scope="row">Valeur par défaut</th>
+      <td><code>remove</code></td>
+    </tr>
+    <tr>
+      <th scope="row">Animation</th>
+      <td>Non</td>
+    </tr>
+  </tbody>
 </table>
 
-<h2 id="text">text</h2>
+## text
 
-<p>Pour {{SVGElement('text')}}, <code>fill</code> est un attribut de présentation qui définit la couleur du texte.</p>
+Pour {{SVGElement('text')}}, `fill` est un attribut de présentation qui définit la couleur du texte.
 
 <table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="row">Valeur</th>
-   <td><strong><a href="/docs/Web/SVG/Content_type#Paint">&lt;paint&gt;</a></strong></td>
-  </tr>
-  <tr>
-   <th scope="row">Valeur par défaut</th>
-   <td><code>black</code></td>
-  </tr>
-  <tr>
-   <th scope="row">Animation</th>
-   <td>Oui</td>
-  </tr>
- </tbody>
+  <tbody>
+    <tr>
+      <th scope="row">Valeur</th>
+      <td>
+        <strong
+          ><a href="/docs/Web/SVG/Content_type#Paint">&#x3C;paint></a></strong
+        >
+      </td>
+    </tr>
+    <tr>
+      <th scope="row">Valeur par défaut</th>
+      <td><code>black</code></td>
+    </tr>
+    <tr>
+      <th scope="row">Animation</th>
+      <td>Oui</td>
+    </tr>
+  </tbody>
 </table>
 
-<div class="note">
-  <p><strong>Note :</strong> <code>fill</code> étant un attribut de présentation, il peut être utilisé comme propriété CSS.</p>
-</div>
+> **Note :** `fill` étant un attribut de présentation, il peut être utilisé comme propriété CSS.
 
-<h2 id="textPath">textPath</h2>
+## textPath
 
-<p>Pour {{SVGElement('textPath')}}, <code>fill</code> est un attribut de présentation qui définit la couleur du texte.</p>
+Pour {{SVGElement('textPath')}}, `fill` est un attribut de présentation qui définit la couleur du texte.
 
 <table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="row">Valeur</th>
-   <td><strong><a href="/docs/Web/SVG/Content_type#Paint">&lt;paint&gt;</a></strong></td>
-  </tr>
-  <tr>
-   <th scope="row">Valeur par défaut</th>
-   <td><code>black</code></td>
-  </tr>
-  <tr>
-   <th scope="row">Animation</th>
-   <td>Oui</td>
-  </tr>
- </tbody>
+  <tbody>
+    <tr>
+      <th scope="row">Valeur</th>
+      <td>
+        <strong
+          ><a href="/docs/Web/SVG/Content_type#Paint">&#x3C;paint></a></strong
+        >
+      </td>
+    </tr>
+    <tr>
+      <th scope="row">Valeur par défaut</th>
+      <td><code>black</code></td>
+    </tr>
+    <tr>
+      <th scope="row">Animation</th>
+      <td>Oui</td>
+    </tr>
+  </tbody>
 </table>
 
-<div class="note">
-  <p><strong>Note :</strong> <code>fill</code> étant un attribut de présentation, il peut être utilisé comme propriété CSS.</p>
-</div>
+> **Note :** `fill` étant un attribut de présentation, il peut être utilisé comme propriété CSS.
 
-<h2 id="tref">tref</h2>
+## tref
 
-<div class="warning">
-  <p><strong>Attention :</strong> {{SVGElement('tref')}} est déprécié en SVG2 et ne devrait pas être utilisé.</p>
-</div>
+> **Attention :** {{SVGElement('tref')}} est déprécié en SVG2 et ne devrait pas être utilisé.
 
-<p>Pour {{SVGElement('tref')}}, <code>fill</code> est un attribut de présentation qui définit la couleur du texte.</p>
+Pour {{SVGElement('tref')}}, `fill` est un attribut de présentation qui définit la couleur du texte.
 
 <table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="row">Valeur</th>
-   <td><strong><a href="/docs/Web/SVG/Content_type#Paint">&lt;paint&gt;</a></strong></td>
-  </tr>
-  <tr>
-   <th scope="row">Valeur par défaut</th>
-   <td><code>black</code></td>
-  </tr>
-  <tr>
-   <th scope="row">Animation</th>
-   <td>Oui</td>
-  </tr>
- </tbody>
+  <tbody>
+    <tr>
+      <th scope="row">Valeur</th>
+      <td>
+        <strong
+          ><a href="/docs/Web/SVG/Content_type#Paint">&#x3C;paint></a></strong
+        >
+      </td>
+    </tr>
+    <tr>
+      <th scope="row">Valeur par défaut</th>
+      <td><code>black</code></td>
+    </tr>
+    <tr>
+      <th scope="row">Animation</th>
+      <td>Oui</td>
+    </tr>
+  </tbody>
 </table>
 
-<div class="note">
-  <p><strong>Note :</strong> <code>fill</code> étant un attribut de présentation, il peut être utilisé comme propriété CSS.</p>
-</div>
+> **Note :** `fill` étant un attribut de présentation, il peut être utilisé comme propriété CSS.
 
-<h2 id="tspan">tspan</h2>
+## tspan
 
-<p>Pour {{SVGElement('tspan')}}, <code>fill</code> est un attribut de présentation qui définit la couleur du texte.</p>
+Pour {{SVGElement('tspan')}}, `fill` est un attribut de présentation qui définit la couleur du texte.
 
 <table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="row">Valeur</th>
-   <td><strong><a href="/docs/Web/SVG/Content_type#Paint">&lt;paint&gt;</a></strong></td>
-  </tr>
-  <tr>
-   <th scope="row">Valeur par défaut</th>
-   <td><code>black</code></td>
-  </tr>
-  <tr>
-   <th scope="row">Animation</th>
-   <td>Oui</td>
-  </tr>
- </tbody>
+  <tbody>
+    <tr>
+      <th scope="row">Valeur</th>
+      <td>
+        <strong
+          ><a href="/docs/Web/SVG/Content_type#Paint">&#x3C;paint></a></strong
+        >
+      </td>
+    </tr>
+    <tr>
+      <th scope="row">Valeur par défaut</th>
+      <td><code>black</code></td>
+    </tr>
+    <tr>
+      <th scope="row">Animation</th>
+      <td>Oui</td>
+    </tr>
+  </tbody>
 </table>
 
-<div class="note">
-  <p><strong>Note :</strong> <code>fill</code> étant un attribut de présentation, il peut être utilisé comme propriété CSS.</p>
-</div>
+> **Note :** `fill` étant un attribut de présentation, il peut être utilisé comme propriété CSS.
 
-<h2 id="Spécifications">Spécifications</h2>
+## Spécifications
 
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">Statut</th>
-   <th scope="col">Commentaire</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName("SVG Animations 2", "#FillAttribute", "transform")}}</td>
-   <td>{{Spec2("SVG Animations 2")}}</td>
-   <td>Définition pour les animations.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName("SVG2", "painting.html#FillProperty", "fill")}}</td>
-   <td>{{Spec2("SVG2")}}</td>
-   <td>Définition pour les formes et le texte.<br>
-    Ajoute <code>context-fill</code> et <code>context-stroke</code>.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName("SVG1.1", "animate.html#FillAttribute", "fill")}}</td>
-   <td>{{Spec2("SVG1.1")}}</td>
-   <td>Définition initiale pour les animations.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName("SVG1.1", "painting.html#FillProperty", "fill")}}</td>
-   <td>{{Spec2("SVG1.1")}}</td>
-   <td>Définition initiale pour les formes et le texte.</td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                                                        | Statut                                   | Commentaire                                                                        |
+| ------------------------------------------------------------------------------------ | ---------------------------------------- | ---------------------------------------------------------------------------------- |
+| {{SpecName("SVG Animations 2", "#FillAttribute", "transform")}} | {{Spec2("SVG Animations 2")}} | Définition pour les animations.                                                    |
+| {{SpecName("SVG2", "painting.html#FillProperty", "fill")}}         | {{Spec2("SVG2")}}                 | Définition pour les formes et le texte. Ajoute `context-fill` et `context-stroke`. |
+| {{SpecName("SVG1.1", "animate.html#FillAttribute", "fill")}}     | {{Spec2("SVG1.1")}}                 | Définition initiale pour les animations.                                           |
+| {{SpecName("SVG1.1", "painting.html#FillProperty", "fill")}}     | {{Spec2("SVG1.1")}}                 | Définition initiale pour les formes et le texte.                                   |
 
-<h2 id="Browser_Compatibility">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("svg.attributes.presentation.fill")}}</p>
+{{Compat("svg.attributes.presentation.fill")}}
 
-<div class="note">
-  <p><strong>Note :</strong> Pour plus d'informations sur les valeurs de <code>context-fill</code> (et <code>context-stroke</code>) dans des documents HTML, voir la documentation pour la propriété non-standard {{cssxref("-moz-context-properties")}}.</p>
-</div>  
+> **Note :** Pour plus d'informations sur les valeurs de `context-fill` (et `context-stroke`) dans des documents HTML, voir la documentation pour la propriété non-standard {{cssxref("-moz-context-properties")}}.
diff --git a/files/fr/web/svg/attribute/height/index.md b/files/fr/web/svg/attribute/height/index.md
index d0caca7baf..e8b1b9f7e9 100644
--- a/files/fr/web/svg/attribute/height/index.md
+++ b/files/fr/web/svg/attribute/height/index.md
@@ -6,66 +6,91 @@ tags:
   - SVG
 translation_of: Web/SVG/Attribute/height
 ---
-<p>« <a href="/fr/SVG/Attribute" title="en/SVG/Attribute">SVG Attribute reference home</a></p>
+« [SVG Attribute reference home](/fr/SVG/Attribute "en/SVG/Attribute")
 
-<p>Cet attribut indique une dimension verticale <code>&lt;length&gt;</code> dans le système de coordonnées. La donnée (ou coordonnée) définie par cet attribut dépend de l'élément sur lequel il est appliqué. La plupart du temps, il représente la hauteur de la région rectangulaire composant l'élément (voir les exceptions dans la documentation pour chaque type d'élément).</p>
+Cet attribut indique une dimension verticale `<length>` dans le système de coordonnées. La donnée (ou coordonnée) définie par cet attribut dépend de l'élément sur lequel il est appliqué. La plupart du temps, il représente la hauteur de la région rectangulaire composant l'élément (voir les exceptions dans la documentation pour chaque type d'élément).
 
-<p>Cet attribut doit être spécifié, hormis pour les éléments {{ SVGElement("svg") }} dont la valeur par défaut est de 100% et {{ SVGElement("mask") }} dont la valeur par défaut est de 120%.</p>
+Cet attribut doit être spécifié, hormis pour les éléments {{ SVGElement("svg") }} dont la valeur par défaut est de 100% et {{ SVGElement("mask") }} dont la valeur par défaut est de 120%.
 
-<h2 id="Contexte_d'utilisation">Contexte d'utilisation</h2>
+## Contexte d'utilisation
 
 <table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="row">Catégories</th>
-   <td>Aucune</td>
-  </tr>
-  <tr>
-   <th scope="row">Valeur</th>
-   <td><a href="/fr/SVG/Content_type#Length" title="https://developer.mozilla.org/en/SVG/Content_type#Length">&lt;length&gt;</a></td>
-  </tr>
-  <tr>
-   <th scope="row">Animable</th>
-   <td>Oui</td>
-  </tr>
-  <tr>
-   <th scope="row">Documents normatif</th>
-   <td><a href="http://www.w3.org/TR/SVG/extend.html#ForeignObjectElementHeightAttribute">SVG 1.1 (2nd Edition): foreignObject element</a><br>
-    <a href="http://www.w3.org/TR/SVG/struct.html#ImageElementHeightAttribute">SVG 1.1 (2nd Edition): image element</a><br>
-    <a href="http://www.w3.org/TR/SVG/pservers.html#PatternElementHeightAttribute">SVG 1.1 (2nd Edition): pattern element</a><br>
-    <a href="http://www.w3.org/TR/SVG/shapes.html#RectElementHeightAttribute">SVG 1.1 (2nd Edition): rect element</a><br>
-    <a href="http://www.w3.org/TR/SVG/struct.html#SVGElementHeightAttribute">SVG 1.1 (2nd Edition): svg element</a><br>
-    <a href="http://www.w3.org/TR/SVG/struct.html#UseElementHeightAttribute">SVG 1.1 (2nd Edition): use element</a><br>
-    <a href="http://www.w3.org/TR/SVG/filters.html#FilterPrimitiveHeightAttribute">SVG 1.1 (2nd Edition): Filter primitive</a><br>
-    <a href="http://www.w3.org/TR/SVG/masking.html#MaskElementHeightAttribute">SVG 1.1 (2nd Edition): mask element</a></td>
-  </tr>
- </tbody>
+  <tbody>
+    <tr>
+      <th scope="row">Catégories</th>
+      <td>Aucune</td>
+    </tr>
+    <tr>
+      <th scope="row">Valeur</th>
+      <td>
+        <a
+          href="/fr/SVG/Content_type#Length"
+          title="https://developer.mozilla.org/en/SVG/Content_type#Length"
+          >&#x3C;length></a
+        >
+      </td>
+    </tr>
+    <tr>
+      <th scope="row">Animable</th>
+      <td>Oui</td>
+    </tr>
+    <tr>
+      <th scope="row">Documents normatif</th>
+      <td>
+        <a
+          href="http://www.w3.org/TR/SVG/extend.html#ForeignObjectElementHeightAttribute"
+          >SVG 1.1 (2nd Edition): foreignObject element</a
+        ><br /><a
+          href="http://www.w3.org/TR/SVG/struct.html#ImageElementHeightAttribute"
+          >SVG 1.1 (2nd Edition): image element</a
+        ><br /><a
+          href="http://www.w3.org/TR/SVG/pservers.html#PatternElementHeightAttribute"
+          >SVG 1.1 (2nd Edition): pattern element</a
+        ><br /><a
+          href="http://www.w3.org/TR/SVG/shapes.html#RectElementHeightAttribute"
+          >SVG 1.1 (2nd Edition): rect element</a
+        ><br /><a
+          href="http://www.w3.org/TR/SVG/struct.html#SVGElementHeightAttribute"
+          >SVG 1.1 (2nd Edition): svg element</a
+        ><br /><a
+          href="http://www.w3.org/TR/SVG/struct.html#UseElementHeightAttribute"
+          >SVG 1.1 (2nd Edition): use element</a
+        ><br /><a
+          href="http://www.w3.org/TR/SVG/filters.html#FilterPrimitiveHeightAttribute"
+          >SVG 1.1 (2nd Edition): Filter primitive</a
+        ><br /><a
+          href="http://www.w3.org/TR/SVG/masking.html#MaskElementHeightAttribute"
+          >SVG 1.1 (2nd Edition): mask element</a
+        >
+      </td>
+    </tr>
+  </tbody>
 </table>
 
-<p>{{ page("fr/docs/Web/SVG/Content_type","Length") }}</p>
+{{ page("fr/docs/Web/SVG/Content_type","Length") }}
 
-<h2 id="Exemple">Exemple</h2>
+## Exemple
 
-<pre class="brush: xml">&lt;?xml version="1.0"?&gt;
-&lt;svg width="120" height="120"
+```xml
+<?xml version="1.0"?>
+<svg width="120" height="120"
      viewBox="0 0 120 120"
-     xmlns="http://www.w3.org/2000/svg"&gt;
+     xmlns="http://www.w3.org/2000/svg">
 
-  &lt;rect x="10" y="10" width="100" height="100"/&gt;
-&lt;/svg&gt;</pre>
+  <rect x="10" y="10" width="100" height="100"/>
+</svg>
+```
 
-<h2 id="Eléments">Eléments</h2>
+## Eléments
 
-<p>Les éléments suivants peuvent utiliser l'attribut <code>height</code> :</p>
+Les éléments suivants peuvent utiliser l'attribut `height` :
 
-<ul>
- <li><a href="/fr/SVG/Element#FilterPrimitive" title="en/SVG/Element#FilterPrimitive">Filter primitive elements</a> »</li>
- <li>{{ SVGElement("filter") }}</li>
- <li>{{ SVGElement("foreignObject") }}</li>
- <li>{{ SVGElement("image") }}</li>
- <li>{{ SVGElement("pattern") }}</li>
- <li>{{ SVGElement("rect") }}</li>
- <li>{{ SVGElement("svg") }}</li>
- <li>{{ SVGElement("use") }}</li>
- <li>{{ SVGElement("mask") }}</li>
-</ul>
+- [Filter primitive elements](/fr/SVG/Element#FilterPrimitive "en/SVG/Element#FilterPrimitive") »
+- {{ SVGElement("filter") }}
+- {{ SVGElement("foreignObject") }}
+- {{ SVGElement("image") }}
+- {{ SVGElement("pattern") }}
+- {{ SVGElement("rect") }}
+- {{ SVGElement("svg") }}
+- {{ SVGElement("use") }}
+- {{ SVGElement("mask") }}
diff --git a/files/fr/web/svg/attribute/in/index.md b/files/fr/web/svg/attribute/in/index.md
index 3c4eb4f139..f4ce9edcd6 100644
--- a/files/fr/web/svg/attribute/in/index.md
+++ b/files/fr/web/svg/attribute/in/index.md
@@ -7,97 +7,105 @@ tags:
   - SVG Filter
 translation_of: Web/SVG/Attribute/in
 ---
-<p>« <a href="/fr/SVG/Attribute" title="en/SVG/Attribute">SVG Attribute reference home</a></p>
+« [SVG Attribute reference home](/fr/SVG/Attribute "en/SVG/Attribute")
 
-<p>L'attribut <code>in</code> identifie l'entrée pour la primitive de filtre donnée.</p>
+L'attribut `in` identifie l'entrée pour la primitive de filtre donnée.
 
-<p>Cet attribut peut prendre pour valeur un des six mots-clés définis ci-dessous ou la valeur d'un attribut {{SVGAttr("result")}} d'une primitive précédente dans le même élément {{SVGElement("filter")}}. Si aucune valeur n'est définit et qu'il s'agit de la première primitive du filtre, alors la valeur par défaut est <code>SourceGraphic</code>. Si aucune valeur n'est définit et qu'il ne s'agit pas de la première primitive, alors la valeur par défaut est le résultat de la primitive précédente.<br>
- <br>
- Si la même valeur de {{SVGAttr("result")}} apparaît à de multiples endroits dans un élément {{SVGElement("filter")}} donné, c'est la primitive de filtre avec cette valeur de {{SVGAttr("result")}} précédant la primitive en cours qui est la plus proche qui est utilisée.</p>
+Cet attribut peut prendre pour valeur un des six mots-clés définis ci-dessous ou la valeur d'un attribut {{SVGAttr("result")}} d'une primitive précédente dans le même élément {{SVGElement("filter")}}. Si aucune valeur n'est définit et qu'il s'agit de la première primitive du filtre, alors la valeur par défaut est `SourceGraphic`. Si aucune valeur n'est définit et qu'il ne s'agit pas de la première primitive, alors la valeur par défaut est le résultat de la primitive précédente.
 
-<h2 id="Contexte_d'utilisation">Contexte d'utilisation</h2>
+Si la même valeur de {{SVGAttr("result")}} apparaît à de multiples endroits dans un élément {{SVGElement("filter")}} donné, c'est la primitive de filtre avec cette valeur de {{SVGAttr("result")}} précédant la primitive en cours qui est la plus proche qui est utilisée.
+
+## Contexte d'utilisation
 
 <table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="row">Catégories</th>
-   <td>None</td>
-  </tr>
-  <tr>
-   <th scope="row">Valeur</th>
-   <td><code>SourceGraphic</code> | <code>SourceAlpha</code> | <code>BackgroundImage</code> | <code>BackgroundAlpha</code> | <code>FillPaint</code> | <code>StrokePaint</code> | &lt;filter-primitive-reference&gt;</td>
-  </tr>
-  <tr>
-   <th scope="row">Animation</th>
-   <td>Oui</td>
-  </tr>
-  <tr>
-   <th scope="row">Document normatif</th>
-   <td><a href="http://www.w3.org/TR/SVG11/filters.html#FilterPrimitiveInAttribute">SVG 1.1 (2nd Edition)</a></td>
-  </tr>
- </tbody>
+  <tbody>
+    <tr>
+      <th scope="row">Catégories</th>
+      <td>None</td>
+    </tr>
+    <tr>
+      <th scope="row">Valeur</th>
+      <td>
+        <code>SourceGraphic</code> | <code>SourceAlpha</code> |
+        <code>BackgroundImage</code> | <code>BackgroundAlpha</code> |
+        <code>FillPaint</code> | <code>StrokePaint</code> |
+        &#x3C;filter-primitive-reference>
+      </td>
+    </tr>
+    <tr>
+      <th scope="row">Animation</th>
+      <td>Oui</td>
+    </tr>
+    <tr>
+      <th scope="row">Document normatif</th>
+      <td>
+        <a
+          href="http://www.w3.org/TR/SVG11/filters.html#FilterPrimitiveInAttribute"
+          >SVG 1.1 (2nd Edition)</a
+        >
+      </td>
+    </tr>
+  </tbody>
 </table>
 
-<dl>
- <dt>SourceGraphic</dt>
- <dd>Ce mot-clé désigne l'élément graphique sur lequel s'applique le {{SVGElement("filter")}}.</dd>
- <dt>SourceAlpha</dt>
- <dd><code>SourceAlpha</code> fonctionne de la même manière que <code>SourceGraphic</code> à la différence près que seul le canal alpha (la transparence) est utilisé.</dd>
- <dt>BackgroundImage</dt>
- <dd>Ce mot-clé désigne une capture de l'image du document SVG sous la région du filtre au moment où l'élément {{SVGElement("filter")}} a été invoqué.</dd>
- <dt>BackgroundAlpha</dt>
- <dd>Même principe que <code>BackgroundImage</code> à la différence près que seul le canal alpha est utilisé.</dd>
- <dt>FillPaint</dt>
- <dd>Ce mot-clé désigné la valeur de la propriété {{SVGAttr("fill")}} sur l'élément cible du filtre. Dans la plupart des cas, <code>FillPaint</code> est uniformément opaque, mais ce n'est pas le cas si la forme est remplit par un dégradé ou un motif qui contient des zones transparentes ou semi-transparentes.</dd>
- <dt>StrokePaint</dt>
- <dd>Ce mot-clé désigne la valeur de la propriété {{SVGAttr("stroke")}} sur l'élément cible du filtre. Dans la plupart des cas, <code>StrokePaint</code> est uniformément opaque, mais ce n'est pas le cas si la forme est remplit par un dégradé ou un motif qui contient des zones transparentes ou semi-transparentes.</dd>
-</dl>
+- SourceGraphic
+  - : Ce mot-clé désigne l'élément graphique sur lequel s'applique le {{SVGElement("filter")}}.
+- SourceAlpha
+  - : `SourceAlpha` fonctionne de la même manière que `SourceGraphic` à la différence près que seul le canal alpha (la transparence) est utilisé.
+- BackgroundImage
+  - : Ce mot-clé désigne une capture de l'image du document SVG sous la région du filtre au moment où l'élément {{SVGElement("filter")}} a été invoqué.
+- BackgroundAlpha
+  - : Même principe que `BackgroundImage` à la différence près que seul le canal alpha est utilisé.
+- FillPaint
+  - : Ce mot-clé désigné la valeur de la propriété {{SVGAttr("fill")}} sur l'élément cible du filtre. Dans la plupart des cas, `FillPaint` est uniformément opaque, mais ce n'est pas le cas si la forme est remplit par un dégradé ou un motif qui contient des zones transparentes ou semi-transparentes.
+- StrokePaint
+  - : Ce mot-clé désigne la valeur de la propriété {{SVGAttr("stroke")}} sur l'élément cible du filtre. Dans la plupart des cas, `StrokePaint` est uniformément opaque, mais ce n'est pas le cas si la forme est remplit par un dégradé ou un motif qui contient des zones transparentes ou semi-transparentes.
 
-<h2 id="Contournement_pour_BackgroundImage">Contournement pour BackgroundImage</h2>
+## Contournement pour BackgroundImage
 
-<p>À la place de <code>in="BackgroundImage"</code>, on peut importer une image à fusionner à l'intérieur du filtre avec l'élément <code>&lt;feImage&gt;</code>.</p>
+À la place de `in="BackgroundImage"`, on peut importer une image à fusionner à l'intérieur du filtre avec l'élément `<feImage>`.
 
-<pre class="brush: html">&lt;div style="width: 420px; height: 220px;"&gt;
-&lt;svg style="width:200px; height:200px; display: inline;" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"&gt;
-  &lt;defs&gt;
-    &lt;filter id="backgroundMultiply"&gt;
-      &lt;!-- Ça ne marchera pas. --&gt;
-      &lt;feBlend in="BackgroundImage" in2="SourceGraphic" mode="multiply"/&gt;
-    &lt;/filter&gt;
-  &lt;/defs&gt;
-  &lt;image xlink:href="mdn_logo_only_color.png" x="10%" y="10%" width="80%" height="80%"/&gt;
-  &lt;circle cx="50%" cy="40%" r="40%" fill="#c00" style="filter:url(#backgroundMultiply);" /&gt;
-&lt;/svg&gt;
+```html
+<div style="width: 420px; height: 220px;">
+<svg style="width:200px; height:200px; display: inline;" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+  <defs>
+    <filter id="backgroundMultiply">
+      <!-- Ça ne marchera pas. -->
+      <feBlend in="BackgroundImage" in2="SourceGraphic" mode="multiply"/>
+    </filter>
+  </defs>
+  <image xlink:href="mdn_logo_only_color.png" x="10%" y="10%" width="80%" height="80%"/>
+  <circle cx="50%" cy="40%" r="40%" fill="#c00" style="filter:url(#backgroundMultiply);" />
+</svg>
 
-&lt;svg style="width:200px; height:200px; display: inline;" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"&gt;
-  &lt;defs&gt;
-    &lt;filter id="imageMultiply"&gt;
-      &lt;!-- Solution de contournement. --&gt;
-      &lt;feImage xlink:href="mdn_logo_only_color.png" x="10%" y="10%" width="80%" height="80%"/&gt;
-      &lt;feBlend in2="SourceGraphic" mode="multiply"/&gt;
-    &lt;/filter&gt;
-  &lt;/defs&gt;
-  &lt;circle cx="50%" cy="40%" r="40%" fill="#c00" style="filter:url(#imageMultiply);"/&gt;
-&lt;/svg&gt;
-&lt;/div&gt;</pre>
+<svg style="width:200px; height:200px; display: inline;" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+  <defs>
+    <filter id="imageMultiply">
+      <!-- Solution de contournement. -->
+      <feImage xlink:href="mdn_logo_only_color.png" x="10%" y="10%" width="80%" height="80%"/>
+      <feBlend in2="SourceGraphic" mode="multiply"/>
+    </filter>
+  </defs>
+  <circle cx="50%" cy="40%" r="40%" fill="#c00" style="filter:url(#imageMultiply);"/>
+</svg>
+</div>
+```
 
-<p>{{ EmbedLiveSample('Contournement_pour_BackgroundImage') }}</p>
+{{ EmbedLiveSample('Contournement_pour_BackgroundImage') }}
 
-<h2>Éléments</h2>
+## Éléments
 
-<p>Les éléments suivants peuvent utiliser l'attribut  <code>in</code>:</p>
+Les éléments suivants peuvent utiliser l'attribut  `in`:
 
-<ul>
- <li>{{SVGElement("feBlend")}}</li>
- <li>{{SVGElement("feColorMatrix")}}</li>
- <li>{{SVGElement("feComponentTransfer")}}</li>
- <li>{{SVGElement("feComposite")}}</li>
- <li>{{SVGElement("feConvolveMatrix")}}</li>
- <li>{{SVGElement("feDiffuseLighting")}}</li>
- <li>{{SVGElement("feDisplacementMap")}}</li>
- <li>{{SVGElement("feGaussianBlur")}}</li>
- <li>{{SVGElement("feMorphology")}}</li>
- <li>{{SVGElement("feOffset")}}</li>
- <li>{{SVGElement("feSpecularLighting")}}</li>
- <li>{{SVGElement("feTile")}}</li>
-</ul>
+- {{SVGElement("feBlend")}}
+- {{SVGElement("feColorMatrix")}}
+- {{SVGElement("feComponentTransfer")}}
+- {{SVGElement("feComposite")}}
+- {{SVGElement("feConvolveMatrix")}}
+- {{SVGElement("feDiffuseLighting")}}
+- {{SVGElement("feDisplacementMap")}}
+- {{SVGElement("feGaussianBlur")}}
+- {{SVGElement("feMorphology")}}
+- {{SVGElement("feOffset")}}
+- {{SVGElement("feSpecularLighting")}}
+- {{SVGElement("feTile")}}
diff --git a/files/fr/web/svg/attribute/index.md b/files/fr/web/svg/attribute/index.md
index aa176af715..31d76ba1a5 100644
--- a/files/fr/web/svg/attribute/index.md
+++ b/files/fr/web/svg/attribute/index.md
@@ -10,472 +10,418 @@ tags:
   - TopicStub
 translation_of: Web/SVG/Attribute
 ---
-<div>{{SVGRef}}</div>
-
-<p>Les éléments SVG peuvent être modifiés en utilisant des attributs qui spécifient comment les éléments doivent être traités ou présentés.</p>
-
-<p>Ci-dessous, la liste de tous les attributs disponibles en SVG ainsi que des liens vers leur documentation pour vous aider à apprendre sur quels éléments ils s'appliquent et comment ils fonctionnent.</p>
-
-<h2 id="Attributs_SVG_de_A_à_Z">Attributs SVG de A à Z</h2>
-
-
-<h3 id="A">A</h3>
-
-<ul>
- <li>{{SVGAttr("accent-height")}}</li>
- <li>{{SVGAttr("accumulate")}}</li>
- <li>{{SVGAttr("additive")}}</li>
- <li>{{SVGAttr("alignment-baseline")}}</li>
- <li>{{SVGAttr("allowReorder")}}</li>
- <li>{{SVGAttr("alphabetic")}}</li>
- <li>{{SVGAttr("amplitude")}}</li>
- <li>{{SVGAttr("arabic-form")}}</li>
- <li>{{SVGAttr("ascent")}}</li>
- <li>{{SVGAttr("attributeName")}}</li>
- <li>{{SVGAttr("attributeType")}}</li>
- <li>{{SVGAttr("autoReverse")}}</li>
- <li>{{SVGAttr("azimuth")}}</li>
-</ul>
-
-<h3 id="B">B</h3>
-
-<ul>
- <li>{{SVGAttr("baseFrequency")}}</li>
- <li>{{SVGAttr("baseline-shift")}}</li>
- <li>{{SVGAttr("baseProfile")}}</li>
- <li>{{SVGAttr("bbox")}}</li>
- <li>{{SVGAttr("begin")}}</li>
- <li>{{SVGAttr("bias")}}</li>
- <li>{{SVGAttr("by")}}</li>
-</ul>
-
-<h3 id="C">C</h3>
-
-<ul>
- <li>{{SVGAttr("calcMode")}}</li>
- <li>{{SVGAttr("cap-height")}}</li>
- <li>{{SVGAttr("class")}}</li>
- <li>{{SVGAttr("clip")}}</li>
- <li>{{SVGAttr("clipPathUnits")}}</li>
- <li>{{SVGAttr("clip-path")}}</li>
- <li>{{SVGAttr("clip-rule")}}</li>
- <li>{{SVGAttr("color")}}</li>
- <li>{{SVGAttr("color-interpolation")}}</li>
- <li>{{SVGAttr("color-interpolation-filters")}}</li>
- <li>{{SVGAttr("color-profile")}}</li>
- <li>{{SVGAttr("color-rendering")}}</li>
- <li>{{SVGAttr("contentScriptType")}}</li>
- <li>{{SVGAttr("contentStyleType")}}</li>
- <li>{{SVGAttr("cursor")}}</li>
- <li>{{SVGAttr("cx")}}</li>
- <li>{{SVGAttr("cy")}}</li>
-</ul>
-
-<h3 id="D">D</h3>
-
-<ul>
- <li>{{SVGAttr("d")}}</li>
- <li>{{SVGAttr("decelerate")}}</li>
- <li>{{SVGAttr("descent")}}</li>
- <li>{{SVGAttr("diffuseConstant")}}</li>
- <li>{{SVGAttr("direction")}}</li>
- <li>{{SVGAttr("display")}}</li>
- <li>{{SVGAttr("divisor")}}</li>
- <li>{{SVGAttr("dominant-baseline")}}</li>
- <li>{{SVGAttr("dur")}}</li>
- <li>{{SVGAttr("dx")}}</li>
- <li>{{SVGAttr("dy")}}</li>
-</ul>
-
-<h3 id="E">E</h3>
-
-<ul>
- <li>{{SVGAttr("edgeMode")}}</li>
- <li>{{SVGAttr("elevation")}}</li>
- <li>{{SVGAttr("enable-background")}}</li>
- <li>{{SVGAttr("end")}}</li>
- <li>{{SVGAttr("exponent")}}</li>
- <li>{{SVGAttr("externalResourcesRequired")}}</li>
-</ul>
-
-<h3 id="F">F</h3>
-
-<ul>
- <li>{{SVGAttr("fill")}}</li>
- <li>{{SVGAttr("fill-opacity")}}</li>
- <li>{{SVGAttr("fill-rule")}}</li>
- <li>{{SVGAttr("filter")}}</li>
- <li>{{SVGAttr("filterRes")}}</li>
- <li>{{SVGAttr("filterUnits")}}</li>
- <li>{{SVGAttr("flood-color")}}</li>
- <li>{{SVGAttr("flood-opacity")}}</li>
- <li>{{SVGAttr("font-family")}}</li>
- <li>{{SVGAttr("font-size")}}</li>
- <li>{{SVGAttr("font-size-adjust")}}</li>
- <li>{{SVGAttr("font-stretch")}}</li>
- <li>{{SVGAttr("font-style")}}</li>
- <li>{{SVGAttr("font-variant")}}</li>
- <li>{{SVGAttr("font-weight")}}</li>
- <li>{{SVGAttr("format")}}</li>
- <li>{{SVGAttr("from")}}</li>
- <li>{{SVGAttr("fr")}}</li>
- <li>{{SVGAttr("fx")}}</li>
- <li>{{SVGAttr("fy")}}</li>
-</ul>
-
-<h3 id="G">G</h3>
-
-<ul>
- <li>{{SVGAttr("g1")}}</li>
- <li>{{SVGAttr("g2")}}</li>
- <li>{{SVGAttr("glyph-name")}}</li>
- <li>{{SVGAttr("glyph-orientation-horizontal")}}</li>
- <li>{{SVGAttr("glyph-orientation-vertical")}}</li>
- <li>{{SVGAttr("glyphRef")}}</li>
- <li>{{SVGAttr("gradientTransform")}}</li>
- <li>{{SVGAttr("gradientUnits")}}</li>
-</ul>
-
-<h3 id="H">H</h3>
-
-<ul>
- <li>{{SVGAttr("hanging")}}</li>
- <li>{{SVGAttr("height")}}</li>
- <li>{{SVGAttr("href")}}</li>
- <li>{{SVGAttr("hreflang")}}</li>
- <li>{{SVGAttr("horiz-adv-x")}}</li>
- <li>{{SVGAttr("horiz-origin-x")}}</li>
-</ul>
-
-<h3 id="I">I</h3>
-
-<ul>
- <li>{{SVGAttr("id")}}</li>
- <li>{{SVGAttr("ideographic")}}</li>
- <li>{{SVGAttr("image-rendering")}}</li>
- <li>{{SVGAttr("in")}}</li>
- <li>{{SVGAttr("in2")}}</li>
- <li>{{SVGAttr("intercept")}}</li>
-</ul>
-
-<h3 id="K">K</h3>
-
-<ul>
- <li>{{SVGAttr("k")}}</li>
- <li>{{SVGAttr("k1")}}</li>
- <li>{{SVGAttr("k2")}}</li>
- <li>{{SVGAttr("k3")}}</li>
- <li>{{SVGAttr("k4")}}</li>
- <li>{{SVGAttr("kernelMatrix")}}</li>
- <li>{{SVGAttr("kernelUnitLength")}}</li>
- <li>{{SVGAttr("kerning")}}</li>
- <li>{{SVGAttr("keyPoints")}}</li>
- <li>{{SVGAttr("keySplines")}}</li>
- <li>{{SVGAttr("keyTimes")}}</li>
-</ul>
-
-<h3 id="L">L</h3>
-
-<ul>
- <li>{{SVGAttr("lang")}}</li>
- <li>{{SVGAttr("lengthAdjust")}}</li>
- <li>{{SVGAttr("letter-spacing")}}</li>
- <li>{{SVGAttr("lighting-color")}}</li>
- <li>{{SVGAttr("limitingConeAngle")}}</li>
- <li>{{SVGAttr("local")}}</li>
-</ul>
-
-<h3 id="M">M</h3>
-
-<ul>
- <li>{{SVGAttr("marker-end")}}</li>
- <li>{{SVGAttr("marker-mid")}}</li>
- <li>{{SVGAttr("marker-start")}}</li>
- <li>{{SVGAttr("markerHeight")}}</li>
- <li>{{SVGAttr("markerUnits")}}</li>
- <li>{{SVGAttr("markerWidth")}}</li>
- <li>{{SVGAttr("mask")}}</li>
- <li>{{SVGAttr("maskContentUnits")}}</li>
- <li>{{SVGAttr("maskUnits")}}</li>
- <li>{{SVGAttr("mathematical")}}</li>
- <li>{{SVGAttr("max")}}</li>
- <li>{{SVGAttr("media")}}</li>
- <li>{{SVGAttr("method")}}</li>
- <li>{{SVGAttr("min")}}</li>
- <li>{{SVGAttr("mode")}}</li>
-</ul>
-
-<h3 id="N">N</h3>
-
-<ul>
- <li>{{SVGAttr("name")}}</li>
- <li>{{SVGAttr("numOctaves")}}</li>
-</ul>
-
-<h3 id="O">O</h3>
-
-<ul>
- <li>{{SVGAttr("offset")}}</li>
- <li>{{SVGAttr("opacity")}}</li>
- <li>{{SVGAttr("operator")}}</li>
- <li>{{SVGAttr("order")}}</li>
- <li>{{SVGAttr("orient")}}</li>
- <li>{{SVGAttr("orientation")}}</li>
- <li>{{SVGAttr("origin")}}</li>
- <li>{{SVGAttr("overflow")}}</li>
- <li>{{SVGAttr("overline-position")}}</li>
- <li>{{SVGAttr("overline-thickness")}}</li>
-</ul>
-
-<h3 id="P">P</h3>
-
-<ul>
- <li>{{SVGAttr("panose-1")}}</li>
- <li>{{SVGAttr("paint-order")}}</li>
- <li>{{SVGAttr("path")}}</li>
- <li>{{SVGAttr("pathLength")}}</li>
- <li>{{SVGAttr("patternContentUnits")}}</li>
- <li>{{SVGAttr("patternTransform")}}</li>
- <li>{{SVGAttr("patternUnits")}}</li>
- <li>{{SVGAttr("ping")}}</li>
- <li>{{SVGAttr("pointer-events")}}</li>
- <li>{{SVGAttr("points")}}</li>
- <li>{{SVGAttr("pointsAtX")}}</li>
- <li>{{SVGAttr("pointsAtY")}}</li>
- <li>{{SVGAttr("pointsAtZ")}}</li>
- <li>{{SVGAttr("preserveAlpha")}}</li>
- <li>{{SVGAttr("preserveAspectRatio")}}</li>
- <li>{{SVGAttr("primitiveUnits")}}</li>
-</ul>
-
-<h3 id="R">R</h3>
-
-<ul>
- <li>{{SVGAttr("r")}}</li>
- <li>{{SVGAttr("radius")}}</li>
- <li>{{SVGAttr("referrerPolicy")}}</li>
- <li>{{SVGAttr("refX")}}</li>
- <li>{{SVGAttr("refY")}}</li>
- <li>{{SVGAttr("rel")}}</li>
- <li>{{SVGAttr("rendering-intent")}}</li>
- <li>{{SVGAttr("repeatCount")}}</li>
- <li>{{SVGAttr("repeatDur")}}</li>
- <li>{{SVGAttr("requiredExtensions")}}</li>
- <li>{{SVGAttr("requiredFeatures")}}</li>
- <li>{{SVGAttr("restart")}}</li>
- <li>{{SVGAttr("result")}}</li>
- <li>{{SVGAttr("rotate")}}</li>
- <li>{{SVGAttr("rx")}}</li>
- <li>{{SVGAttr("ry")}}</li>
-</ul>
-
-<h3 id="S">S</h3>
-
-<ul>
- <li>{{SVGAttr("scale")}}</li>
- <li>{{SVGAttr("seed")}}</li>
- <li>{{SVGAttr("shape-rendering")}}</li>
- <li>{{SVGAttr("slope")}}</li>
- <li>{{SVGAttr("spacing")}}</li>
- <li>{{SVGAttr("specularConstant")}}</li>
- <li>{{SVGAttr("specularExponent")}}</li>
- <li>{{SVGAttr("speed")}}</li>
- <li>{{SVGAttr("spreadMethod")}}</li>
- <li>{{SVGAttr("startOffset")}}</li>
- <li>{{SVGAttr("stdDeviation")}}</li>
- <li>{{SVGAttr("stemh")}}</li>
- <li>{{SVGAttr("stemv")}}</li>
- <li>{{SVGAttr("stitchTiles")}}</li>
- <li>{{SVGAttr("stop-color")}}</li>
- <li>{{SVGAttr("stop-opacity")}}</li>
- <li>{{SVGAttr("strikethrough-position")}}</li>
- <li>{{SVGAttr("strikethrough-thickness")}}</li>
- <li>{{SVGAttr("string")}}</li>
- <li>{{SVGAttr("stroke")}}</li>
- <li>{{SVGAttr("stroke-dasharray")}}</li>
- <li>{{SVGAttr("stroke-dashoffset")}}</li>
- <li>{{SVGAttr("stroke-linecap")}}</li>
- <li>{{SVGAttr("stroke-linejoin")}}</li>
- <li>{{SVGAttr("stroke-miterlimit")}}</li>
- <li>{{SVGAttr("stroke-opacity")}}</li>
- <li>{{SVGAttr("stroke-width")}}</li>
- <li>{{SVGAttr("style")}}</li>
- <li>{{SVGAttr("surfaceScale")}}</li>
- <li>{{SVGAttr("systemLanguage")}}</li>
-</ul>
-
-<h3 id="T">T</h3>
-
-<ul>
- <li>{{SVGAttr("tabindex")}}</li>
- <li>{{SVGAttr("tableValues")}}</li>
- <li>{{SVGAttr("target")}}</li>
- <li>{{SVGAttr("targetX")}}</li>
- <li>{{SVGAttr("targetY")}}</li>
- <li>{{SVGAttr("text-anchor")}}</li>
- <li>{{SVGAttr("text-decoration")}}</li>
- <li>{{SVGAttr("text-rendering")}}</li>
- <li>{{SVGAttr("textLength")}}</li>
- <li>{{SVGAttr("to")}}</li>
- <li>{{SVGAttr("transform")}}</li>
- <li>{{SVGAttr("type")}}</li>
-</ul>
-
-<h3 id="U">U</h3>
-
-<ul>
- <li>{{SVGAttr("u1")}}</li>
- <li>{{SVGAttr("u2")}}</li>
- <li>{{SVGAttr("underline-position")}}</li>
- <li>{{SVGAttr("underline-thickness")}}</li>
- <li>{{SVGAttr("unicode")}}</li>
- <li>{{SVGAttr("unicode-bidi")}}</li>
- <li>{{SVGAttr("unicode-range")}}</li>
- <li>{{SVGAttr("units-per-em")}}</li>
-</ul>
-
-<h3 id="V">V</h3>
-
-<ul>
- <li>{{SVGAttr("v-alphabetic")}}</li>
- <li>{{SVGAttr("v-hanging")}}</li>
- <li>{{SVGAttr("v-ideographic")}}</li>
- <li>{{SVGAttr("v-mathematical")}}</li>
- <li>{{SVGAttr("values")}}</li>
- <li>{{SVGAttr("vector-effect")}}</li>
- <li>{{SVGAttr("version")}}</li>
- <li>{{SVGAttr("vert-adv-y")}}</li>
- <li>{{SVGAttr("vert-origin-x")}}</li>
- <li>{{SVGAttr("vert-origin-y")}}</li>
- <li>{{SVGAttr("viewBox")}}</li>
- <li>{{SVGAttr("viewTarget")}}</li>
- <li>{{SVGAttr("visibility")}}</li>
-</ul>
-
-<h3 id="W">W</h3>
-
-<ul>
- <li>{{SVGAttr("width")}}</li>
- <li>{{SVGAttr("widths")}}</li>
- <li>{{SVGAttr("word-spacing")}}</li>
- <li>{{SVGAttr("writing-mode")}}</li>
-</ul>
-
-<h3 id="X">X</h3>
-
-<ul>
- <li>{{SVGAttr("x")}}</li>
- <li>{{SVGAttr("x-height")}}</li>
- <li>{{SVGAttr("x1")}}</li>
- <li>{{SVGAttr("x2")}}</li>
- <li>{{SVGAttr("xChannelSelector")}}</li>
- <li>{{SVGAttr("xlink:actuate")}}</li>
- <li>{{SVGAttr("xlink:arcrole")}}</li>
- <li>{{SVGAttr("xlink:href")}}</li>
- <li>{{SVGAttr("xlink:role")}}</li>
- <li>{{SVGAttr("xlink:show")}}</li>
- <li>{{SVGAttr("xlink:title")}}</li>
- <li>{{SVGAttr("xlink:type")}}</li>
- <li>{{SVGAttr("xml:base")}}</li>
- <li>{{SVGAttr("xml:lang")}}</li>
- <li>{{SVGAttr("xml:space")}}</li>
-</ul>
+{{SVGRef}}
+
+Les éléments SVG peuvent être modifiés en utilisant des attributs qui spécifient comment les éléments doivent être traités ou présentés.
+
+Ci-dessous, la liste de tous les attributs disponibles en SVG ainsi que des liens vers leur documentation pour vous aider à apprendre sur quels éléments ils s'appliquent et comment ils fonctionnent.
+
+## Attributs SVG de A à Z
+
+### A
+
+- {{SVGAttr("accent-height")}}
+- {{SVGAttr("accumulate")}}
+- {{SVGAttr("additive")}}
+- {{SVGAttr("alignment-baseline")}}
+- {{SVGAttr("allowReorder")}}
+- {{SVGAttr("alphabetic")}}
+- {{SVGAttr("amplitude")}}
+- {{SVGAttr("arabic-form")}}
+- {{SVGAttr("ascent")}}
+- {{SVGAttr("attributeName")}}
+- {{SVGAttr("attributeType")}}
+- {{SVGAttr("autoReverse")}}
+- {{SVGAttr("azimuth")}}
+
+### B
+
+- {{SVGAttr("baseFrequency")}}
+- {{SVGAttr("baseline-shift")}}
+- {{SVGAttr("baseProfile")}}
+- {{SVGAttr("bbox")}}
+- {{SVGAttr("begin")}}
+- {{SVGAttr("bias")}}
+- {{SVGAttr("by")}}
+
+### C
+
+- {{SVGAttr("calcMode")}}
+- {{SVGAttr("cap-height")}}
+- {{SVGAttr("class")}}
+- {{SVGAttr("clip")}}
+- {{SVGAttr("clipPathUnits")}}
+- {{SVGAttr("clip-path")}}
+- {{SVGAttr("clip-rule")}}
+- {{SVGAttr("color")}}
+- {{SVGAttr("color-interpolation")}}
+- {{SVGAttr("color-interpolation-filters")}}
+- {{SVGAttr("color-profile")}}
+- {{SVGAttr("color-rendering")}}
+- {{SVGAttr("contentScriptType")}}
+- {{SVGAttr("contentStyleType")}}
+- {{SVGAttr("cursor")}}
+- {{SVGAttr("cx")}}
+- {{SVGAttr("cy")}}
+
+### D
+
+- {{SVGAttr("d")}}
+- {{SVGAttr("decelerate")}}
+- {{SVGAttr("descent")}}
+- {{SVGAttr("diffuseConstant")}}
+- {{SVGAttr("direction")}}
+- {{SVGAttr("display")}}
+- {{SVGAttr("divisor")}}
+- {{SVGAttr("dominant-baseline")}}
+- {{SVGAttr("dur")}}
+- {{SVGAttr("dx")}}
+- {{SVGAttr("dy")}}
+
+### E
+
+- {{SVGAttr("edgeMode")}}
+- {{SVGAttr("elevation")}}
+- {{SVGAttr("enable-background")}}
+- {{SVGAttr("end")}}
+- {{SVGAttr("exponent")}}
+- {{SVGAttr("externalResourcesRequired")}}
+
+### F
+
+- {{SVGAttr("fill")}}
+- {{SVGAttr("fill-opacity")}}
+- {{SVGAttr("fill-rule")}}
+- {{SVGAttr("filter")}}
+- {{SVGAttr("filterRes")}}
+- {{SVGAttr("filterUnits")}}
+- {{SVGAttr("flood-color")}}
+- {{SVGAttr("flood-opacity")}}
+- {{SVGAttr("font-family")}}
+- {{SVGAttr("font-size")}}
+- {{SVGAttr("font-size-adjust")}}
+- {{SVGAttr("font-stretch")}}
+- {{SVGAttr("font-style")}}
+- {{SVGAttr("font-variant")}}
+- {{SVGAttr("font-weight")}}
+- {{SVGAttr("format")}}
+- {{SVGAttr("from")}}
+- {{SVGAttr("fr")}}
+- {{SVGAttr("fx")}}
+- {{SVGAttr("fy")}}
+
+### G
+
+- {{SVGAttr("g1")}}
+- {{SVGAttr("g2")}}
+- {{SVGAttr("glyph-name")}}
+- {{SVGAttr("glyph-orientation-horizontal")}}
+- {{SVGAttr("glyph-orientation-vertical")}}
+- {{SVGAttr("glyphRef")}}
+- {{SVGAttr("gradientTransform")}}
+- {{SVGAttr("gradientUnits")}}
+
+### H
+
+- {{SVGAttr("hanging")}}
+- {{SVGAttr("height")}}
+- {{SVGAttr("href")}}
+- {{SVGAttr("hreflang")}}
+- {{SVGAttr("horiz-adv-x")}}
+- {{SVGAttr("horiz-origin-x")}}
+
+### I
+
+- {{SVGAttr("id")}}
+- {{SVGAttr("ideographic")}}
+- {{SVGAttr("image-rendering")}}
+- {{SVGAttr("in")}}
+- {{SVGAttr("in2")}}
+- {{SVGAttr("intercept")}}
+
+### K
+
+- {{SVGAttr("k")}}
+- {{SVGAttr("k1")}}
+- {{SVGAttr("k2")}}
+- {{SVGAttr("k3")}}
+- {{SVGAttr("k4")}}
+- {{SVGAttr("kernelMatrix")}}
+- {{SVGAttr("kernelUnitLength")}}
+- {{SVGAttr("kerning")}}
+- {{SVGAttr("keyPoints")}}
+- {{SVGAttr("keySplines")}}
+- {{SVGAttr("keyTimes")}}
+
+### L
+
+- {{SVGAttr("lang")}}
+- {{SVGAttr("lengthAdjust")}}
+- {{SVGAttr("letter-spacing")}}
+- {{SVGAttr("lighting-color")}}
+- {{SVGAttr("limitingConeAngle")}}
+- {{SVGAttr("local")}}
+
+### M
+
+- {{SVGAttr("marker-end")}}
+- {{SVGAttr("marker-mid")}}
+- {{SVGAttr("marker-start")}}
+- {{SVGAttr("markerHeight")}}
+- {{SVGAttr("markerUnits")}}
+- {{SVGAttr("markerWidth")}}
+- {{SVGAttr("mask")}}
+- {{SVGAttr("maskContentUnits")}}
+- {{SVGAttr("maskUnits")}}
+- {{SVGAttr("mathematical")}}
+- {{SVGAttr("max")}}
+- {{SVGAttr("media")}}
+- {{SVGAttr("method")}}
+- {{SVGAttr("min")}}
+- {{SVGAttr("mode")}}
+
+### N
+
+- {{SVGAttr("name")}}
+- {{SVGAttr("numOctaves")}}
+
+### O
+
+- {{SVGAttr("offset")}}
+- {{SVGAttr("opacity")}}
+- {{SVGAttr("operator")}}
+- {{SVGAttr("order")}}
+- {{SVGAttr("orient")}}
+- {{SVGAttr("orientation")}}
+- {{SVGAttr("origin")}}
+- {{SVGAttr("overflow")}}
+- {{SVGAttr("overline-position")}}
+- {{SVGAttr("overline-thickness")}}
+
+### P
+
+- {{SVGAttr("panose-1")}}
+- {{SVGAttr("paint-order")}}
+- {{SVGAttr("path")}}
+- {{SVGAttr("pathLength")}}
+- {{SVGAttr("patternContentUnits")}}
+- {{SVGAttr("patternTransform")}}
+- {{SVGAttr("patternUnits")}}
+- {{SVGAttr("ping")}}
+- {{SVGAttr("pointer-events")}}
+- {{SVGAttr("points")}}
+- {{SVGAttr("pointsAtX")}}
+- {{SVGAttr("pointsAtY")}}
+- {{SVGAttr("pointsAtZ")}}
+- {{SVGAttr("preserveAlpha")}}
+- {{SVGAttr("preserveAspectRatio")}}
+- {{SVGAttr("primitiveUnits")}}
+
+### R
+
+- {{SVGAttr("r")}}
+- {{SVGAttr("radius")}}
+- {{SVGAttr("referrerPolicy")}}
+- {{SVGAttr("refX")}}
+- {{SVGAttr("refY")}}
+- {{SVGAttr("rel")}}
+- {{SVGAttr("rendering-intent")}}
+- {{SVGAttr("repeatCount")}}
+- {{SVGAttr("repeatDur")}}
+- {{SVGAttr("requiredExtensions")}}
+- {{SVGAttr("requiredFeatures")}}
+- {{SVGAttr("restart")}}
+- {{SVGAttr("result")}}
+- {{SVGAttr("rotate")}}
+- {{SVGAttr("rx")}}
+- {{SVGAttr("ry")}}
+
+### S
+
+- {{SVGAttr("scale")}}
+- {{SVGAttr("seed")}}
+- {{SVGAttr("shape-rendering")}}
+- {{SVGAttr("slope")}}
+- {{SVGAttr("spacing")}}
+- {{SVGAttr("specularConstant")}}
+- {{SVGAttr("specularExponent")}}
+- {{SVGAttr("speed")}}
+- {{SVGAttr("spreadMethod")}}
+- {{SVGAttr("startOffset")}}
+- {{SVGAttr("stdDeviation")}}
+- {{SVGAttr("stemh")}}
+- {{SVGAttr("stemv")}}
+- {{SVGAttr("stitchTiles")}}
+- {{SVGAttr("stop-color")}}
+- {{SVGAttr("stop-opacity")}}
+- {{SVGAttr("strikethrough-position")}}
+- {{SVGAttr("strikethrough-thickness")}}
+- {{SVGAttr("string")}}
+- {{SVGAttr("stroke")}}
+- {{SVGAttr("stroke-dasharray")}}
+- {{SVGAttr("stroke-dashoffset")}}
+- {{SVGAttr("stroke-linecap")}}
+- {{SVGAttr("stroke-linejoin")}}
+- {{SVGAttr("stroke-miterlimit")}}
+- {{SVGAttr("stroke-opacity")}}
+- {{SVGAttr("stroke-width")}}
+- {{SVGAttr("style")}}
+- {{SVGAttr("surfaceScale")}}
+- {{SVGAttr("systemLanguage")}}
+
+### T
+
+- {{SVGAttr("tabindex")}}
+- {{SVGAttr("tableValues")}}
+- {{SVGAttr("target")}}
+- {{SVGAttr("targetX")}}
+- {{SVGAttr("targetY")}}
+- {{SVGAttr("text-anchor")}}
+- {{SVGAttr("text-decoration")}}
+- {{SVGAttr("text-rendering")}}
+- {{SVGAttr("textLength")}}
+- {{SVGAttr("to")}}
+- {{SVGAttr("transform")}}
+- {{SVGAttr("type")}}
+
+### U
+
+- {{SVGAttr("u1")}}
+- {{SVGAttr("u2")}}
+- {{SVGAttr("underline-position")}}
+- {{SVGAttr("underline-thickness")}}
+- {{SVGAttr("unicode")}}
+- {{SVGAttr("unicode-bidi")}}
+- {{SVGAttr("unicode-range")}}
+- {{SVGAttr("units-per-em")}}
+
+### V
+
+- {{SVGAttr("v-alphabetic")}}
+- {{SVGAttr("v-hanging")}}
+- {{SVGAttr("v-ideographic")}}
+- {{SVGAttr("v-mathematical")}}
+- {{SVGAttr("values")}}
+- {{SVGAttr("vector-effect")}}
+- {{SVGAttr("version")}}
+- {{SVGAttr("vert-adv-y")}}
+- {{SVGAttr("vert-origin-x")}}
+- {{SVGAttr("vert-origin-y")}}
+- {{SVGAttr("viewBox")}}
+- {{SVGAttr("viewTarget")}}
+- {{SVGAttr("visibility")}}
 
-<h3 id="Y">Y</h3>
+### W
 
-<ul>
- <li>{{SVGAttr("y")}}</li>
- <li>{{SVGAttr("y1")}}</li>
- <li>{{SVGAttr("y2")}}</li>
- <li>{{SVGAttr("yChannelSelector")}}</li>
-</ul>
+- {{SVGAttr("width")}}
+- {{SVGAttr("widths")}}
+- {{SVGAttr("word-spacing")}}
+- {{SVGAttr("writing-mode")}}
 
-<h3 id="Z">Z</h3>
+### X
 
-<ul>
- <li>{{SVGAttr("z")}}</li>
- <li>{{SVGAttr("zoomAndPan")}}</li>
-</ul>
+- {{SVGAttr("x")}}
+- {{SVGAttr("x-height")}}
+- {{SVGAttr("x1")}}
+- {{SVGAttr("x2")}}
+- {{SVGAttr("xChannelSelector")}}
+- {{SVGAttr("xlink:actuate")}}
+- {{SVGAttr("xlink:arcrole")}}
+- {{SVGAttr("xlink:href")}}
+- {{SVGAttr("xlink:role")}}
+- {{SVGAttr("xlink:show")}}
+- {{SVGAttr("xlink:title")}}
+- {{SVGAttr("xlink:type")}}
+- {{SVGAttr("xml:base")}}
+- {{SVGAttr("xml:lang")}}
+- {{SVGAttr("xml:space")}}
 
+### Y
 
-<h2 id="Attributs_SVG_par_catégorie">Attributs SVG par catégorie</h2>
+- {{SVGAttr("y")}}
+- {{SVGAttr("y1")}}
+- {{SVGAttr("y2")}}
+- {{SVGAttr("yChannelSelector")}}
 
-<h3 id="Attributs_Génériques">Attributs Génériques</h3>
+### Z
 
-<h4 id="Attributs_de_base"><a href="/fr/docs/Web/SVG/Attribute/Core">Attributs de base</a></h4>
+- {{SVGAttr("z")}}
+- {{SVGAttr("zoomAndPan")}}
 
-<p>{{SVGAttr("id")}}, {{SVGAttr("lang")}}, {{SVGAttr("tabindex")}}, {{SVGAttr("xml:base")}}, {{SVGAttr("xml:lang")}}, {{SVGAttr("xml:space")}}</p>
+## Attributs SVG par catégorie
 
-<h4 id="Attributs_de_style"><a href="/fr/docs/Web/SVG/Attribute/Styling">Attributs de style</a></h4>
+### Attributs Génériques
 
-<p>{{SVGAttr("class")}}, {{SVGAttr("style")}}</p>
+#### [Attributs de base](/fr/docs/Web/SVG/Attribute/Core)
 
-<h4 id="Attributs_de_traitement_conditionnel">Attributs de traitement conditionnel</h4>
+{{SVGAttr("id")}}, {{SVGAttr("lang")}}, {{SVGAttr("tabindex")}}, {{SVGAttr("xml:base")}}, {{SVGAttr("xml:lang")}}, {{SVGAttr("xml:space")}}
 
-<p>{{SVGAttr("externalResourcesRequired")}}, {{SVGAttr("requiredExtensions")}}, {{SVGAttr("requiredFeatures")}}, {{SVGAttr("systemLanguage")}}.</p>
+#### [Attributs de style](/fr/docs/Web/SVG/Attribute/Styling)
 
-<h3 id="Attributs_XLink">Attributs XLink</h3>
+{{SVGAttr("class")}}, {{SVGAttr("style")}}
 
-<p>{{SVGAttr("xlink:href")}}, {{SVGAttr("xlink:type")}}, {{SVGAttr("xlink:role")}}, {{SVGAttr("xlink:arcrole")}}, {{SVGAttr("xlink:title")}}, {{SVGAttr("xlink:show")}}, {{SVGAttr("xlink:actuate")}}</p>
+#### Attributs de traitement conditionnel
 
-<h3 id="Attributs_de_présentation"><a href="/fr/docs/Web/SVG/Attribute/Presentation">Attributs de présentation</a></h3>
+{{SVGAttr("externalResourcesRequired")}}, {{SVGAttr("requiredExtensions")}}, {{SVGAttr("requiredFeatures")}}, {{SVGAttr("systemLanguage")}}.
 
-<div class="note">
-  <p><strong>Note :</strong> Tous les attributs SVG de présentation peuvent être utilisés comme propriété CSS.</p>
-</div>
+### Attributs XLink
 
-<p>{{SVGAttr("alignment-baseline")}}, {{SVGAttr("baseline-shift")}}, {{SVGAttr("clip")}}, {{SVGAttr("clip-path")}}, {{SVGAttr("clip-rule")}}, {{SVGAttr("color")}}, {{SVGAttr("color-interpolation")}}, {{SVGAttr("color-interpolation-filters")}}, {{SVGAttr("color-profile")}}, {{SVGAttr("color-rendering")}}, {{SVGAttr("cursor")}}, {{SVGAttr("direction")}}, {{SVGAttr("display")}}, {{SVGAttr("dominant-baseline")}}, {{SVGAttr("enable-background")}}, {{SVGAttr("fill")}}, {{SVGAttr("fill-opacity")}}, {{SVGAttr("fill-rule")}}, {{SVGAttr("filter")}}, {{SVGAttr("flood-color")}}, {{SVGAttr("flood-opacity")}}, {{SVGAttr("font-family")}}, {{SVGAttr("font-size")}}, {{SVGAttr("font-size-adjust")}}, {{SVGAttr("font-stretch")}}, {{SVGAttr("font-style")}}, {{SVGAttr("font-variant")}}, {{SVGAttr("font-weight")}}, {{SVGAttr("glyph-orientation-horizontal")}}, {{SVGAttr("glyph-orientation-vertical")}}, {{SVGAttr("image-rendering")}}, {{SVGAttr("kerning")}}, {{SVGAttr("letter-spacing")}}, {{SVGAttr("lighting-color")}}, {{SVGAttr("marker-end")}}, {{SVGAttr("marker-mid")}}, {{SVGAttr("marker-start")}}, {{SVGAttr("mask")}}, {{SVGAttr("opacity")}}, {{SVGAttr("overflow")}}, {{SVGAttr("pointer-events")}}, {{SVGAttr("shape-rendering")}}, {{SVGAttr("stop-color")}}, {{SVGAttr("stop-opacity")}}, {{SVGAttr("stroke")}}, {{SVGAttr("stroke-dasharray")}}, {{SVGAttr("stroke-dashoffset")}}, {{SVGAttr("stroke-linecap")}}, {{SVGAttr("stroke-linejoin")}}, {{SVGAttr("stroke-miterlimit")}}, {{SVGAttr("stroke-opacity")}}, {{SVGAttr("stroke-width")}}, {{SVGAttr("text-anchor")}}, {{SVGAttr("transform")}}, {{SVGAttr("text-decoration")}}, {{SVGAttr("text-rendering")}}, {{SVGAttr("unicode-bidi")}}, {{SVGAttr("vector-effect")}}, {{SVGAttr("visibility")}}, {{SVGAttr("word-spacing")}}, {{SVGAttr("writing-mode")}}</p>
+{{SVGAttr("xlink:href")}}, {{SVGAttr("xlink:type")}}, {{SVGAttr("xlink:role")}}, {{SVGAttr("xlink:arcrole")}}, {{SVGAttr("xlink:title")}}, {{SVGAttr("xlink:show")}}, {{SVGAttr("xlink:actuate")}}
 
-<h3 id="Attributs_de_filtres">Attributs de filtres</h3>
+### [Attributs de présentation](/fr/docs/Web/SVG/Attribute/Presentation)
 
-<h4 id="Attributs_de_primitives_de_filtre">Attributs de primitives de filtre</h4>
+> **Note :** Tous les attributs SVG de présentation peuvent être utilisés comme propriété CSS.
 
-<p>{{SVGAttr("height")}}, {{SVGAttr("result")}}, {{SVGAttr("width")}}, {{SVGAttr("x")}}, {{SVGAttr("y")}}</p>
+{{SVGAttr("alignment-baseline")}}, {{SVGAttr("baseline-shift")}}, {{SVGAttr("clip")}}, {{SVGAttr("clip-path")}}, {{SVGAttr("clip-rule")}}, {{SVGAttr("color")}}, {{SVGAttr("color-interpolation")}}, {{SVGAttr("color-interpolation-filters")}}, {{SVGAttr("color-profile")}}, {{SVGAttr("color-rendering")}}, {{SVGAttr("cursor")}}, {{SVGAttr("direction")}}, {{SVGAttr("display")}}, {{SVGAttr("dominant-baseline")}}, {{SVGAttr("enable-background")}}, {{SVGAttr("fill")}}, {{SVGAttr("fill-opacity")}}, {{SVGAttr("fill-rule")}}, {{SVGAttr("filter")}}, {{SVGAttr("flood-color")}}, {{SVGAttr("flood-opacity")}}, {{SVGAttr("font-family")}}, {{SVGAttr("font-size")}}, {{SVGAttr("font-size-adjust")}}, {{SVGAttr("font-stretch")}}, {{SVGAttr("font-style")}}, {{SVGAttr("font-variant")}}, {{SVGAttr("font-weight")}}, {{SVGAttr("glyph-orientation-horizontal")}}, {{SVGAttr("glyph-orientation-vertical")}}, {{SVGAttr("image-rendering")}}, {{SVGAttr("kerning")}}, {{SVGAttr("letter-spacing")}}, {{SVGAttr("lighting-color")}}, {{SVGAttr("marker-end")}}, {{SVGAttr("marker-mid")}}, {{SVGAttr("marker-start")}}, {{SVGAttr("mask")}}, {{SVGAttr("opacity")}}, {{SVGAttr("overflow")}}, {{SVGAttr("pointer-events")}}, {{SVGAttr("shape-rendering")}}, {{SVGAttr("stop-color")}}, {{SVGAttr("stop-opacity")}}, {{SVGAttr("stroke")}}, {{SVGAttr("stroke-dasharray")}}, {{SVGAttr("stroke-dashoffset")}}, {{SVGAttr("stroke-linecap")}}, {{SVGAttr("stroke-linejoin")}}, {{SVGAttr("stroke-miterlimit")}}, {{SVGAttr("stroke-opacity")}}, {{SVGAttr("stroke-width")}}, {{SVGAttr("text-anchor")}}, {{SVGAttr("transform")}}, {{SVGAttr("text-decoration")}}, {{SVGAttr("text-rendering")}}, {{SVGAttr("unicode-bidi")}}, {{SVGAttr("vector-effect")}}, {{SVGAttr("visibility")}}, {{SVGAttr("word-spacing")}}, {{SVGAttr("writing-mode")}}
 
-<h4 id="Attributs_de_fonction_de_transfert">Attributs de fonction de transfert</h4>
+### Attributs de filtres
 
-<p>{{SVGAttr("type")}}, {{SVGAttr("tableValues")}}, {{SVGAttr("slope")}}, {{SVGAttr("intercept")}}, {{SVGAttr("amplitude")}}, {{SVGAttr("exponent")}}, {{SVGAttr("offset")}}</p>
+#### Attributs de primitives de filtre
 
-<h3 id="Attributs_d'animation">Attributs d'animation</h3>
+{{SVGAttr("height")}}, {{SVGAttr("result")}}, {{SVGAttr("width")}}, {{SVGAttr("x")}}, {{SVGAttr("y")}}
 
-<h4 id="Animation_cible">Animation cible</h4>
+#### Attributs de fonction de transfert
 
-<p>{{SVGAttr("attributeType")}}, {{SVGAttr("attributeName")}}</p>
+{{SVGAttr("type")}}, {{SVGAttr("tableValues")}}, {{SVGAttr("slope")}}, {{SVGAttr("intercept")}}, {{SVGAttr("amplitude")}}, {{SVGAttr("exponent")}}, {{SVGAttr("offset")}}
 
-<h4 id="Timing_de_l'animation">Timing de l'animation</h4>
+### Attributs d'animation
 
-<p>{{SVGAttr("begin")}}, {{SVGAttr("dur")}}, {{SVGAttr("end")}}, {{SVGAttr("min")}}, {{SVGAttr("max")}}, {{SVGAttr("restart")}}, {{SVGAttr("repeatCount")}}, {{SVGAttr("repeatDur")}}, {{SVGAttr("fill")}}</p>
+#### Animation cible
 
-<h4 id="Valeurs_de_l'animation">Valeurs de l'animation</h4>
+{{SVGAttr("attributeType")}}, {{SVGAttr("attributeName")}}
 
-<p>{{SVGAttr("calcMode")}}, {{SVGAttr("values")}}, {{SVGAttr("keyTimes")}}, {{SVGAttr("keySplines")}}, {{SVGAttr("from")}}, {{SVGAttr("to")}}, {{SVGAttr("by")}}, {{SVGAttr("autoReverse")}}, {{SVGAttr("accelerate")}}, {{SVGAttr("decelerate")}}</p>
+#### Timing de l'animation
 
-<h4 id="Addition_de_l'animation">Addition de l'animation</h4>
+{{SVGAttr("begin")}}, {{SVGAttr("dur")}}, {{SVGAttr("end")}}, {{SVGAttr("min")}}, {{SVGAttr("max")}}, {{SVGAttr("restart")}}, {{SVGAttr("repeatCount")}}, {{SVGAttr("repeatDur")}}, {{SVGAttr("fill")}}
 
-<p>{{SVGAttr("additive")}}, {{SVGAttr("accumulate")}}</p>
+#### Valeurs de l'animation
 
-<h3 id="Attributs_d'événement">Attributs d'événement</h3>
+{{SVGAttr("calcMode")}}, {{SVGAttr("values")}}, {{SVGAttr("keyTimes")}}, {{SVGAttr("keySplines")}}, {{SVGAttr("from")}}, {{SVGAttr("to")}}, {{SVGAttr("by")}}, {{SVGAttr("autoReverse")}}, {{SVGAttr("accelerate")}}, {{SVGAttr("decelerate")}}
 
-<h4 id="Événements_d'animation"><a href="/fr/docs/Web/SVG/Attribute/Events#Animation_Event_Attributes">Événements d'animation</a></h4>
+#### Addition de l'animation
 
-<p><strong><code>onbegin</code></strong>, <strong><code>onend</code></strong>, <strong><code>onrepeat</code></strong></p>
+{{SVGAttr("additive")}}, {{SVGAttr("accumulate")}}
 
-<h4 id="Événements_du_document"><a href="/fr/docs/Web/SVG/Attribute/Events#Document_Event_Attributes">Événements du document</a></h4>
+### Attributs d'événement
 
-<p><strong><code>onabort</code></strong>, <strong><code>onerror</code></strong>, <strong><code>onresize</code></strong>, <strong><code>onscroll</code></strong>, <strong><code>onunload</code></strong></p>
+#### [Événements d'animation](/fr/docs/Web/SVG/Attribute/Events#Animation_Event_Attributes)
 
-<h4 id="Événements_globaux"><a href="/fr/docs/Web/SVG/Attribute/Events#Global_Event_Attributes">Événements globaux</a></h4>
+**`onbegin`**, **`onend`**, **`onrepeat`**
 
-<p><code><strong>oncancel</strong></code>, <code><strong>oncanplay</strong></code>, <code><strong>oncanplaythrough</strong></code>, <code><strong>onchange</strong></code>, <code><strong>onclick</strong></code>, <code><strong>onclose</strong></code>, <code><strong>oncuechange</strong></code>, <code><strong>ondblclick</strong></code>, <code><strong>ondrag</strong></code>, <code><strong>ondragend</strong></code>, <code><strong>ondragenter</strong></code>, <code><strong>ondragexit</strong></code>, <code><strong>ondragleave</strong></code>, <code><strong>ondragover</strong></code>, <code><strong>ondragstart</strong></code>, <code><strong>ondrop</strong></code>, <code><strong>ondurationchange</strong></code>, <code><strong>onemptied</strong></code>, <code><strong>onended</strong></code>, <code><strong>onerror</strong></code>, <code><strong>onfocus</strong></code>, <code><strong>oninput</strong></code>, <code><strong>oninvalid</strong></code>, <code><strong>onkeydown</strong></code>, <code><strong>onkeypress</strong></code>, <code><strong>onkeyup</strong></code>, <code><strong>onload</strong></code>, <code><strong>onloadeddata</strong></code>, <code><strong>onloadedmetadata</strong></code>, <code><strong>onloadstart</strong></code>, <code><strong>onmousedown</strong></code>, <code><strong>onmouseenter</strong></code>, <code><strong>onmouseleave</strong></code>, <code><strong>onmousemove</strong></code>, <code><strong>onmouseout</strong></code>, <code><strong>onmouseover</strong></code>, <code><strong>onmouseup</strong></code>, <code><strong>onmousewheel</strong></code>, <code><strong>onpause</strong></code>, <code><strong>onplay</strong></code>, <code><strong>onplaying</strong></code>, <code><strong>onprogress</strong></code>, <code><strong>onratechange</strong></code>, <code><strong>onreset</strong></code>, <code><strong>onresize</strong></code>, <code><strong>onscroll</strong></code>, <code><strong>onseeked</strong></code>, <code><strong>onseeking</strong></code>, <code><strong>onselect</strong></code>, <code><strong>onshow</strong></code>, <code><strong>onstalled</strong></code>, <code><strong>onsubmit</strong></code>, <code><strong>onsuspend</strong></code>, <code><strong>ontimeupdate</strong></code>, <code><strong>ontoggle</strong></code>, <code><strong>onvolumechange</strong></code>, <code><strong>onwaiting</strong></code></p>
+#### [Événements du document](/fr/docs/Web/SVG/Attribute/Events#Document_Event_Attributes)
 
-<h4 id="Événement_graphiques"><a href="/docs/Web/SVG/Attribute/Events#Graphical_Event_Attributes">Événement graphiques</a></h4>
+**`onabort`**, **`onerror`**, **`onresize`**, **`onscroll`**, **`onunload`**
 
-<p><strong><code>onactivate</code></strong>, <strong><code>onfocusin</code></strong>, <strong><code>onfocusout</code></strong></p>
+#### [Événements globaux](/fr/docs/Web/SVG/Attribute/Events#Global_Event_Attributes)
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+**`oncancel`**, **`oncanplay`**, **`oncanplaythrough`**, **`onchange`**, **`onclick`**, **`onclose`**, **`oncuechange`**, **`ondblclick`**, **`ondrag`**, **`ondragend`**, **`ondragenter`**, **`ondragexit`**, **`ondragleave`**, **`ondragover`**, **`ondragstart`**, **`ondrop`**, **`ondurationchange`**, **`onemptied`**, **`onended`**, **`onerror`**, **`onfocus`**, **`oninput`**, **`oninvalid`**, **`onkeydown`**, **`onkeypress`**, **`onkeyup`**, **`onload`**, **`onloadeddata`**, **`onloadedmetadata`**, **`onloadstart`**, **`onmousedown`**, **`onmouseenter`**, **`onmouseleave`**, **`onmousemove`**, **`onmouseout`**, **`onmouseover`**, **`onmouseup`**, **`onmousewheel`**, **`onpause`**, **`onplay`**, **`onplaying`**, **`onprogress`**, **`onratechange`**, **`onreset`**, **`onresize`**, **`onscroll`**, **`onseeked`**, **`onseeking`**, **`onselect`**, **`onshow`**, **`onstalled`**, **`onsubmit`**, **`onsuspend`**, **`ontimeupdate`**, **`ontoggle`**, **`onvolumechange`**, **`onwaiting`**
 
-<ul>
- <li><a href="/fr/docs/Web/SVG/Element">Référence des éléments SVG</a></li>
- <li><a href="/fr/docs/Web/SVG/Tutoriel">Tutoriel SVG</a></li>
- <li><a href="/fr/docs/Web/API/Document_Object_Model#Interfaces_SVG">Références des interfaces SVG</a></li>
-</ul>
+#### [Événement graphiques](/docs/Web/SVG/Attribute/Events#Graphical_Event_Attributes)
+
+**`onactivate`**, **`onfocusin`**, **`onfocusout`**
+
+## Voir aussi
+
+- [Référence des éléments SVG](/fr/docs/Web/SVG/Element)
+- [Tutoriel SVG](/fr/docs/Web/SVG/Tutoriel)
+- [Références des interfaces SVG](/fr/docs/Web/API/Document_Object_Model#Interfaces_SVG)
diff --git a/files/fr/web/svg/attribute/mask/index.md b/files/fr/web/svg/attribute/mask/index.md
index c7059b649f..e7f384882c 100644
--- a/files/fr/web/svg/attribute/mask/index.md
+++ b/files/fr/web/svg/attribute/mask/index.md
@@ -3,82 +3,90 @@ title: mask
 slug: Web/SVG/Attribute/mask
 translation_of: Web/SVG/Attribute/mask
 ---
-<div>{{SVGRef}}</div>
+{{SVGRef}}
 
-<p>L'attribut <code>mask</code> est un attribut de présentation principalement utilisé pour appliquer un trou (défini par un élément {{ SVGElement("mask") }}) sur l'élément qui possède cet attribut.</p>
+L'attribut `mask` est un attribut de présentation principalement utilisé pour appliquer un trou (défini par un élément {{ SVGElement("mask") }}) sur l'élément qui possède cet attribut.
 
-<div class="note">
-  <p><strong>Note :</strong> On peut aussi utiliser l'attribut {{cssxref('mask')}} en CSS.</p>
-</div>
+> **Note :** On peut aussi utiliser l'attribut {{cssxref('mask')}} en CSS.
 
-<h2>Exemple</h2>
+## Exemple
 
-<pre class="brush: css hidden">html,body,svg { height:100% }</pre>
+```css hidden
+html,body,svg { height:100% }
+```
 
-<pre class="brush: html">&lt;svg viewBox="0 0 200 100" xmlns="http://www.w3.org/2000/svg"&gt;
-  &lt;mask id="monMask" maskContentUnits="objectBoundingBox"&gt;
-    &lt;rect    fill="white" x="0" y="0" width="100%" height="100%" /&gt;
-    &lt;polygon fill="black" points="0.5,0.2 0.68,0.74 0.21,0.41 0.79,0.41 0.32,0.74" /&gt;
-  &lt;/mask&gt;
+```html
+<svg viewBox="0 0 200 100" xmlns="http://www.w3.org/2000/svg">
+  <mask id="monMask" maskContentUnits="objectBoundingBox">
+    <rect    fill="white" x="0" y="0" width="100%" height="100%" />
+    <polygon fill="black" points="0.5,0.2 0.68,0.74 0.21,0.41 0.79,0.41 0.32,0.74" />
+  </mask>
 
-  &lt;!-- Fait un trou de la forme d'une étoile sur le cercle rouge,
-  ce qui laisse apparaître le cercle jaune situé dessous. --&gt;
-  &lt;circle cx="50" cy="50" r="20" fill="yellow" /&gt;
-  &lt;circle cx="50" cy="50" r="45" fill="red"
-          mask="url(#monMask)"/&gt;
-&lt;/svg&gt;</pre>
+  <!-- Fait un trou de la forme d'une étoile sur le cercle rouge,
+  ce qui laisse apparaître le cercle jaune situé dessous. -->
+  <circle cx="50" cy="50" r="20" fill="yellow" />
+  <circle cx="50" cy="50" r="45" fill="red"
+          mask="url(#monMask)"/>
+</svg>
+```
 
-<p>{{EmbedLiveSample('exemple', '100%', 150)}}</p>
+{{EmbedLiveSample('exemple', '100%', 150)}}
 
-<p>Depuis SVG2, l'attribut {{cssxref('mask')}} est défini comme une propriété CSS et comme une propriété raccourcie pour beaucoup d'autres propriétés: {{cssxref('mask-image')}}, {{cssxref('mask-mode')}}, {{cssxref('mask-repeat')}}, {{cssxref('mask-position')}}, {{cssxref('mask-clip')}}, {{cssxref('mask-origin')}}, {{cssxref('mask-size')}} et {{cssxref('mask-composite')}}.</p>
+Depuis SVG2, l'attribut {{cssxref('mask')}} est défini comme une propriété CSS et comme une propriété raccourcie pour beaucoup d'autres propriétés: {{cssxref('mask-image')}}, {{cssxref('mask-mode')}}, {{cssxref('mask-repeat')}}, {{cssxref('mask-position')}}, {{cssxref('mask-clip')}}, {{cssxref('mask-origin')}}, {{cssxref('mask-size')}} et {{cssxref('mask-composite')}}.
 
-<p>Étant un attribut de présentation, il peut être appliqué sur n'importe quel élément, mais il a un effet visible surtout sur les éléments suivants: {{SVGElement('a')}}, {{SVGElement('circle')}}, {{SVGElement('clipPath')}}, {{SVGElement('ellipse')}}, {{SVGElement('g')}}, {{SVGElement('glyph')}}, {{SVGElement('image')}}, {{SVGElement('line')}}, {{SVGElement('marker')}}, {{SVGElement('mask')}}, {{SVGElement('path')}}, {{SVGElement('pattern')}}, {{SVGElement('polygon')}}, {{SVGElement('polyline')}}, {{SVGElement('rect')}}, {{SVGElement('svg')}}, {{SVGElement('symbol')}}, {{SVGElement('text')}} et {{SVGElement('use')}}.</p>
+Étant un attribut de présentation, il peut être appliqué sur n'importe quel élément, mais il a un effet visible surtout sur les éléments suivants: {{SVGElement('a')}}, {{SVGElement('circle')}}, {{SVGElement('clipPath')}}, {{SVGElement('ellipse')}}, {{SVGElement('g')}}, {{SVGElement('glyph')}}, {{SVGElement('image')}}, {{SVGElement('line')}}, {{SVGElement('marker')}}, {{SVGElement('mask')}}, {{SVGElement('path')}}, {{SVGElement('pattern')}}, {{SVGElement('polygon')}}, {{SVGElement('polyline')}}, {{SVGElement('rect')}}, {{SVGElement('svg')}}, {{SVGElement('symbol')}}, {{SVGElement('text')}} et {{SVGElement('use')}}.
 
-<h2 id="Contexte_d'utilisation">Contexte d'utilisation</h2>
+## Contexte d'utilisation
 
 <table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="row">Valeur</th>
-   <td>Voir la propriété CSS {{cssxref('mask')}}</td>
-  </tr>
-  <tr>
-   <th scope="row">Valeur par défaut</th>
-   <td><code>none</code></td>
-  </tr>
-  <tr>
-   <th scope="row">Animable</th>
-   <td>Oui</td>
-  </tr>
- </tbody>
+  <tbody>
+    <tr>
+      <th scope="row">Valeur</th>
+      <td>Voir la propriété CSS {{cssxref('mask')}}</td>
+    </tr>
+    <tr>
+      <th scope="row">Valeur par défaut</th>
+      <td><code>none</code></td>
+    </tr>
+    <tr>
+      <th scope="row">Animable</th>
+      <td>Oui</td>
+    </tr>
+  </tbody>
 </table>
 
-<h2 id="Browser_Compatibility">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("svg.attributes.presentation.mask")}}</p>
+{{Compat("svg.attributes.presentation.mask")}}
 
-<h2 id="Spécifications">Spécifications</h2>
+## Spécifications
 
 <table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">Status</th>
-   <th scope="col">Commentaire</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName("CSS Masks", "#the-mask", 'mask')}}</td>
-   <td>{{Spec2("CSS Masks")}}</td>
-   <td>
-    <p>Étend cet usage pour les éléments HTML en créant un raccourci pour les nouvelles propriétés <code>mask-*</code> défini dans cette spécification.</p>
-   </td>
-  </tr>
-  <tr>
-   <td>{{SpecName('SVG1.1', 'masking.html#MaskProperty', 'mask')}}</td>
-   <td>{{Spec2('SVG1.1')}}</td>
-   <td>Définition initiale</td>
-  </tr>
- </tbody>
+  <thead>
+    <tr>
+      <th scope="col">Spécification</th>
+      <th scope="col">Status</th>
+      <th scope="col">Commentaire</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td>{{SpecName("CSS Masks", "#the-mask", 'mask')}}</td>
+      <td>{{Spec2("CSS Masks")}}</td>
+      <td>
+        <p>
+          Étend cet usage pour les éléments HTML en créant un raccourci pour les
+          nouvelles propriétés <code>mask-*</code> défini dans cette
+          spécification.
+        </p>
+      </td>
+    </tr>
+    <tr>
+      <td>
+        {{SpecName('SVG1.1', 'masking.html#MaskProperty', 'mask')}}
+      </td>
+      <td>{{Spec2('SVG1.1')}}</td>
+      <td>Définition initiale</td>
+    </tr>
+  </tbody>
 </table>
diff --git a/files/fr/web/svg/attribute/points/index.md b/files/fr/web/svg/attribute/points/index.md
index 1ca4f41fc7..24004a79bc 100644
--- a/files/fr/web/svg/attribute/points/index.md
+++ b/files/fr/web/svg/attribute/points/index.md
@@ -3,138 +3,121 @@ title: points
 slug: Web/SVG/Attribute/points
 translation_of: Web/SVG/Attribute/points
 ---
-<div>{{SVGRef}}</div>
+{{SVGRef}}
 
-<p>L'attribut <code><strong>point</strong></code> défini une liste de points. Chaque point est défini par deux nombres représentant les coordonnées X et Y dans le système de coordonnées de l'utilisateur. Si une coordonnées est dépareillée elle sera ignorée.</p>
+L'attribut **`point`** défini une liste de points. Chaque point est défini par deux nombres représentant les coordonnées X et Y dans le système de coordonnées de l'utilisateur. Si une coordonnées est dépareillée elle sera ignorée.
 
-<p>Les éléments {{SVGElement("polyline")}} et {{SVGElement("polygon")}} utilisent cet attribut.</p>
+Les éléments {{SVGElement("polyline")}} et {{SVGElement("polygon")}} utilisent cet attribut.
 
-<h2>Exemple</h2>
+## Exemple
 
-<pre class="brush: css hidden">html,body,svg { height:100% }</pre>
+```css hidden
+html,body,svg { height:100% }
+```
 
-<pre class="brush: html">&lt;svg viewBox="-10 -10 220 120" xmlns="http://www.w3.org/2000/svg"&gt;
-  &lt;!-- polyline est une forme ouverte --&gt;
-  &lt;polyline stroke="black" fill="none"
-   points="50,0 21,90 98,35 2,35 79,90"/&gt;
+```html
+<svg viewBox="-10 -10 220 120" xmlns="http://www.w3.org/2000/svg">
+  <!-- polyline est une forme ouverte -->
+  <polyline stroke="black" fill="none"
+   points="50,0 21,90 98,35 2,35 79,90"/>
 
-  &lt;!-- polygon est une forme fermée --&gt;
-  &lt;polygon stroke="black" fill="none" transform="translate(100,0)"
-   points="50,0 21,90 98,35 2,35 79,90"/&gt;
+  <!-- polygon est une forme fermée -->
+  <polygon stroke="black" fill="none" transform="translate(100,0)"
+   points="50,0 21,90 98,35 2,35 79,90"/>
 
-  &lt;!--
+  <!--
   Il est généralement recommendé de séparer les valeurs X et Y
   avec une virgule et les coordonées avec des espaces.
   Cela est plus lisible.
-  --&gt;
-&lt;/svg&gt;</pre>
+  -->
+</svg>
+```
 
-<p>{{EmbedLiveSample('exemple', '100%', 200)}}</p>
+{{EmbedLiveSample('exemple', '100%', 200)}}
 
-<h2 id="polyline">polyline</h2>
+## polyline
 
-<p>Pour un élément {{SVGElement('polyline')}}, <code>points</code> défini une liste de point, chaqu'un représente le vecteur pour tracer la ligne. Chaque point est défini par X et Y dans le système de coordonées de l'utilisateur.</p>
+Pour un élément {{SVGElement('polyline')}}, `points` défini une liste de point, chaqu'un représente le vecteur pour tracer la ligne. Chaque point est défini par X et Y dans le système de coordonées de l'utilisateur.
 
-<div class="note">
-  <p><strong>Note :</strong> Un polygone est une forme ouverte, ce qui implique que le dernier point n'est pas connecté au premier point.</p>
-</div>
+> **Note :** Un polygone est une forme ouverte, ce qui implique que le dernier point n'est pas connecté au premier point.
 
 <table class="properties">
- <tbody>
-  <tr>
-   <th scope="row">Valeur</th>
-   <td>[ {{cssxref("number")}}+ ]#</td>
-  </tr>
-  <tr>
-   <th scope="row">Valeur par défaut</th>
-   <td><em>aucune</em></td>
-  </tr>
-  <tr>
-   <th scope="row">Peut être animé</th>
-   <td>Oui</td>
-  </tr>
- </tbody>
+  <tbody>
+    <tr>
+      <th scope="row">Valeur</th>
+      <td>[ {{cssxref("number")}}+ ]#</td>
+    </tr>
+    <tr>
+      <th scope="row">Valeur par défaut</th>
+      <td><em>aucune</em></td>
+    </tr>
+    <tr>
+      <th scope="row">Peut être animé</th>
+      <td>Oui</td>
+    </tr>
+  </tbody>
 </table>
 
-<h3 id="Exemple">Exemple</h3>
+### Exemple
 
-<pre class="brush: css hidden">html,body,svg { height:100% }</pre>
+```css hidden
+html,body,svg { height:100% }
+```
 
-<pre class="brush: html">&lt;svg viewBox="-10 -10 120 120" xmlns="http://www.w3.org/2000/svg"&gt;
-  &lt;!-- polyline est une forme ouverte --&gt;
-  &lt;polyline stroke="black" fill="none"
-   points="50,0 21,90 98,35 2,35 79,90"/&gt;
-&lt;/svg&gt;</pre>
+```html
+<svg viewBox="-10 -10 120 120" xmlns="http://www.w3.org/2000/svg">
+  <!-- polyline est une forme ouverte -->
+  <polyline stroke="black" fill="none"
+   points="50,0 21,90 98,35 2,35 79,90"/>
+</svg>
+```
 
-<p>{{EmbedLiveSample('polyline', '100%', 200)}}</p>
+{{EmbedLiveSample('polyline', '100%', 200)}}
 
-<h2 id="polygon">polygon</h2>
+## polygon
 
-<p>Pour un élément {{SVGElement('polyline')}}, <code>points</code> défini une liste de point, chaqu'un représente le vecteur pour tracer la ligne. Chaque point est défini par X et Y dans le système de coordonées de l'utilisateur.</p>
+Pour un élément {{SVGElement('polyline')}}, `points` défini une liste de point, chaqu'un représente le vecteur pour tracer la ligne. Chaque point est défini par X et Y dans le système de coordonées de l'utilisateur.
 
-<div class="note">
-  <p><strong>Note :</strong> Un polygone est une forme fermée, ce qui implique que le dernier point est connecté au premier.</p>
-</div>
+> **Note :** Un polygone est une forme fermée, ce qui implique que le dernier point est connecté au premier.
 
 <table class="properties">
- <tbody>
-  <tr>
-   <th scope="row">Valeur</th>
-   <td>[ {{cssxref("number")}}+ ]#</td>
-  </tr>
-  <tr>
-   <th scope="row">Valeur par défaut</th>
-   <td><em>aucune</em></td>
-  </tr>
-  <tr>
-   <th scope="row">Peut être animé</th>
-   <td>Oui</td>
-  </tr>
- </tbody>
+  <tbody>
+    <tr>
+      <th scope="row">Valeur</th>
+      <td>[ {{cssxref("number")}}+ ]#</td>
+    </tr>
+    <tr>
+      <th scope="row">Valeur par défaut</th>
+      <td><em>aucune</em></td>
+    </tr>
+    <tr>
+      <th scope="row">Peut être animé</th>
+      <td>Oui</td>
+    </tr>
+  </tbody>
 </table>
 
-<h3 id="Example">Example</h3>
-
-<pre class="brush: css hidden">html,body,svg { height:100% }</pre>
-
-<pre class="brush: html">&lt;svg viewBox="-10 -10 120 120" xmlns="http://www.w3.org/2000/svg"&gt;
-  &lt;!-- polygon est une forme fermée --&gt;
-  &lt;polygon stroke="black" fill="none"
-   points="50,0 21,90 98,35 2,35 79,90" /&gt;
-&lt;/svg&gt;</pre>
-
-<p>{{EmbedLiveSample('polygon', '100%', 200)}}</p>
-
-<h2 id="Spécification">Spécification</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">Status</th>
-   <th scope="col">Commentaire</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName("SVG2", "shapes.html#PolygonElementPointsAttribute", "points")}}</td>
-   <td>{{Spec2("SVG2")}}</td>
-   <td>Définition de <code>&lt;polygon&gt;</code></td>
-  </tr>
-  <tr>
-   <td>{{SpecName("SVG2", "shapes.html#PolylineElementPointsAttribute", "points")}}</td>
-   <td>{{Spec2("SVG2")}}</td>
-   <td>Définition de <code>&lt;polyline&gt;</code></td>
-  </tr>
-  <tr>
-   <td>{{SpecName("SVG1.1", "shapes.html#PolygonElementPointsAttribute", "points")}}</td>
-   <td>{{Spec2("SVG1.1")}}</td>
-   <td>Définition initiale de <code>&lt;polygon&gt;</code></td>
-  </tr>
-  <tr>
-   <td>{{SpecName("SVG1.1", "shapes.html#PolylineElementPointsAttribute", "points")}}</td>
-   <td>{{Spec2("SVG1.1")}}</td>
-   <td>Définition initiale de <code>&lt;polyline&gt;</code></td>
-  </tr>
- </tbody>
-</table>
+### Example
+
+```css hidden
+html,body,svg { height:100% }
+```
+
+```html
+<svg viewBox="-10 -10 120 120" xmlns="http://www.w3.org/2000/svg">
+  <!-- polygon est une forme fermée -->
+  <polygon stroke="black" fill="none"
+   points="50,0 21,90 98,35 2,35 79,90" />
+</svg>
+```
+
+{{EmbedLiveSample('polygon', '100%', 200)}}
+
+## Spécification
+
+| Spécification                                                                                            | Status                   | Commentaire                         |
+| -------------------------------------------------------------------------------------------------------- | ------------------------ | ----------------------------------- |
+| {{SpecName("SVG2", "shapes.html#PolygonElementPointsAttribute", "points")}}     | {{Spec2("SVG2")}} | Définition de `<polygon>`           |
+| {{SpecName("SVG2", "shapes.html#PolylineElementPointsAttribute", "points")}}     | {{Spec2("SVG2")}} | Définition de `<polyline>`          |
+| {{SpecName("SVG1.1", "shapes.html#PolygonElementPointsAttribute", "points")}} | {{Spec2("SVG1.1")}} | Définition initiale de `<polygon>`  |
+| {{SpecName("SVG1.1", "shapes.html#PolylineElementPointsAttribute", "points")}} | {{Spec2("SVG1.1")}} | Définition initiale de `<polyline>` |
diff --git a/files/fr/web/svg/attribute/presentation/index.md b/files/fr/web/svg/attribute/presentation/index.md
index bf0a47bbee..7eef5286d7 100644
--- a/files/fr/web/svg/attribute/presentation/index.md
+++ b/files/fr/web/svg/attribute/presentation/index.md
@@ -3,270 +3,266 @@ title: Attributs SVG de présentation
 slug: Web/SVG/Attribute/Presentation
 translation_of: Web/SVG/Attribute/Presentation
 ---
-<p>{{draft}}</p>
+{{draft}}
 
-<p>Les <em>attributs SVG de présentation</em> sont des propriétés CSS pouvant être utilisées comme attributs sur les éléments SVG</p>
+Les _attributs SVG de présentation_ sont des propriétés CSS pouvant être utilisées comme attributs sur les éléments SVG
 
-<ul>
- <li>alignment-baseline</li>
- <li>baseline-shift</li>
- <li>clip</li>
- <li>clip-path</li>
- <li>clip-rule</li>
- <li>color</li>
- <li>color-interpolation</li>
- <li>color-interpolation-filters</li>
- <li>color-profile</li>
- <li>color-rendering</li>
- <li>cursor</li>
- <li>direction</li>
- <li>display</li>
- <li>dominant-baseline</li>
- <li>enable-background</li>
- <li>fill</li>
- <li>fill-opacity</li>
- <li>fill-rule</li>
- <li>filter</li>
- <li>flood-color</li>
- <li>flood-opacity</li>
- <li>font-family</li>
- <li>font-size</li>
- <li>font-size-adjust</li>
- <li>font-stretch</li>
- <li>font-style</li>
- <li>font-variant</li>
- <li>font-weight</li>
- <li>glyph-orientation-horizontal</li>
- <li>glyph-orientation-vertical</li>
- <li>image-rendering</li>
- <li>kerning</li>
- <li>letter-spacing</li>
- <li>lighting-color</li>
- <li>marker-end</li>
- <li>marker-mid</li>
- <li>marker-start</li>
- <li>mask</li>
- <li>opacity</li>
- <li>overflow</li>
- <li>pointer-events</li>
- <li>shape-rendering</li>
- <li>solid-color</li>
- <li>solid-opacity</li>
- <li>stop-color</li>
- <li>stop-opacity</li>
- <li>stroke</li>
- <li>stroke-dasharray</li>
- <li>stroke-dashoffset</li>
- <li>stroke-linecap</li>
- <li>stroke-linejoin</li>
- <li>stroke-miterlimit</li>
- <li>stroke-opacity</li>
- <li>stroke-width</li>
- <li>text-anchor</li>
- <li>text-decoration</li>
- <li>text-rendering</li>
- <li>transform</li>
- <li>unicode-bidi</li>
- <li>vector-effect</li>
- <li>visibility</li>
- <li>word-spacing</li>
- <li>writing-mode</li>
-</ul>
+- alignment-baseline
+- baseline-shift
+- clip
+- clip-path
+- clip-rule
+- color
+- color-interpolation
+- color-interpolation-filters
+- color-profile
+- color-rendering
+- cursor
+- direction
+- display
+- dominant-baseline
+- enable-background
+- fill
+- fill-opacity
+- fill-rule
+- filter
+- flood-color
+- flood-opacity
+- font-family
+- font-size
+- font-size-adjust
+- font-stretch
+- font-style
+- font-variant
+- font-weight
+- glyph-orientation-horizontal
+- glyph-orientation-vertical
+- image-rendering
+- kerning
+- letter-spacing
+- lighting-color
+- marker-end
+- marker-mid
+- marker-start
+- mask
+- opacity
+- overflow
+- pointer-events
+- shape-rendering
+- solid-color
+- solid-opacity
+- stop-color
+- stop-opacity
+- stroke
+- stroke-dasharray
+- stroke-dashoffset
+- stroke-linecap
+- stroke-linejoin
+- stroke-miterlimit
+- stroke-opacity
+- stroke-width
+- text-anchor
+- text-decoration
+- text-rendering
+- transform
+- unicode-bidi
+- vector-effect
+- visibility
+- word-spacing
+- writing-mode
 
-<h2 id="Attributs">Attributs</h2>
+## Attributs
 
-<dl>
- <dt>{{SVGAttr('alignment-baseline')}}</dt>
- <dd>Spécifie comment un objet est aligné sur la ligne de pied de la police par rapport à son parent.<br>
- <small><em>Valeur</em>: <strong><code>auto</code></strong>|<code>baseline</code>|<code>before-edge</code>|<code>text-before-edge</code>|<code>middle</code>|<code>central</code>|<code>after-edge</code>|<code>text-after-edge</code>|<code>ideographic</code>|<code>alphabetic</code>|<code>hanging</code>|<code>mathematical</code>|<code>inherit</code>; <em>Animation</em>: <strong>Oui</strong></small></dd>
- <dt>{{SVGAttr('baseline-shift')}}</dt>
- <dd>Permet de positionner la ligne de pied de l'élément par rapport à celle de son parent.<br>
- <small><em>Valeur</em>: <strong><code>auto</code></strong>|<code>baseline</code>|<code>super</code>|<code>sub</code>|<a href="/docs/Web/SVG/Content_type#Percentage">&lt;percentage&gt;</a>|<a href="/docs/Web/SVG/Content_type#Length">&lt;length&gt;</a>|<code>inherit</code>; <em>Animation</em>: <strong>Oui</strong></small></dd>
- <dt>{{SVGAttr('clip')}} {{deprecated_inline('css')}}</dt>
- <dd>Définit quelle partie d'un élément est visible.<br>
- <small><em>Valeur</em>: <strong><code>auto</code></strong>|{{cssxref("shape")}}|<code>inherit</code>; <em>Animation</em>: <strong>Oui</strong></small></dd>
- <dt>{{SVGAttr('clip-path')}}</dt>
- <dd>Associe un chemin de détourage {{SVGElement('clipPath')}} à l'élément.<br>
- <small><em>Valeur</em>: <strong><code>none</code></strong>|<a href="/docs/Web/SVG/Content_type#FuncIRI">&lt;FuncIRI&gt;</a>|<code>inherit</code>; <em>Animation</em>: <strong>Oui</strong></small></dd>
- <dt>{{SVGAttr('clip-rule')}}</dt>
- <dd>Indique la règle de remplissage à appliquer sur un élément {{SVGElement('clipPath')}}.<br>
- <small><em>Valeur</em>: <strong><code>nonezero</code></strong>|<code>evenodd</code>|<code>inherit</code>; <em>Animation</em>: <strong>Oui</strong></small></dd>
- <dt>{{SVGAttr('color')}}</dt>
- <dd>Définit la valeur potentielle (valeur de <code>currentColor</code>) pour les attributs de présentation <code>fill</code>, <code>stroke</code>, <code>stop-color</code>, <code>flood-color</code> et <code>lighting-color</code>.<br>
- <small><em>Valeur</em>: <a href="/docs/Web/SVG/Content_type#Color">&lt;color&gt;</a>|<code>inherit</code>; <em>Animation</em>: <strong>Oui</strong></small></dd>
- <dt>{{SVGAttr('color-interpolation')}}</dt>
- <dd>Spécifie l'espace colométrique pour les interpolations de dégradés, les animations couleur et composition alpha.<br>
- <small><em>Valeur</em>: <code>auto</code>|<strong><code>sRGB</code></strong>|<code>linearRGB</code>|<code>inherit</code>; <em>Animation</em>: <strong>Oui</strong></small></dd>
- <dt>{{SVGAttr('color-interpolation-filters')}}</dt>
- <dd>Spécifie l'espace colométrique pour les opérations effectuées via des effets de filtre.<br>
- <small><em>Valeur</em>: <code>auto</code>|<code>sRGB</code>|<strong><code>linearRGB</code></strong>|<code>inherit</code>; <em>Animation</em>: <strong>Oui</strong></small></dd>
- <dt>{{SVGAttr('color-profile')}} {{deprecated_inline('svg2')}}</dt>
- <dd>Définit le profil de couleur qu'une image bitmap incluse via l'élément {{SVGElement('image')}} doit utiliser.<br>
- <small><em>Valeur</em>: <code>auto</code>|<code>sRGB</code>|<code>linearRGB</code>|<a href="/docs/Web/SVG/Content_type#Name">&lt;name&gt;</a>|<a href="/docs/Web/SVG/Content_type#IRI">&lt;IRI&gt;</a>|<code>inherit</code>; <em>Animation</em>: <strong>Oui</strong></small></dd>
- <dt>{{SVGAttr('color-rendering')}}</dt>
- <dd>Indique au navigateur comment optimiser ses opérations d'interpolation et de composition des couleurs.<br>
- <small><em>Valeur</em>: <strong><code>auto</code></strong>|<code>optimizeSpeed</code>|<code>optimizeQuality</code>|<code>inherit</code>; <em>Animation</em>: <strong>Oui</strong></small></dd>
- <dt>{{SVGAttr('cursor')}}</dt>
- <dd>Spécifie le curseur affiché lorsque la souris passe au-desuss de l'élément.<br>
- <small><em>Valeur</em>: <a href="/docs/Web/SVG/Content_type#FuncIRI">&lt;FuncIRI&gt;</a>|<a href="/docs/Web/CSS/cursor#Values">&lt;keywords&gt;</a>|<code>inherit</code>; <em>Animation</em>: <strong>Oui</strong></small></dd>
- <dt>{{SVGAttr('direction')}}</dt>
- <dd>Spécifie la direction d'écriture du texte.<br>
- <small><em>Valeur</em>: <strong><code>ltr</code></strong>|<code>rtl</code>|<code>inherit</code>; <em>Animation</em>: <strong>Oui</strong></small></dd>
- <dt>{{SVGAttr('display')}}</dt>
- <dd>Permet de contrôler le rendu d'éléments graphiques ou conteneurs.<br>
- <small><em>Valeur</em>: see css {{cssxref('display')}}; <em>Animation</em>: <strong>Oui</strong></small></dd>
- <dt>{{SVGAttr('dominant-baseline')}}</dt>
- <dd>Définit la ligne de pied utilisée pour aligner le texte.<br>
- <small><em>Valeur</em>: <code>auto</code>|<code>text-bottom</code>|<code>alphabetic</code>|<code>ideographic</code>|<code>middle</code>|<code>central</code>| <code>mathematical</code>|<code>hanging</code>|<code>text-top</code>; <em>Animation</em>: <strong>Oui</strong></small></dd>
- <dt>{{SVGAttr('enable-background')}} {{deprecated_inline('svg2')}}</dt>
- <dd>Indique au navigateur comment gérer l'image d'arrière plan.<br>
- <small><em>Valeur</em>: <strong><code>accumulate</code></strong>|<code>new</code>|<code>inherit</code>; <em>Animation</em>: <strong>Non</strong></small></dd>
- <dt>{{SVGAttr('fill')}}</dt>
- <dd>Définit la couleur de remplissage d'un élément graphique.<br>
- <small><em>Valeur</em>: <a href="/docs/Web/SVG/Content_type#Paint">&lt;paint&gt;</a>; <em>Animation</em>: <strong>Oui</strong></small></dd>
- <dt>{{SVGAttr('fill-opacity')}}</dt>
- <dd>Définit l'opacité du remplissage de l'élément.<br>
- <small><em>Valeur</em>: <a href="/docs/Web/SVG/Content_type#Number">&lt;number&gt;</a>|<a href="/docs/Web/SVG/Content_type#Percentage">&lt;percentage&gt;</a>; <em>Animation</em>: <strong>Oui</strong></small></dd>
- <dt>{{SVGAttr('fill-rule')}}</dt>
- <dd>Indique comment déterminer quelles parties du chemin se trouvent à l'intérieur de la forme.<br>
- <small><em>Valeur</em>: <strong><code>nonzero</code></strong>|<code>evenodd</code>|<code>inherit</code>; <em>Animation</em>: <strong>Oui</strong></small></dd>
- <dt>{{SVGAttr('filter')}}</dt>
- <dd>Applique un filtre, définit par un élément {{SVGElement('filter')}}, à l'élément.<br>
- <small><em>Valeur</em>: <a href="/docs/Web/SVG/Content_type#FuncIRI">&lt;FuncIRI&gt;</a>|<strong><code>none</code></strong>|<code>inherit</code>; <em>Animation</em>: <strong>Oui</strong></small></dd>
- <dt>{{SVGAttr('flood-color')}}</dt>
- <dd>Indique quelle couleur utiliser pour remplir la région du filtre, définit par les éléments {{SVGElement('feFlood')}} ou {{SVGElement('feDropShadow')}}.<br>
- <small><em>Valeur</em>: <a href="/docs/Web/SVG/Content_type#Color">&lt;color&gt;</a>; <em>Animation</em>: <strong>Oui</strong></small></dd>
- <dt>{{SVGAttr('flood-opacity')}}</dt>
- <dd>Indique l'opacité à utiliser pour remplir la région du filtre, définit par les éléments {{SVGElement('feFlood')}} ou {{SVGElement('feDropShadow')}}.<br>
- <small><em>Valeur</em>: <a href="/docs/Web/SVG/Content_type#Number">&lt;number&gt;</a>|<a href="/docs/Web/SVG/Content_type#Percentage">&lt;percentage&gt;</a>; <em>Animation</em>: <strong>Oui</strong></small></dd>
- <dt>{{SVGAttr('font-family')}}</dt>
- <dd>Indique la police utiliser pour restituer le texte de l'élément.<br>
- <small><em>Valeur</em>: see css {{cssxref('font-family')}}; <em>Animation</em>: <strong>Oui</strong></small></dd>
- <dt>{{SVGAttr('font-size')}}</dt>
- <dd>Spécifie la taille de la police.<br>
- <small><em>Valeur</em>: see css {{cssxref('font-size')}}; <em>Animation</em>: <strong>Oui</strong></small></dd>
- <dt>{{SVGAttr('font-size-adjust')}}</dt>
- <dd>Spécifie que la taille de la police doit être choisit en se basant sur la taille des lettres minuscules et non des majuscules.<br>
- <small><em>Valeur</em>: <a href="/docs/Web/SVG/Content_type#Number">&lt;number&gt;</a>|<code><strong>none</strong></code>|<code>inherit</code>; <em>Animation</em>: <strong>Oui</strong></small></dd>
- <dt>{{SVGAttr('font-stretch')}}</dt>
- <dd>Sélectionne la version normale, condensée ou espacée d'une police.<br>
- <small><em>Valeur</em>: see css {{cssxref('font-stretch')}}; <em>Animation</em>: <strong>Oui</strong></small></dd>
- <dt>{{SVGAttr('font-style')}}</dt>
- <dd>Spécifie si la police doit être stylisée en normal, italique ou oblique.<br>
- <small><em>Valeur</em>: <strong><code>normal</code></strong>|<code>italic</code>|<code>oblique</code>; <em>Animation</em>: <strong>Oui</strong></small></dd>
- <dt>{{SVGAttr('font-variant')}}</dt>
- <dd>Spécifie si une police doit utiliser certaines variations, telles que les petites majuscules ou les ligatures.<br>
- <small><em>Valeur</em>: see css {{cssxref('font-variant')}}; <em>Animation</em>: <strong>Oui</strong></small></dd>
- <dt>{{SVGAttr('font-weight')}}</dt>
- <dd>Spécifie l'épaisseur (ou graisse) de la police.<br>
- <small><em>Valeur</em>: <strong><code>normal</code></strong>|<code>bold</code>|<code>lighter</code>|<code>bolder</code>|<code>100</code>|<code>200</code>|<code>300</code>|<code>400</code>|<code>500</code>|<code>600</code>|<code>700</code>|<code>800</code>|<code>900</code>; <em>Animation</em>: <strong>Oui</strong></small></dd>
- <dt>{{SVGAttr('glyph-orientation-horizontal')}} {{deprecated_inline('svg2')}}</dt>
- <dd>Contrôle l'orientation des glyphes lorsque la direction en ligne est horizontale.<br>
- <small><em>Valeur</em>: <a href="/docs/Web/SVG/Content_type#Angle">&lt;angle&gt;</a>|<code>inherit</code>; <em>Animation</em>: <strong>Non</strong></small></dd>
- <dt>{{SVGAttr('glyph-orientation-vertical')}} {{deprecated_inline('svg2')}}</dt>
- <dd>Contrôle l'orientation des glyphes lorsque la direction en ligne est verticale.<br>
- <small><em>Valeur</em>: <strong><code>auto</code></strong>|<a href="/docs/Web/SVG/Content_type#Angle">&lt;angle&gt;</a>|<code>inherit</code>; <em>Animation</em>: <strong>Non</strong></small></dd>
- <dt>{{SVGAttr('image-rendering')}}</dt>
- <dd>Indique au navigateur le compromis à effectuer entre vitesse et qualité du rendu des images.<br>
- <small><em>Valeur</em>: <strong><code>auto</code></strong>|<code>optimizeQuality</code>|<code>optimizeSpeed</code>; <em>Animation</em>: <strong>Oui</strong></small></dd>
- <dt>{{SVGAttr('kerning')}} {{deprecated_inline('svg2')}}</dt>
- <dd>Indique au navigateur s'il doit ajuster l'espacement entre les glyphes.<br>
- <small><em>Valeur</em>: <strong><code>auto</code></strong>|<a href="/docs/Web/SVG/Content_type#Length">&lt;length&gt;</a>|<code>inherit</code>; <em>Animation</em>: <strong>Oui</strong></small></dd>
- <dt>{{SVGAttr('letter-spacing')}}</dt>
- <dd>Contrôle l'espacement entre les caratères du texte.<br>
- <small><em>Valeur</em>: <strong><code>normal</code></strong>|<a href="/docs/Web/SVG/Content_type#Length">&lt;length&gt;</a>|<code>inherit</code>; <em>Animation</em>: <strong>Oui</strong></small></dd>
- <dt>{{SVGAttr('lighting-color')}}</dt>
- <dd>Définit la couleur de la source de lumière pour les filtres {{SVGElement('feDiffuseLighting')}} et {{SVGElement('feSpecularLighting')}}.<br>
- <small><em>Valeur</em>: <a href="/docs/Web/SVG/Content_type#Color">&lt;color&gt;</a>; <em>Animation</em>: <strong>Oui</strong></small></dd>
- <dt>{{SVGAttr('marker-end')}}</dt>
- <dd>Définit la pointe de la flèche ou polymarker dessiné à la fin de l'élément {{SVGElement('path')}} ou ou de la forme.<br>
- <small><em>Valeur</em>: <a href="/docs/Web/SVG/Content_type#FuncIRI">&lt;FuncIRI&gt;</a>|<strong><code>none</code></strong>|<code>inherit</code>; <em>Animation</em>: <strong>Oui</strong></small></dd>
- <dt>{{SVGAttr('marker-mid')}}</dt>
- <dd>Définit la pointe de la flèche ou polymarker dessiné entre chaque segment de l'élément {{SVGElement('path')}} ou de la forme.<br>
- <small><em>Valeur</em>: <a href="/docs/Web/SVG/Content_type#FuncIRI">&lt;FuncIRI&gt;</a>|<strong><code>none</code></strong>|<code>inherit</code>; <em>Animation</em>: <strong>Oui</strong></small></dd>
- <dt>{{SVGAttr('marker-start')}}</dt>
- <dd>Définit la pointe de la flèche ou polymarker dessiné au début de l'élément {{SVGElement('path')}} ou ou de la forme.<br>
- <small><em>Valeur</em>: <a href="/docs/Web/SVG/Content_type#FuncIRI">&lt;FuncIRI&gt;</a>|<strong><code>none</code></strong>|<code>inherit</code>; <em>Animation</em>: <strong>Oui</strong></small></dd>
- <dt>{{SVGAttr('mask')}}</dt>
- <dd>Modifie la visibilité d'un élément en masquant ou détourant l'image à des endroits spécifiques.<br>
- <small><em>Valeur</em>: see css {{cssxref('mask')}}; <em>Animation</em>: <strong>Oui</strong></small></dd>
- <dt>{{SVGAttr('opacity')}}</dt>
- <dd>Spécifie l'opacité d'un objet ou d'un groupe d'objets.<br>
- <small><em>Valeur</em>: <a href="/docs/Web/SVG/Content_type#Opacity_value">&lt;opacity-value&gt;</a>; <em>Animation</em>: <strong>Oui</strong></small></dd>
- <dt>{{SVGAttr('overflow')}}</dt>
- <dd>Spécifie si le contenu d'un élément bloc est tronqué lorsqu'il déborde de la zone de l'élément.<br>
- <small><em>Valeur</em>: <code><strong>visible</strong></code>|<code>hidden|scroll</code>|<code>auto</code>|<code>inherit</code>; <em>Animation</em>: <strong>Oui</strong></small></dd>
- <dt>{{SVGAttr('pointer-events')}}</dt>
- <dd>Définit si et quand un élément peut être la cible d'un événement de la souris.<br>
- <small><em>Valeur</em>: <code>bounding-box</code>|<code><strong>visiblePainted</strong></code>|<code>visibleFil</code>|<code>visibleStroke</code>|<code>visible</code> |<code>painted</code>|<code>fill</code>|<code>stroke</code>|<code>all</code>|<code>none</code>; <em>Animation</em>: <strong>Oui</strong></small></dd>
- <dt>{{SVGAttr('shape-rendering')}}</dt>
- <dd>Indique au navigateur le compromis à effectuer entre vitesse et qualité du rendu des éléments {{SVGElement('path')}} et des formes.<br>
- <small><em>Valeur</em>: <code><strong>auto</strong></code>|<code>optimizeSpeed</code>|<code>crispEdges</code>|<code>geometricPrecision</code> |<code>inherit</code>; <em>Animation</em>: <strong>Oui</strong></small></dd>
- <dt>{{SVGAttr('solid-color')}}</dt>
- <dd>-<br>
- <small><em>Valeur</em>:; <em>Animation</em>: <strong>-</strong></small></dd>
- <dt>{{SVGAttr('solid-opacity')}}</dt>
- <dd>-<br>
- <small><em>Valeur</em>:; <em>Animation</em>: <strong>-</strong></small></dd>
- <dt>{{SVGAttr('stop-color')}}</dt>
- <dd>Indique la couleur à utiliser sur un {{SVGElement('stop')}} d'un dégradé.<br>
- <small><em>Valeur</em>: <code>currentColor</code>|<a href="/fr/SVG/Content_type#Color" title="en/SVG/Content_type#Color">&lt;color&gt;</a>|<a href="/fr/SVG/Content_type#ICCColor" title="en/SVG/Content_type#ICCColor">&lt;icccolor&gt;</a>|<code>inherit</code>; <em>Animation</em>: <strong>Oui</strong></small></dd>
- <dt>{{SVGAttr('stop-opacity')}}</dt>
- <dd>Indique l'opacité du {{SVGElement('stop')}}.<br>
- <small><em>Valeur</em>: <a href="/fr/SVG/Content_type#Opacity_value" title="en/SVG/Content_type#Opacity_value">&lt;opacity-value&gt;</a>|<code>inherit</code>; <em>Animation</em>: <strong>Oui</strong></small></dd>
- <dt>{{SVGAttr('stroke')}}</dt>
- <dd>Définit la couleur à utiliser pour le contour de l'élément.<br>
- <small><em>Valeur</em>: <a href="/docs/Web/SVG/Content_type#Paint">&lt;paint&gt;</a>; <em>Animation</em>: <strong>Oui</strong></small></dd>
- <dt>{{SVGAttr('stroke-dasharray')}}</dt>
- <dd>Définit le motif des pointillés utilisé pour dessiner le contour de la forme.<br>
- <small><em>Valeur</em>: <code>none</code>|<code>&lt;dasharray&gt;</code>; <em>Animation</em>: <strong>Oui</strong></small></dd>
- <dt>{{SVGAttr('stroke-dashoffset')}}</dt>
- <dd>Décale la position de départ des pointillés.<br>
- <small><em>Valeur</em>: <a href="/fr/SVG/Content_type#Percentage" title="en/SVG/Content_type#Percentage">&lt;percentage&gt;</a>|<a href="/fr/SVG/Content_type#Length" title="en/SVG/Content_type#Length">&lt;length&gt;</a>; <em>Animation</em>: <strong>Oui</strong></small></dd>
- <dt><strong>{{SVGAttr('stroke-linecap')}}</strong></dt>
- <dd>Définit la forme de la fin des lignes.<br>
- <small><em>Valeur</em>: <code><strong>butt</strong></code>|<code>round</code>|<code>square</code>; <em>Animation</em>: <strong>Oui</strong></small></dd>
- <dt><strong>{{SVGAttr('stroke-linejoin')}}</strong></dt>
- <dd>Définit la manière de dessiner la liaison entre deux segments de ligne.<br>
- <small><em>Valeur</em>: <code>arcs</code>|<code>bevel</code>|<code><strong>miter</strong></code>|<code>miter-clip</code>|<code>round</code>; <em>Animation</em>: <strong>Oui</strong></small></dd>
- <dt><strong>{{SVGAttr('stroke-miterlimit')}}</strong></dt>
- <dd>Définit la limite du rapport entre la longueur du coin et la valeur de {{SVGAttr('stroke-width')}} utilisée pour dessiner la liaison entre deux segments de ligne.<br>
- <small><em>Valeur</em>: <a href="/fr/SVG/Content_type#Number" title="en/SVG/Content_type#Number">&lt;number&gt;</a>; <em>Animation</em>: <strong>Oui</strong></small></dd>
- <dt><strong>{{SVGAttr('stroke-opacity')}}</strong></dt>
- <dd>Définit l'opacité du contour d'une forme.<br>
- <small><em>Valeur</em>: <a href="/fr/SVG/Content_type#Opacity_value" title="en/SVG/Content_type#Opacity_value">&lt;opacity-value&gt;</a>|<a href="/docs/Web/SVG/Content_type#Paint">&lt;percentage&gt;</a>; <em>Animation</em>: <strong>Oui</strong></small></dd>
- <dt><strong>{{SVGAttr('stroke-width')}}</strong></dt>
- <dd>Définit l'épaisseur du contour appliqué à une forme.<br>
- <small><em>Valeur</em>: <a href="/docs/Web/SVG/Content_type#Length">&lt;length&gt;</a>|<a href="/docs/Web/SVG/Content_type#Percentage">&lt;percentage&gt;</a>; <em>Animation</em>: <strong>Oui</strong></small></dd>
- <dt><strong>{{SVGAttr('text-anchor')}}</strong></dt>
- <dd>Définit l'alignement vertical d'une chaîne de texte.<br>
- <small><em>Valeur</em>: <code>start</code>|<code>middle</code>|<code>end</code>|<code><strong>inherit</strong></code>; <em>Animation</em>: <strong>Oui</strong></small></dd>
- <dt><strong>{{SVGAttr('text-decoration')}}</strong></dt>
- <dd>Définit l'apparence des lignes décoratives sur le texte.<br>
- <small><em>Valeur</em>: <code>none</code>|<code>underline</code>|<code>overline</code>|<code>line-through</code>|<code>blink</code>|<code><strong>inherit</strong></code>; <em>Animation</em>: <strong>Oui</strong></small></dd>
- <dt><strong>{{SVGAttr('text-rendering')}}</strong></dt>
- <dd>Indique au navigateur le compromis à effectuer entre vitesse et qualité du rendu du texte.<br>
- <small><em>Valeur</em>: <code><strong>auto</strong></code>|<code>optimizeSpeed</code>|<code>optimizeLegibility</code>|<code>geometricPrecision</code>|<code>inherit</code>; <em>Animation</em>: <strong>Oui</strong></small></dd>
- <dt><strong>{{SVGAttr('transform')}}</strong></dt>
- <dd>Définit une liste de transformations à appliquer à un élément et à ses enfants.<br>
- <small><em>Valeur</em>: <a href="/docs/Web/SVG/Content_type#Transform-list">&lt;transform-list&gt;</a>; <em>Animation</em>: <strong>Oui</strong></small></dd>
- <dt><strong>{{SVGAttr('unicode-bidi')}}</strong></dt>
- <dd>-<br>
- <small><em>Valeur</em>:; <em>Animation</em>: <strong>-</strong></small></dd>
- <dt><strong>{{SVGAttr('vector-effect')}}</strong></dt>
- <dd>Spécifie l'effet vectoriel à utiliser lors du dessin d'un objet.<br>
- <small><em>Valeur</em>: <code>default</code>|<code>non-scaling-stroke</code>|<code>inherit</code>|<code>&lt;uri&gt;</code>; <em>Animation</em>: <strong>Oui</strong></small></dd>
- <dt><strong>{{SVGAttr('visibility')}}</strong></dt>
- <dd>Définit la visibilité d'éléments graphiques.<br>
- <small><em>Valeur</em>: <strong><code>visible</code></strong>|<code>hidden</code>|<code>collapse</code>|<code>inherit</code>; <em>Animation</em>: <strong>Oui</strong></small></dd>
- <dt><strong>{{SVGAttr('word-spacing')}}</strong></dt>
- <dd>Définit la longueur des espaces entre les mots d'un texte.<br>
- <small><em>Valeur</em>: <a href="/fr/SVG/Content_type#Length" title="https://developer.mozilla.org/en/SVG/Content_type#Length">&lt;length&gt;</a>|<code><strong title="this is the default value">inherit</strong></code>; <em>Animation</em>: <strong>Oui</strong></small></dd>
- <dt><strong>{{SVGAttr('writing-mode')}}</strong></dt>
- <dd>Spécifie si la direction d'un élément  {{SVGElement('text')}} doit être de gauche-à-droite, droite-à-gauche, ou de haut-en-bas.<br>
- <small><em>Valeur</em>: <strong><code>lr-tb</code></strong>|<code>rl-tb</code>|<code>tb-rl</code>|<code>lr</code>|<code>rl</code>|<code>tb</code>|<code>inherit</code>; <em>Animation</em>: <strong>Oui</strong></small></dd>
-</dl>
+- {{SVGAttr('alignment-baseline')}}
+  - : Spécifie comment un objet est aligné sur la ligne de pied de la police par rapport à son parent.
+    _Valeur_: **`auto`**|`baseline`|`before-edge`|`text-before-edge`|`middle`|`central`|`after-edge`|`text-after-edge`|`ideographic`|`alphabetic`|`hanging`|`mathematical`|`inherit`; _Animation_: **Oui**
+- {{SVGAttr('baseline-shift')}}
+  - : Permet de positionner la ligne de pied de l'élément par rapport à celle de son parent.
+    _Valeur_: **`auto`**|`baseline`|`super`|`sub`|[\<percentage>](/docs/Web/SVG/Content_type#Percentage)|[\<length>](/docs/Web/SVG/Content_type#Length)|`inherit`; _Animation_: **Oui**
+- {{SVGAttr('clip')}} {{deprecated_inline('css')}}
+  - : Définit quelle partie d'un élément est visible.
+    _Valeur_: **`auto`**|{{cssxref("shape")}}|`inherit`; _Animation_: **Oui**
+- {{SVGAttr('clip-path')}}
+  - : Associe un chemin de détourage {{SVGElement('clipPath')}} à l'élément.
+    _Valeur_: **`none`**|[\<FuncIRI>](/docs/Web/SVG/Content_type#FuncIRI)|`inherit`; _Animation_: **Oui**
+- {{SVGAttr('clip-rule')}}
+  - : Indique la règle de remplissage à appliquer sur un élément {{SVGElement('clipPath')}}.
+    _Valeur_: **`nonezero`**|`evenodd`|`inherit`; _Animation_: **Oui**
+- {{SVGAttr('color')}}
+  - : Définit la valeur potentielle (valeur de `currentColor`) pour les attributs de présentation `fill`, `stroke`, `stop-color`, `flood-color` et `lighting-color`.
+    _Valeur_: [\<color>](/docs/Web/SVG/Content_type#Color)|`inherit`; _Animation_: **Oui**
+- {{SVGAttr('color-interpolation')}}
+  - : Spécifie l'espace colométrique pour les interpolations de dégradés, les animations couleur et composition alpha.
+    _Valeur_: `auto`|**`sRGB`**|`linearRGB`|`inherit`; _Animation_: **Oui**
+- {{SVGAttr('color-interpolation-filters')}}
+  - : Spécifie l'espace colométrique pour les opérations effectuées via des effets de filtre.
+    _Valeur_: `auto`|`sRGB`|**`linearRGB`**|`inherit`; _Animation_: **Oui**
+- {{SVGAttr('color-profile')}} {{deprecated_inline('svg2')}}
+  - : Définit le profil de couleur qu'une image bitmap incluse via l'élément {{SVGElement('image')}} doit utiliser.
+    _Valeur_: `auto`|`sRGB`|`linearRGB`|[\<name>](/docs/Web/SVG/Content_type#Name)|[\<IRI>](/docs/Web/SVG/Content_type#IRI)|`inherit`; _Animation_: **Oui**
+- {{SVGAttr('color-rendering')}}
+  - : Indique au navigateur comment optimiser ses opérations d'interpolation et de composition des couleurs.
+    _Valeur_: **`auto`**|`optimizeSpeed`|`optimizeQuality`|`inherit`; _Animation_: **Oui**
+- {{SVGAttr('cursor')}}
+  - : Spécifie le curseur affiché lorsque la souris passe au-desuss de l'élément.
+    _Valeur_: [\<FuncIRI>](/docs/Web/SVG/Content_type#FuncIRI)|[\<keywords>](/docs/Web/CSS/cursor#Values)|`inherit`; _Animation_: **Oui**
+- {{SVGAttr('direction')}}
+  - : Spécifie la direction d'écriture du texte.
+    _Valeur_: **`ltr`**|`rtl`|`inherit`; _Animation_: **Oui**
+- {{SVGAttr('display')}}
+  - : Permet de contrôler le rendu d'éléments graphiques ou conteneurs.
+    _Valeur_: see css {{cssxref('display')}}; _Animation_: **Oui**
+- {{SVGAttr('dominant-baseline')}}
+  - : Définit la ligne de pied utilisée pour aligner le texte.
+    _Valeur_: `auto`|`text-bottom`|`alphabetic`|`ideographic`|`middle`|`central`| `mathematical`|`hanging`|`text-top`; _Animation_: **Oui**
+- {{SVGAttr('enable-background')}} {{deprecated_inline('svg2')}}
+  - : Indique au navigateur comment gérer l'image d'arrière plan.
+    _Valeur_: **`accumulate`**|`new`|`inherit`; _Animation_: **Non**
+- {{SVGAttr('fill')}}
+  - : Définit la couleur de remplissage d'un élément graphique.
+    _Valeur_: [\<paint>](/docs/Web/SVG/Content_type#Paint); _Animation_: **Oui**
+- {{SVGAttr('fill-opacity')}}
+  - : Définit l'opacité du remplissage de l'élément.
+    _Valeur_: [\<number>](/docs/Web/SVG/Content_type#Number)|[\<percentage>](/docs/Web/SVG/Content_type#Percentage); _Animation_: **Oui**
+- {{SVGAttr('fill-rule')}}
+  - : Indique comment déterminer quelles parties du chemin se trouvent à l'intérieur de la forme.
+    _Valeur_: **`nonzero`**|`evenodd`|`inherit`; _Animation_: **Oui**
+- {{SVGAttr('filter')}}
+  - : Applique un filtre, définit par un élément {{SVGElement('filter')}}, à l'élément.
+    _Valeur_: [\<FuncIRI>](/docs/Web/SVG/Content_type#FuncIRI)|**`none`**|`inherit`; _Animation_: **Oui**
+- {{SVGAttr('flood-color')}}
+  - : Indique quelle couleur utiliser pour remplir la région du filtre, définit par les éléments {{SVGElement('feFlood')}} ou {{SVGElement('feDropShadow')}}.
+    _Valeur_: [\<color>](/docs/Web/SVG/Content_type#Color); _Animation_: **Oui**
+- {{SVGAttr('flood-opacity')}}
+  - : Indique l'opacité à utiliser pour remplir la région du filtre, définit par les éléments {{SVGElement('feFlood')}} ou {{SVGElement('feDropShadow')}}.
+    _Valeur_: [\<number>](/docs/Web/SVG/Content_type#Number)|[\<percentage>](/docs/Web/SVG/Content_type#Percentage); _Animation_: **Oui**
+- {{SVGAttr('font-family')}}
+  - : Indique la police utiliser pour restituer le texte de l'élément.
+    _Valeur_: see css {{cssxref('font-family')}}; _Animation_: **Oui**
+- {{SVGAttr('font-size')}}
+  - : Spécifie la taille de la police.
+    _Valeur_: see css {{cssxref('font-size')}}; _Animation_: **Oui**
+- {{SVGAttr('font-size-adjust')}}
+  - : Spécifie que la taille de la police doit être choisit en se basant sur la taille des lettres minuscules et non des majuscules.
+    _Valeur_: [\<number>](/docs/Web/SVG/Content_type#Number)|**`none`**|`inherit`; _Animation_: **Oui**
+- {{SVGAttr('font-stretch')}}
+  - : Sélectionne la version normale, condensée ou espacée d'une police.
+    _Valeur_: see css {{cssxref('font-stretch')}}; _Animation_: **Oui**
+- {{SVGAttr('font-style')}}
+  - : Spécifie si la police doit être stylisée en normal, italique ou oblique.
+    _Valeur_: **`normal`**|`italic`|`oblique`; _Animation_: **Oui**
+- {{SVGAttr('font-variant')}}
+  - : Spécifie si une police doit utiliser certaines variations, telles que les petites majuscules ou les ligatures.
+    _Valeur_: see css {{cssxref('font-variant')}}; _Animation_: **Oui**
+- {{SVGAttr('font-weight')}}
+  - : Spécifie l'épaisseur (ou graisse) de la police.
+    _Valeur_: **`normal`**|`bold`|`lighter`|`bolder`|`100`|`200`|`300`|`400`|`500`|`600`|`700`|`800`|`900`; _Animation_: **Oui**
+- {{SVGAttr('glyph-orientation-horizontal')}} {{deprecated_inline('svg2')}}
+  - : Contrôle l'orientation des glyphes lorsque la direction en ligne est horizontale.
+    _Valeur_: [\<angle>](/docs/Web/SVG/Content_type#Angle)|`inherit`; _Animation_: **Non**
+- {{SVGAttr('glyph-orientation-vertical')}} {{deprecated_inline('svg2')}}
+  - : Contrôle l'orientation des glyphes lorsque la direction en ligne est verticale.
+    _Valeur_: **`auto`**|[\<angle>](/docs/Web/SVG/Content_type#Angle)|`inherit`; _Animation_: **Non**
+- {{SVGAttr('image-rendering')}}
+  - : Indique au navigateur le compromis à effectuer entre vitesse et qualité du rendu des images.
+    _Valeur_: **`auto`**|`optimizeQuality`|`optimizeSpeed`; _Animation_: **Oui**
+- {{SVGAttr('kerning')}} {{deprecated_inline('svg2')}}
+  - : Indique au navigateur s'il doit ajuster l'espacement entre les glyphes.
+    _Valeur_: **`auto`**|[\<length>](/docs/Web/SVG/Content_type#Length)|`inherit`; _Animation_: **Oui**
+- {{SVGAttr('letter-spacing')}}
+  - : Contrôle l'espacement entre les caratères du texte.
+    _Valeur_: **`normal`**|[\<length>](/docs/Web/SVG/Content_type#Length)|`inherit`; _Animation_: **Oui**
+- {{SVGAttr('lighting-color')}}
+  - : Définit la couleur de la source de lumière pour les filtres {{SVGElement('feDiffuseLighting')}} et {{SVGElement('feSpecularLighting')}}.
+    _Valeur_: [\<color>](/docs/Web/SVG/Content_type#Color); _Animation_: **Oui**
+- {{SVGAttr('marker-end')}}
+  - : Définit la pointe de la flèche ou polymarker dessiné à la fin de l'élément {{SVGElement('path')}} ou ou de la forme.
+    _Valeur_: [\<FuncIRI>](/docs/Web/SVG/Content_type#FuncIRI)|**`none`**|`inherit`; _Animation_: **Oui**
+- {{SVGAttr('marker-mid')}}
+  - : Définit la pointe de la flèche ou polymarker dessiné entre chaque segment de l'élément {{SVGElement('path')}} ou de la forme.
+    _Valeur_: [\<FuncIRI>](/docs/Web/SVG/Content_type#FuncIRI)|**`none`**|`inherit`; _Animation_: **Oui**
+- {{SVGAttr('marker-start')}}
+  - : Définit la pointe de la flèche ou polymarker dessiné au début de l'élément {{SVGElement('path')}} ou ou de la forme.
+    _Valeur_: [\<FuncIRI>](/docs/Web/SVG/Content_type#FuncIRI)|**`none`**|`inherit`; _Animation_: **Oui**
+- {{SVGAttr('mask')}}
+  - : Modifie la visibilité d'un élément en masquant ou détourant l'image à des endroits spécifiques.
+    _Valeur_: see css {{cssxref('mask')}}; _Animation_: **Oui**
+- {{SVGAttr('opacity')}}
+  - : Spécifie l'opacité d'un objet ou d'un groupe d'objets.
+    _Valeur_: [\<opacity-value>](/docs/Web/SVG/Content_type#Opacity_value); _Animation_: **Oui**
+- {{SVGAttr('overflow')}}
+  - : Spécifie si le contenu d'un élément bloc est tronqué lorsqu'il déborde de la zone de l'élément.
+    _Valeur_: **`visible`**|`hidden|scroll`|`auto`|`inherit`; _Animation_: **Oui**
+- {{SVGAttr('pointer-events')}}
+  - : Définit si et quand un élément peut être la cible d'un événement de la souris.
+    _Valeur_: `bounding-box`|**`visiblePainted`**|`visibleFil`|`visibleStroke`|`visible` |`painted`|`fill`|`stroke`|`all`|`none`; _Animation_: **Oui**
+- {{SVGAttr('shape-rendering')}}
+  - : Indique au navigateur le compromis à effectuer entre vitesse et qualité du rendu des éléments {{SVGElement('path')}} et des formes.
+    _Valeur_: **`auto`**|`optimizeSpeed`|`crispEdges`|`geometricPrecision` |`inherit`; _Animation_: **Oui**
+- {{SVGAttr('solid-color')}}
+  - : -
+    _Valeur_:; _Animation_: **-**
+- {{SVGAttr('solid-opacity')}}
+  - : -
+    _Valeur_:; _Animation_: **-**
+- {{SVGAttr('stop-color')}}
+  - : Indique la couleur à utiliser sur un {{SVGElement('stop')}} d'un dégradé.
+    _Valeur_: `currentColor`|[\<color>](/fr/SVG/Content_type#Color "en/SVG/Content_type#Color")|[\<icccolor>](/fr/SVG/Content_type#ICCColor "en/SVG/Content_type#ICCColor")|`inherit`; _Animation_: **Oui**
+- {{SVGAttr('stop-opacity')}}
+  - : Indique l'opacité du {{SVGElement('stop')}}.
+    _Valeur_: [\<opacity-value>](/fr/SVG/Content_type#Opacity_value "en/SVG/Content_type#Opacity_value")|`inherit`; _Animation_: **Oui**
+- {{SVGAttr('stroke')}}
+  - : Définit la couleur à utiliser pour le contour de l'élément.
+    _Valeur_: [\<paint>](/docs/Web/SVG/Content_type#Paint); _Animation_: **Oui**
+- {{SVGAttr('stroke-dasharray')}}
+  - : Définit le motif des pointillés utilisé pour dessiner le contour de la forme.
+    _Valeur_: `none`|`<dasharray>`; _Animation_: **Oui**
+- {{SVGAttr('stroke-dashoffset')}}
+  - : Décale la position de départ des pointillés.
+    _Valeur_: [\<percentage>](/fr/SVG/Content_type#Percentage "en/SVG/Content_type#Percentage")|[\<length>](/fr/SVG/Content_type#Length "en/SVG/Content_type#Length"); _Animation_: **Oui**
+- **{{SVGAttr('stroke-linecap')}}**
+  - : Définit la forme de la fin des lignes.
+    _Valeur_: **`butt`**|`round`|`square`; _Animation_: **Oui**
+- **{{SVGAttr('stroke-linejoin')}}**
+  - : Définit la manière de dessiner la liaison entre deux segments de ligne.
+    _Valeur_: `arcs`|`bevel`|**`miter`**|`miter-clip`|`round`; _Animation_: **Oui**
+- **{{SVGAttr('stroke-miterlimit')}}**
+  - : Définit la limite du rapport entre la longueur du coin et la valeur de {{SVGAttr('stroke-width')}} utilisée pour dessiner la liaison entre deux segments de ligne.
+    _Valeur_: [\<number>](/fr/SVG/Content_type#Number "en/SVG/Content_type#Number"); _Animation_: **Oui**
+- **{{SVGAttr('stroke-opacity')}}**
+  - : Définit l'opacité du contour d'une forme.
+    _Valeur_: [\<opacity-value>](/fr/SVG/Content_type#Opacity_value "en/SVG/Content_type#Opacity_value")|[\<percentage>](/docs/Web/SVG/Content_type#Paint); _Animation_: **Oui**
+- **{{SVGAttr('stroke-width')}}**
+  - : Définit l'épaisseur du contour appliqué à une forme.
+    _Valeur_: [\<length>](/docs/Web/SVG/Content_type#Length)|[\<percentage>](/docs/Web/SVG/Content_type#Percentage); _Animation_: **Oui**
+- **{{SVGAttr('text-anchor')}}**
+  - : Définit l'alignement vertical d'une chaîne de texte.
+    _Valeur_: `start`|`middle`|`end`|**`inherit`**; _Animation_: **Oui**
+- **{{SVGAttr('text-decoration')}}**
+  - : Définit l'apparence des lignes décoratives sur le texte.
+    _Valeur_: `none`|`underline`|`overline`|`line-through`|`blink`|**`inherit`**; _Animation_: **Oui**
+- **{{SVGAttr('text-rendering')}}**
+  - : Indique au navigateur le compromis à effectuer entre vitesse et qualité du rendu du texte.
+    _Valeur_: **`auto`**|`optimizeSpeed`|`optimizeLegibility`|`geometricPrecision`|`inherit`; _Animation_: **Oui**
+- **{{SVGAttr('transform')}}**
+  - : Définit une liste de transformations à appliquer à un élément et à ses enfants.
+    _Valeur_: [\<transform-list>](/docs/Web/SVG/Content_type#Transform-list); _Animation_: **Oui**
+- **{{SVGAttr('unicode-bidi')}}**
+  - : -
+    _Valeur_:; _Animation_: **-**
+- **{{SVGAttr('vector-effect')}}**
+  - : Spécifie l'effet vectoriel à utiliser lors du dessin d'un objet.
+    _Valeur_: `default`|`non-scaling-stroke`|`inherit`|`<uri>`; _Animation_: **Oui**
+- **{{SVGAttr('visibility')}}**
+  - : Définit la visibilité d'éléments graphiques.
+    _Valeur_: **`visible`**|`hidden`|`collapse`|`inherit`; _Animation_: **Oui**
+- **{{SVGAttr('word-spacing')}}**
+  - : Définit la longueur des espaces entre les mots d'un texte.
+    _Valeur_: [\<length>](/fr/SVG/Content_type#Length "https://developer.mozilla.org/en/SVG/Content_type#Length")|**`inherit`**; _Animation_: **Oui**
+- **{{SVGAttr('writing-mode')}}**
+  - : Spécifie si la direction d'un élément  {{SVGElement('text')}} doit être de gauche-à-droite, droite-à-gauche, ou de haut-en-bas.
+    _Valeur_: **`lr-tb`**|`rl-tb`|`tb-rl`|`lr`|`rl`|`tb`|`inherit`; _Animation_: **Oui**
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("svg.attributes.presentation")}}</p>
+{{Compat("svg.attributes.presentation")}}
diff --git a/files/fr/web/svg/attribute/preserveaspectratio/index.md b/files/fr/web/svg/attribute/preserveaspectratio/index.md
index 894241bcf5..c2cb1e250c 100644
--- a/files/fr/web/svg/attribute/preserveaspectratio/index.md
+++ b/files/fr/web/svg/attribute/preserveaspectratio/index.md
@@ -6,131 +6,132 @@ tags:
   - SVG Attribute
 translation_of: Web/SVG/Attribute/preserveAspectRatio
 ---
-<div>{{SVGRef}}</div>
-
-<p>L'attibut <strong><code>preserveAspectRatio</code></strong> indique comment un élément est mis à l'échelle lorsque le ratio largeur:hauteur de la <a href="/fr/docs/Web/SVG/Attribute/viewBox"><code>viewBox</code></a> est différent du ratio de la zone d'affichage (définit par les attributs <code>width</code> et <code>height</code>).</p>
-
-<p>Parce que les proportions du SVG sont définies par l'attribut <code>viewBox</code>, si ce dernier n'est pas défini alors l'attribut <code>preserveAspectRatio</code> n'a aucun effet (<em>à l'exception près de l'élément <a href="/fr/docs/Web/SVG/Element/image"><code>&lt;image&gt;</code></a> comme décrit ci-dessous</em>).</p>
-
-<h2 id="example">Exemple</h2>
-
-<pre class="brush: html">&lt;svg viewBox="-1 -1 162 92" xmlns="http://www.w3.org/2000/svg"&gt;
-  &lt;defs&gt;
-     &lt;path id="smiley" d="M50,10 A40,40,1,1,1,50,90 A40,40,1,1,1,50,10 M30,40 Q36,35,42,40 M58,40 Q64,35,70,40 M30,60 Q50,75,70,60 Q50,75,30,60" /&gt;
-  &lt;/defs&gt;
-
-  &lt;!-- (largeur&gt;hauteur) meet --&gt;
-  &lt;rect x="0" y="0" width="20" height="10"&gt;
-    &lt;title&gt;xMidYMid meet&lt;/title&gt;
-  &lt;/rect&gt;
-  &lt;svg viewBox="0 0 100 100" width="20" height="10"
-       preserveAspectRatio="xMidYMid meet" x="0" y="0"&gt;
-    &lt;use href="#smiley" /&gt;
-  &lt;/svg&gt;
-
-  &lt;rect x="25" y="0" width="20" height="10"&gt;
-    &lt;title&gt;xMinYMid meet&lt;/title&gt;
-  &lt;/rect&gt;
-  &lt;svg viewBox="0 0 100 100" width="20" height="10"
-       preserveAspectRatio="xMinYMid meet" x="25" y="0"&gt;
-    &lt;use href="#smiley" /&gt;
-  &lt;/svg&gt;
-
-  &lt;rect x="50" y="0" width="20" height="10"&gt;
-    &lt;title&gt;xMaxYMid meet&lt;/title&gt;
-  &lt;/rect&gt;
-  &lt;svg viewBox="0 0 100 100" width="20" height="10"
-       preserveAspectRatio="xMaxYMid meet" x="50" y="0"&gt;
-    &lt;use href="#smiley" /&gt;
-  &lt;/svg&gt;
-
-  &lt;!-- (largeur&gt;hauteur) slice --&gt;
-  &lt;rect x="0" y="15" width="20" height="10"&gt;
-    &lt;title&gt;xMidYMin slice&lt;/title&gt;
-  &lt;/rect&gt;
-  &lt;svg viewBox="0 0 100 100" width="20" height="10"
-       preserveAspectRatio="xMidYMin slice" x="0" y="15"&gt;
-    &lt;use href="#smiley" /&gt;
-  &lt;/svg&gt;
-
-  &lt;rect x="25" y="15" width="20" height="10"&gt;
-    &lt;title&gt;xMidYMid slice&lt;/title&gt;
-  &lt;/rect&gt;
-  &lt;svg viewBox="0 0 100 100" width="20" height="10"
-       preserveAspectRatio="xMidYMid slice" x="25" y="15"&gt;
-    &lt;use href="#smiley" /&gt;
-  &lt;/svg&gt;
-
-  &lt;rect x="50" y="15" width="20" height="10"&gt;
-    &lt;title&gt;xMidYMax slice&lt;/title&gt;
-  &lt;/rect&gt;
-  &lt;svg viewBox="0 0 100 100" width="20" height="10"
-       preserveAspectRatio="xMidYMax slice" x="50" y="15"&gt;
-    &lt;use href="#smiley" /&gt;
-  &lt;/svg&gt;
-
-  &lt;!-- (largeur&lt;hauteur) meet --&gt;
-  &lt;rect x="75" y="0" width="10" height="25"&gt;
-    &lt;title&gt;xMidYMin meet&lt;/title&gt;
-  &lt;/rect&gt;
-  &lt;svg viewBox="0 0 100 100" width="10" height="25"
-       preserveAspectRatio="xMidYMin meet" x="75" y="0"&gt;
-    &lt;use href="#smiley" /&gt;
-  &lt;/svg&gt;
-
-  &lt;rect x="90" y="0" width="10" height="25"&gt;
-    &lt;title&gt;xMidYMid meet&lt;/title&gt;
-  &lt;/rect&gt;
-  &lt;svg viewBox="0 0 100 100" width="10" height="25"
-       preserveAspectRatio="xMidYMid meet" x="90" y="0"&gt;
-    &lt;use href="#smiley" /&gt;
-  &lt;/svg&gt;
-
-  &lt;rect x="105" y="0" width="10" height="25"&gt;
-    &lt;title&gt;xMidYMax meet&lt;/title&gt;
-  &lt;/rect&gt;
-  &lt;svg viewBox="0 0 100 100" width="10" height="25"
-       preserveAspectRatio="xMidYMax meet" x="105" y="0"&gt;
-    &lt;use href="#smiley" /&gt;
-  &lt;/svg&gt;
-
-  &lt;!-- (largeur&lt;hauteur) slice --&gt;
-  &lt;rect x="120" y="0" width="10" height="25"&gt;
-    &lt;title&gt;xMinYMid slice&lt;/title&gt;
-  &lt;/rect&gt;
-  &lt;svg viewBox="0 0 100 100" width="10" height="25"
-       preserveAspectRatio="xMinYMid slice" x="120" y="0"&gt;
-    &lt;use href="#smiley" /&gt;
-  &lt;/svg&gt;
-
-  &lt;rect x="135" y="0" width="10" height="25"&gt;
-    &lt;title&gt;xMidYMid slice&lt;/title&gt;
-  &lt;/rect&gt;
-  &lt;svg viewBox="0 0 100 100" width="10" height="25"
-       preserveAspectRatio="xMidYMid slice" x="135" y="0"&gt;
-    &lt;use href="#smiley" /&gt;
-  &lt;/svg&gt;
-
-  &lt;rect x="150" y="0" width="10" height="25"&gt;
-    &lt;title&gt;xMaxYMid slice&lt;/title&gt;
-  &lt;/rect&gt;
-  &lt;svg viewBox="0 0 100 100" width="10" height="25"
-       preserveAspectRatio="xMaxYMid slice" x="150" y="0"&gt;
-    &lt;use href="#smiley" /&gt;
-  &lt;/svg&gt;
-
-  &lt;!-- none --&gt;
-  &lt;rect x="0" y="30" width="160" height="60"&gt;
-    &lt;title&gt;none&lt;/title&gt;
-  &lt;/rect&gt;
-  &lt;svg viewBox="0 0 100 100" width="160" height="60"
-       preserveAspectRatio="none" x="0" y="30"&gt;
-    &lt;use href="#smiley" /&gt;
-  &lt;/svg&gt;
-&lt;/svg&gt;</pre>
-
-
-<pre class="brush: css hidden">
+{{SVGRef}}
+
+L'attibut **`preserveAspectRatio`** indique comment un élément est mis à l'échelle lorsque le ratio largeur:hauteur de la [`viewBox`](/fr/docs/Web/SVG/Attribute/viewBox) est différent du ratio de la zone d'affichage (définit par les attributs `width` et `height`).
+
+Parce que les proportions du SVG sont définies par l'attribut `viewBox`, si ce dernier n'est pas défini alors l'attribut `preserveAspectRatio` n'a aucun effet (_à l'exception près de l'élément [`<image>`](/fr/docs/Web/SVG/Element/image) comme décrit ci-dessous_).
+
+## Exemple
+
+```html
+<svg viewBox="-1 -1 162 92" xmlns="http://www.w3.org/2000/svg">
+  <defs>
+     <path id="smiley" d="M50,10 A40,40,1,1,1,50,90 A40,40,1,1,1,50,10 M30,40 Q36,35,42,40 M58,40 Q64,35,70,40 M30,60 Q50,75,70,60 Q50,75,30,60" />
+  </defs>
+
+  <!-- (largeur>hauteur) meet -->
+  <rect x="0" y="0" width="20" height="10">
+    <title>xMidYMid meet</title>
+  </rect>
+  <svg viewBox="0 0 100 100" width="20" height="10"
+       preserveAspectRatio="xMidYMid meet" x="0" y="0">
+    <use href="#smiley" />
+  </svg>
+
+  <rect x="25" y="0" width="20" height="10">
+    <title>xMinYMid meet</title>
+  </rect>
+  <svg viewBox="0 0 100 100" width="20" height="10"
+       preserveAspectRatio="xMinYMid meet" x="25" y="0">
+    <use href="#smiley" />
+  </svg>
+
+  <rect x="50" y="0" width="20" height="10">
+    <title>xMaxYMid meet</title>
+  </rect>
+  <svg viewBox="0 0 100 100" width="20" height="10"
+       preserveAspectRatio="xMaxYMid meet" x="50" y="0">
+    <use href="#smiley" />
+  </svg>
+
+  <!-- (largeur>hauteur) slice -->
+  <rect x="0" y="15" width="20" height="10">
+    <title>xMidYMin slice</title>
+  </rect>
+  <svg viewBox="0 0 100 100" width="20" height="10"
+       preserveAspectRatio="xMidYMin slice" x="0" y="15">
+    <use href="#smiley" />
+  </svg>
+
+  <rect x="25" y="15" width="20" height="10">
+    <title>xMidYMid slice</title>
+  </rect>
+  <svg viewBox="0 0 100 100" width="20" height="10"
+       preserveAspectRatio="xMidYMid slice" x="25" y="15">
+    <use href="#smiley" />
+  </svg>
+
+  <rect x="50" y="15" width="20" height="10">
+    <title>xMidYMax slice</title>
+  </rect>
+  <svg viewBox="0 0 100 100" width="20" height="10"
+       preserveAspectRatio="xMidYMax slice" x="50" y="15">
+    <use href="#smiley" />
+  </svg>
+
+  <!-- (largeur<hauteur) meet -->
+  <rect x="75" y="0" width="10" height="25">
+    <title>xMidYMin meet</title>
+  </rect>
+  <svg viewBox="0 0 100 100" width="10" height="25"
+       preserveAspectRatio="xMidYMin meet" x="75" y="0">
+    <use href="#smiley" />
+  </svg>
+
+  <rect x="90" y="0" width="10" height="25">
+    <title>xMidYMid meet</title>
+  </rect>
+  <svg viewBox="0 0 100 100" width="10" height="25"
+       preserveAspectRatio="xMidYMid meet" x="90" y="0">
+    <use href="#smiley" />
+  </svg>
+
+  <rect x="105" y="0" width="10" height="25">
+    <title>xMidYMax meet</title>
+  </rect>
+  <svg viewBox="0 0 100 100" width="10" height="25"
+       preserveAspectRatio="xMidYMax meet" x="105" y="0">
+    <use href="#smiley" />
+  </svg>
+
+  <!-- (largeur<hauteur) slice -->
+  <rect x="120" y="0" width="10" height="25">
+    <title>xMinYMid slice</title>
+  </rect>
+  <svg viewBox="0 0 100 100" width="10" height="25"
+       preserveAspectRatio="xMinYMid slice" x="120" y="0">
+    <use href="#smiley" />
+  </svg>
+
+  <rect x="135" y="0" width="10" height="25">
+    <title>xMidYMid slice</title>
+  </rect>
+  <svg viewBox="0 0 100 100" width="10" height="25"
+       preserveAspectRatio="xMidYMid slice" x="135" y="0">
+    <use href="#smiley" />
+  </svg>
+
+  <rect x="150" y="0" width="10" height="25">
+    <title>xMaxYMid slice</title>
+  </rect>
+  <svg viewBox="0 0 100 100" width="10" height="25"
+       preserveAspectRatio="xMaxYMid slice" x="150" y="0">
+    <use href="#smiley" />
+  </svg>
+
+  <!-- none -->
+  <rect x="0" y="30" width="160" height="60">
+    <title>none</title>
+  </rect>
+  <svg viewBox="0 0 100 100" width="160" height="60"
+       preserveAspectRatio="none" x="0" y="30">
+    <use href="#smiley" />
+  </svg>
+</svg>
+```
+
+```css hidden
 html,body,svg { height:100% }
 
 path {
@@ -144,248 +145,226 @@ path {
 
 rect:hover, rect:active {
   outline: 1px solid red;
-}</pre>
-
-<p>{{EmbedLiveSample('topExample', '100%', 200)}}</p>
-
-<h2 id="syntax">Syntaxe</h2>
-
-<pre class="syntaxbox">preserveAspectRatio="&lt;align&gt; [&lt;meetOrSlice&gt;]"</pre>
-
-<p>La valeur de l'attribut est constituée d'un ou deux mots clés : l'alignement et l'option "meet ou slice" (satisfaire ou trancher) comme décrit ci-dessous:</p>
-
-<dl>
- <dt>Alignement</dt>
- <dd>L'alignement indique s'il faut forcer une mise à l'échelle uniforme et si oui, comment faire dans le cas où le rapport largeur:hauteur de la <a href="/fr/docs/Web/SVG/Attribute/viewBox"><code>viewBox</code></a> ne correspond pas à celui affiché. Les différentes valeurs possibles sont:
- <ul>
-  <li><strong>none</strong><br>
-   Ne pas forcer la mise à l'échelle uniforme. Étirer le contenu de manière à ce que le contenu remplisse toute la hauteur et toute la largeur affichée. <em>Notez que si </em><code>&lt;align&gt;</code><em> vaut </em><code>none</code><em>, alors la valeur </em><code>&lt;meetOrSlice&gt;</code><em> est ignorée</em>.</li>
-  <li><strong>xMinYMin</strong> - Force la mise à l'échelle uniforme.<br>
-   Aligne le côté gauche de l'élément à gauche de la zone d'affichage.<br>
-   Aligne le côté haut de l'élément en haut de la zone d'affichage.</li>
-  <li><strong>xMidYMin</strong> - Force la mise à l'échelle uniforme.<br>
-   Aligne horizontalement le centre de l'élément au milieu de la zone d'affichage.<br>
-   Aligne le côté haut de l'élément en haut de la zone d'affichage.</li>
-  <li><strong>xMaxYMin</strong> - Force la mise à l'échelle uniforme.<br>
-   Aligne le côté droit de l'élément à droite de la zone d'affichage.<br>
-   Aligne le côté haut de l'élément en haut de la zone d'affichage.</li>
-  <li><strong>xMinYMid</strong> - Force la mise à l'échelle uniforme.<br>
-   Aligne le côté gauche de l'élément à gauche de la zone d'affichage.<br>
-   Aligne verticalement le centre de l'élément au milieu de la zone d'affichage.</li>
-  <li><strong>xMidYMid</strong> (<em>par défaut</em>) - Force la mise à l'échelle uniforme.<br>
-   Aligne horizontalement le centre de l'élément au milieu de la zone d'affichage.<br>
-   Aligne verticalement le centre de l'élément au milieu de la zone d'affichage.</li>
-  <li><strong>xMaxYMid</strong> - Force la mise à l'échelle uniforme.<br>
-   Aligne le côté droit de l'élément à droite de la zone d'affichage.<br>
-   Aligne verticalement le centre de l'élément au milieu de la zone d'affichage.</li>
-  <li><strong>xMinYMax</strong> - Force la mise à l'échelle uniforme.<br>
-   Aligne le côté gauche de l'élément à gauche de la zone d'affichage.<br>
-   Aligne le côté bas de l'élément en bas de la zone d'affichage.</li>
-  <li><strong>xMidYMax</strong> - Force la mise à l'échelle uniforme.<br>
-   Aligne horizontalement le centre de l'élément au milieu de la zone d'affichage.<br>
-   Aligne le côté bas de l'élément en bas de la zone d'affichage.</li>
-  <li><strong>xMaxYMax</strong> - Force la mise à l'échelle uniforme.<br>
-   Aligne le côté droit de l'élément à droite de la zone d'affichage.<br>
-   Aligne le côté bas de l'élément en bas de la zone d'affichage.</li>
- </ul>
- </dd>
- <dt>Meet ou slice</dt>
- <dd>La valeur <em>meet</em> ou <em>slice</em> est optionnelle. Les deux valeurs possibles sont:
- <ul>
-  <li><strong>meet</strong> (<em>par défaut</em>) - Mettre à l'échelle l'image tel que:
-   <ul>
-    <li>les proportions sont préservées</li>
-    <li>la <a href="/fr/docs/Web/SVG/Attribute/viewBox"><code>viewBox</code></a> est entièrement visible dans la zone d'affichage</li>
-    <li>la <a href="/fr/docs/Web/SVG/Attribute/viewBox"><code>viewBox</code></a> est agrandie autant que possible, tout en respectant les autres critères</li>
-   </ul>
-   Autrement dit, si les proportions du contenu ne correspondent pas à la zone d'affichage, la zone d'affichage sera agrandie au-delà de la <a href="/fr/docs/Web/SVG/Attribute/viewBox"><code>viewBox</code></a> (la zone dans laquelle sera dessinée la <a href="/fr/docs/Web/SVG/Attribute/viewBox"><code>viewBox</code></a> sera plus petite que la zone d'affichage).</li>
-  <li><strong>slice</strong> - Mettre à l'échelle l'image tel que:
-   <ul>
-    <li>les proportions sont préservées</li>
-    <li>la zone d'affichage est entièrement remplie par la <a href="/fr/docs/Web/SVG/Attribute/viewBox"><code>viewBox</code></a></li>
-    <li>la <a href="/fr/docs/Web/SVG/Attribute/viewBox"><code>viewBox</code></a> est réduite autant que possible, tout en respectant les autres critères</li>
-   </ul>
-   Autrement dit, si les proportions du contenu ne correspondent pas à la zone d'affichage, la <a href="/fr/docs/Web/SVG/Attribute/viewBox"><code>viewBox</code></a> sera agrandie au-delà de la zone d'affichage (la zone dans laquelle sera dessinée la <a href="/fr/docs/Web/SVG/Attribute/viewBox"><code>viewBox</code></a> sera plus grande que la zone d'affichage).</li>
- </ul>
- </dd>
-</dl>
-
-<h2 id="elements">Éléments</h2>
-
-<p>Sept éléments utilisent cet attribut: <a href="/fr/docs/Web/SVG/Element/svg"><code>&lt;svg&gt;</code></a>, <a href="/fr/docs/Web/SVG/Element/symbol"><code>&lt;symbol&gt;</code></a>, <a href="/fr/docs/Web/SVG/Element/image"><code>&lt;image&gt;</code></a>, <a href="/fr/docs/Web/SVG/Element/feImage"><code>&lt;feImage&gt;</code></a>, <a href="/fr/docs/Web/SVG/Element/marker"><code>&lt;marker&gt;</code></a>, <a href="/fr/docs/Web/SVG/Element/pattern"><code>&lt;pattern&gt;</code></a>, and <a href="/fr/docs/Web/SVG/Element/view"><code>&lt;view&gt;</code></a>.</p>
-
-<h3 id="feImage">feImage</h3>
-
-<p>Pour <a href="/fr/docs/Web/SVG/Element/feImage"><code>&lt;feImage&gt;</code></a>, <code>preserveAspectRatio</code> définit comment l'image doit être ajustée dans le rectangle défini par l'élément <code>&lt;feImage&gt;</code>.</p>
+}
+```
 
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="row">Valeur</th>
-   <td><strong>&lt;align&gt; &lt;meetOrSlice&gt;?</strong></td>
-  </tr>
-  <tr>
-   <th scope="row">Valeur par défaut</th>
-   <td><code>xMidYMid</code> <code>meet</code></td>
-  </tr>
-  <tr>
-   <th scope="row">Animation</th>
-   <td>Oui</td>
-  </tr>
- </tbody>
-</table>
+{{EmbedLiveSample('topExample', '100%', 200)}}
+
+## Syntaxe
+
+    preserveAspectRatio="<align> [<meetOrSlice>]"
+
+La valeur de l'attribut est constituée d'un ou deux mots clés : l'alignement et l'option "meet ou slice" (satisfaire ou trancher) comme décrit ci-dessous:
+
+- Alignement
+
+  - : L'alignement indique s'il faut forcer une mise à l'échelle uniforme et si oui, comment faire dans le cas où le rapport largeur:hauteur de la [`viewBox`](/fr/docs/Web/SVG/Attribute/viewBox) ne correspond pas à celui affiché. Les différentes valeurs possibles sont:
+
+    - **none**
+      Ne pas forcer la mise à l'échelle uniforme. Étirer le contenu de manière à ce que le contenu remplisse toute la hauteur et toute la largeur affichée. _Notez que si_ `<align>` _vaut_ `none`_, alors la valeur_ `<meetOrSlice>` _est ignorée_.
+    - **xMinYMin** - Force la mise à l'échelle uniforme.
+      Aligne le côté gauche de l'élément à gauche de la zone d'affichage.
+      Aligne le côté haut de l'élément en haut de la zone d'affichage.
+    - **xMidYMin** - Force la mise à l'échelle uniforme.
+      Aligne horizontalement le centre de l'élément au milieu de la zone d'affichage.
+      Aligne le côté haut de l'élément en haut de la zone d'affichage.
+    - **xMaxYMin** - Force la mise à l'échelle uniforme.
+      Aligne le côté droit de l'élément à droite de la zone d'affichage.
+      Aligne le côté haut de l'élément en haut de la zone d'affichage.
+    - **xMinYMid** - Force la mise à l'échelle uniforme.
+      Aligne le côté gauche de l'élément à gauche de la zone d'affichage.
+      Aligne verticalement le centre de l'élément au milieu de la zone d'affichage.
+    - **xMidYMid** (_par défaut_) - Force la mise à l'échelle uniforme.
+      Aligne horizontalement le centre de l'élément au milieu de la zone d'affichage.
+      Aligne verticalement le centre de l'élément au milieu de la zone d'affichage.
+    - **xMaxYMid** - Force la mise à l'échelle uniforme.
+      Aligne le côté droit de l'élément à droite de la zone d'affichage.
+      Aligne verticalement le centre de l'élément au milieu de la zone d'affichage.
+    - **xMinYMax** - Force la mise à l'échelle uniforme.
+      Aligne le côté gauche de l'élément à gauche de la zone d'affichage.
+      Aligne le côté bas de l'élément en bas de la zone d'affichage.
+    - **xMidYMax** - Force la mise à l'échelle uniforme.
+      Aligne horizontalement le centre de l'élément au milieu de la zone d'affichage.
+      Aligne le côté bas de l'élément en bas de la zone d'affichage.
+    - **xMaxYMax** - Force la mise à l'échelle uniforme.
+      Aligne le côté droit de l'élément à droite de la zone d'affichage.
+      Aligne le côté bas de l'élément en bas de la zone d'affichage.
+
+- Meet ou slice
+
+  - : La valeur _meet_ ou _slice_ est optionnelle. Les deux valeurs possibles sont:
 
-<h3 id="image">image</h3>
+    - **meet** (_par défaut_) - Mettre à l'échelle l'image tel que:
 
-<p>Pour <a href="/fr/docs/Web/SVG/Element/feImage"><code>&lt;feImage&gt;</code></a>, <code>preserveAspectRatio</code> définit comment l'image doit être ajustée dans le rectangle défini par l'élément <code>&lt;image&gt;</code>.</p>
+      - les proportions sont préservées
+      - la [`viewBox`](/fr/docs/Web/SVG/Attribute/viewBox) est entièrement visible dans la zone d'affichage
+      - la [`viewBox`](/fr/docs/Web/SVG/Attribute/viewBox) est agrandie autant que possible, tout en respectant les autres critères
+
+      Autrement dit, si les proportions du contenu ne correspondent pas à la zone d'affichage, la zone d'affichage sera agrandie au-delà de la [`viewBox`](/fr/docs/Web/SVG/Attribute/viewBox) (la zone dans laquelle sera dessinée la [`viewBox`](/fr/docs/Web/SVG/Attribute/viewBox) sera plus petite que la zone d'affichage).
+
+    - **slice** - Mettre à l'échelle l'image tel que:
+
+      - les proportions sont préservées
+      - la zone d'affichage est entièrement remplie par la [`viewBox`](/fr/docs/Web/SVG/Attribute/viewBox)
+      - la [`viewBox`](/fr/docs/Web/SVG/Attribute/viewBox) est réduite autant que possible, tout en respectant les autres critères
+
+      Autrement dit, si les proportions du contenu ne correspondent pas à la zone d'affichage, la [`viewBox`](/fr/docs/Web/SVG/Attribute/viewBox) sera agrandie au-delà de la zone d'affichage (la zone dans laquelle sera dessinée la [`viewBox`](/fr/docs/Web/SVG/Attribute/viewBox) sera plus grande que la zone d'affichage).
+
+## Éléments
+
+Sept éléments utilisent cet attribut: [`<svg>`](/fr/docs/Web/SVG/Element/svg), [`<symbol>`](/fr/docs/Web/SVG/Element/symbol), [`<image>`](/fr/docs/Web/SVG/Element/image), [`<feImage>`](/fr/docs/Web/SVG/Element/feImage), [`<marker>`](/fr/docs/Web/SVG/Element/marker), [`<pattern>`](/fr/docs/Web/SVG/Element/pattern), and [`<view>`](/fr/docs/Web/SVG/Element/view).
+
+### feImage
+
+Pour [`<feImage>`](/fr/docs/Web/SVG/Element/feImage), `preserveAspectRatio` définit comment l'image doit être ajustée dans le rectangle défini par l'élément `<feImage>`.
 
 <table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="row">Valeur</th>
-   <td><strong>&lt;align&gt; &lt;meetOrSlice&gt;?</strong></td>
-  </tr>
-  <tr>
-   <th scope="row">Valeur par défaut</th>
-   <td><code>xMidYMid</code> <code>meet</code></td>
-  </tr>
-  <tr>
-   <th scope="row">Animation</th>
-   <td>Oui</td>
-  </tr>
- </tbody>
+  <tbody>
+    <tr>
+      <th scope="row">Valeur</th>
+      <td><strong>&#x3C;align> &#x3C;meetOrSlice>?</strong></td>
+    </tr>
+    <tr>
+      <th scope="row">Valeur par défaut</th>
+      <td><code>xMidYMid</code> <code>meet</code></td>
+    </tr>
+    <tr>
+      <th scope="row">Animation</th>
+      <td>Oui</td>
+    </tr>
+  </tbody>
 </table>
 
-<h3 id="marker">marker</h3>
+### image
 
-<p>Pour <a href="/fr/docs/Web/SVG/Element/marker"><code>&lt;marker&gt;</code></a>, <code>preserveAspectRatio</code> indique si une mise à l'échelle uniforme doit être effectuée pour s'adapter à la zone d'affichage.</p>
+Pour [`<feImage>`](/fr/docs/Web/SVG/Element/feImage), `preserveAspectRatio` définit comment l'image doit être ajustée dans le rectangle défini par l'élément `<image>`.
 
 <table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="row">Valeur</th>
-   <td><strong>&lt;align&gt; &lt;meetOrSlice&gt;?</strong></td>
-  </tr>
-  <tr>
-   <th scope="row">Valeur par défaut</th>
-   <td><code>xMidYMid</code> <code>meet</code></td>
-  </tr>
-  <tr>
-   <th scope="row">Animation</th>
-   <td>Oui</td>
-  </tr>
- </tbody>
+  <tbody>
+    <tr>
+      <th scope="row">Valeur</th>
+      <td><strong>&#x3C;align> &#x3C;meetOrSlice>?</strong></td>
+    </tr>
+    <tr>
+      <th scope="row">Valeur par défaut</th>
+      <td><code>xMidYMid</code> <code>meet</code></td>
+    </tr>
+    <tr>
+      <th scope="row">Animation</th>
+      <td>Oui</td>
+    </tr>
+  </tbody>
 </table>
 
-<h3 id="pattern">pattern</h3>
+### marker
 
-<p>Pour <a href="/fr/docs/Web/SVG/Element/pattern"><code>&lt;pattern&gt;</code></a>, <code>preserveAspectRatio</code> indique si une mise à l'échelle uniforme doit être effectuée pour s'adapter à la zone d'affichage.</p>
+Pour [`<marker>`](/fr/docs/Web/SVG/Element/marker), `preserveAspectRatio` indique si une mise à l'échelle uniforme doit être effectuée pour s'adapter à la zone d'affichage.
 
 <table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="row">Valeur</th>
-   <td><strong>&lt;align&gt; &lt;meetOrSlice&gt;?</strong></td>
-  </tr>
-  <tr>
-   <th scope="row">Valeur par défaut</th>
-   <td><code>xMidYMid</code> <code>meet</code></td>
-  </tr>
-  <tr>
-   <th scope="row">Animation</th>
-   <td>Oui</td>
-  </tr>
- </tbody>
+  <tbody>
+    <tr>
+      <th scope="row">Valeur</th>
+      <td><strong>&#x3C;align> &#x3C;meetOrSlice>?</strong></td>
+    </tr>
+    <tr>
+      <th scope="row">Valeur par défaut</th>
+      <td><code>xMidYMid</code> <code>meet</code></td>
+    </tr>
+    <tr>
+      <th scope="row">Animation</th>
+      <td>Oui</td>
+    </tr>
+  </tbody>
 </table>
 
-<h3 id="svg">svg</h3>
+### pattern
 
-<p>Pour <a href="/fr/docs/Web/SVG/Element/svg"><code>&lt;svg&gt;</code></a>, <code>preserveAspectRatio</code> indique si une mise à l'échelle uniforme doit être effectuée pour s'adapter à la zone d'affichage.</p>
+Pour [`<pattern>`](/fr/docs/Web/SVG/Element/pattern), `preserveAspectRatio` indique si une mise à l'échelle uniforme doit être effectuée pour s'adapter à la zone d'affichage.
 
 <table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="row">Valeur</th>
-   <td><strong>&lt;align&gt; &lt;meetOrSlice&gt;?</strong></td>
-  </tr>
-  <tr>
-   <th scope="row">Valeur par défaut</th>
-   <td><code>xMidYMid</code> <code>meet</code></td>
-  </tr>
-  <tr>
-   <th scope="row">Animation</th>
-   <td>Oui</td>
-  </tr>
- </tbody>
+  <tbody>
+    <tr>
+      <th scope="row">Valeur</th>
+      <td><strong>&#x3C;align> &#x3C;meetOrSlice>?</strong></td>
+    </tr>
+    <tr>
+      <th scope="row">Valeur par défaut</th>
+      <td><code>xMidYMid</code> <code>meet</code></td>
+    </tr>
+    <tr>
+      <th scope="row">Animation</th>
+      <td>Oui</td>
+    </tr>
+  </tbody>
 </table>
 
-<h3 id="symbol">symbol</h3>
+### svg
 
-<p>Pour <a href="/fr/docs/Web/SVG/Element/symbol"><code>&lt;symbol&gt;</code></a>, <code>preserveAspectRatio</code> indique si une mise à l'échelle uniforme doit être effectuée pour s'adapter à la zone d'affichage.</p>
+Pour [`<svg>`](/fr/docs/Web/SVG/Element/svg), `preserveAspectRatio` indique si une mise à l'échelle uniforme doit être effectuée pour s'adapter à la zone d'affichage.
 
 <table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="row">Valeur</th>
-   <td><strong>&lt;align&gt; &lt;meetOrSlice&gt;?</strong></td>
-  </tr>
-  <tr>
-   <th scope="row">Valeur par défaut</th>
-   <td><code>xMidYMid</code> <code>meet</code></td>
-  </tr>
-  <tr>
-   <th scope="row">Animation</th>
-   <td>Oui</td>
-  </tr>
- </tbody>
+  <tbody>
+    <tr>
+      <th scope="row">Valeur</th>
+      <td><strong>&#x3C;align> &#x3C;meetOrSlice>?</strong></td>
+    </tr>
+    <tr>
+      <th scope="row">Valeur par défaut</th>
+      <td><code>xMidYMid</code> <code>meet</code></td>
+    </tr>
+    <tr>
+      <th scope="row">Animation</th>
+      <td>Oui</td>
+    </tr>
+  </tbody>
 </table>
 
-<h3 id="view">view</h3>
+### symbol
 
-<p>Pour <a href="/fr/docs/Web/SVG/Element/view"><code>&lt;view&gt;</code></a>, <code>preserveAspectRatio</code> indique si une mise à l'échelle uniforme doit être effectuée pour s'adapter à la zone d'affichage.</p>
+Pour [`<symbol>`](/fr/docs/Web/SVG/Element/symbol), `preserveAspectRatio` indique si une mise à l'échelle uniforme doit être effectuée pour s'adapter à la zone d'affichage.
 
 <table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="row">Valeur</th>
-   <td><strong>&lt;align&gt; &lt;meetOrSlice&gt;?</strong></td>
-  </tr>
-  <tr>
-   <th scope="row">Valeur par défaut</th>
-   <td><code>xMidYMid</code> <code>meet</code></td>
-  </tr>
-  <tr>
-   <th scope="row">Animation</th>
-   <td>Oui</td>
-  </tr>
- </tbody>
+  <tbody>
+    <tr>
+      <th scope="row">Valeur</th>
+      <td><strong>&#x3C;align> &#x3C;meetOrSlice>?</strong></td>
+    </tr>
+    <tr>
+      <th scope="row">Valeur par défaut</th>
+      <td><code>xMidYMid</code> <code>meet</code></td>
+    </tr>
+    <tr>
+      <th scope="row">Animation</th>
+      <td>Oui</td>
+    </tr>
+  </tbody>
 </table>
 
-<h2 id="Spécification">Spécification</h2>
+### view
+
+Pour [`<view>`](/fr/docs/Web/SVG/Element/view), `preserveAspectRatio` indique si une mise à l'échelle uniforme doit être effectuée pour s'adapter à la zone d'affichage.
 
 <table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">Statut</th>
-   <th scope="col">Commentaire</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName("Filters 1.0", "#element-attrdef-feimage-preserveaspectratio", "preserveAspectRatio")}}</td>
-   <td>{{Spec2('Filters 1.0')}}</td>
-   <td></td>
-  </tr>
-  <tr>
-   <td>{{SpecName("SVG2", "coords.html#PreserveAspectRatioAttribute", "preserveAspectRatio")}}</td>
-   <td>{{Spec2("SVG2")}}</td>
-   <td></td>
-  </tr>
-  <tr>
-   <td>{{SpecName("SVG1.1", "coords.html#PreserveAspectRatioAttribute", "preserveAspectRatio")}}</td>
-   <td>{{Spec2("SVG1.1")}}</td>
-   <td>Définition initiale</td>
-  </tr>
- </tbody>
+  <tbody>
+    <tr>
+      <th scope="row">Valeur</th>
+      <td><strong>&#x3C;align> &#x3C;meetOrSlice>?</strong></td>
+    </tr>
+    <tr>
+      <th scope="row">Valeur par défaut</th>
+      <td><code>xMidYMid</code> <code>meet</code></td>
+    </tr>
+    <tr>
+      <th scope="row">Animation</th>
+      <td>Oui</td>
+    </tr>
+  </tbody>
 </table>
+
+## Spécification
+
+| Spécification                                                                                                                        | Statut                           | Commentaire         |
+| ------------------------------------------------------------------------------------------------------------------------------------ | -------------------------------- | ------------------- |
+| {{SpecName("Filters 1.0", "#element-attrdef-feimage-preserveaspectratio", "preserveAspectRatio")}} | {{Spec2('Filters 1.0')}} |                     |
+| {{SpecName("SVG2", "coords.html#PreserveAspectRatioAttribute", "preserveAspectRatio")}}                 | {{Spec2("SVG2")}}         |                     |
+| {{SpecName("SVG1.1", "coords.html#PreserveAspectRatioAttribute", "preserveAspectRatio")}}             | {{Spec2("SVG1.1")}}         | Définition initiale |
diff --git a/files/fr/web/svg/attribute/seed/index.md b/files/fr/web/svg/attribute/seed/index.md
index 23d668208f..52b679461c 100644
--- a/files/fr/web/svg/attribute/seed/index.md
+++ b/files/fr/web/svg/attribute/seed/index.md
@@ -6,39 +6,49 @@ tags:
   - Filtre
 translation_of: Web/SVG/Attribute/seed
 ---
-<p>« <a href="/fr/docs/Web/SVG/Attribute" title="en/SVG/Attribute">Page de référence des attributs SVG</a></p>
+« [Page de référence des attributs SVG](/fr/docs/Web/SVG/Attribute "en/SVG/Attribute")
 
-<p>L'attribut <code>seed</code> représente le nombre palier pour la pseudo génération d'un nombre aléatoire via la primitive {{SVGElement("feTurbulence")}}.</p>
+L'attribut `seed` représente le nombre palier pour la pseudo génération d'un nombre aléatoire via la primitive {{SVGElement("feTurbulence")}}.
 
-<p>Si l'attribut n'est pas spécifié, alors le palier sera fixé à <strong>0</strong>.</p>
+Si l'attribut n'est pas spécifié, alors le palier sera fixé à **0**.
 
-<h2 id="Contexte_d'usage">Contexte d'usage</h2>
+## Contexte d'usage
 
 <table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="row">Catégories</th>
-   <td><em>Aucun</em></td>
-  </tr>
-  <tr>
-   <th scope="row">Valeur</th>
-   <td><a href="/fr/docs/SVG/Content_type#Number" title="/en-US/docs/SVG/Content_type#Number">&lt;number&gt;</a></td>
-  </tr>
-  <tr>
-   <th scope="row">Animable</th>
-   <td>Oui</td>
-  </tr>
-  <tr>
-   <th scope="row">Document normatif</th>
-   <td><a href="http://www.w3.org/TR/SVG11/filters.html#feTurbulenceSeedAttribute" rel="external">SVG 1.1 (2nd Edition)</a></td>
-  </tr>
- </tbody>
+  <tbody>
+    <tr>
+      <th scope="row">Catégories</th>
+      <td><em>Aucun</em></td>
+    </tr>
+    <tr>
+      <th scope="row">Valeur</th>
+      <td>
+        <a
+          href="/fr/docs/SVG/Content_type#Number"
+          title="/en-US/docs/SVG/Content_type#Number"
+          >&#x3C;number></a
+        >
+      </td>
+    </tr>
+    <tr>
+      <th scope="row">Animable</th>
+      <td>Oui</td>
+    </tr>
+    <tr>
+      <th scope="row">Document normatif</th>
+      <td>
+        <a
+          href="http://www.w3.org/TR/SVG11/filters.html#feTurbulenceSeedAttribute"
+          rel="external"
+          >SVG 1.1 (2nd Edition)</a
+        >
+      </td>
+    </tr>
+  </tbody>
 </table>
 
-<h2 id="Éléments">Éléments</h2>
+## Éléments
 
-<p>Les éléments suivants peuvent être utilisés avec l'attribut <code>seed </code> :</p>
+Les éléments suivants peuvent être utilisés avec l'attribut `seed ` :
 
-<ul>
- <li>{{ SVGElement("feTurbulence") }}</li>
-</ul>
+- {{ SVGElement("feTurbulence") }}
diff --git a/files/fr/web/svg/attribute/stroke-dasharray/index.md b/files/fr/web/svg/attribute/stroke-dasharray/index.md
index c9cf9f4f60..b14d42ec70 100644
--- a/files/fr/web/svg/attribute/stroke-dasharray/index.md
+++ b/files/fr/web/svg/attribute/stroke-dasharray/index.md
@@ -6,82 +6,68 @@ tags:
   - SVG
 translation_of: Web/SVG/Attribute/stroke-dasharray
 ---
-<p>L'attribut <code>stroke-dasharray</code> contrôle le motif et l'espacement entre les segments utilisés pour tracer le contour d'un élément via l'attribut stroke. L'attribut définit ainsi un motif constitué d'une suite de segments et de vides dont la forme se rapprochera d'une ligne de pointillés. </p>
+L'attribut `stroke-dasharray` contrôle le motif et l'espacement entre les segments utilisés pour tracer le contour d'un élément via l'attribut stroke. L'attribut définit ainsi un motif constitué d'une suite de segments et de vides dont la forme se rapprochera d'une ligne de pointillés.
 
-<div class="note">
-  <p><strong>Note:</strong> Comme il s'agit d'un attribut de présentation, <code>stroke-dasharray </code>peut aussi être utilisé directement dans une feuille de style CSS.</p>
-</div>
+> **Note :** Comme il s'agit d'un attribut de présentation, `stroke-dasharray `peut aussi être utilisé directement dans une feuille de style CSS.
 
-<p>Les éléments suivants peuvent utiliser l'attribut <code>stroke-dasharray</code>: {{SVGElement('altGlyph')}}, {{SVGElement('circle')}}, {{SVGElement('ellipse')}}, {{SVGElement('path')}}, {{SVGElement('polygon')}}, {{SVGElement('polyline')}}, {{SVGElement('rect')}}, {{SVGElement('text')}}, {{SVGElement('textPath')}}, {{SVGElement('tref')}}, and {{SVGElement('tspan')}}</p>
+Les éléments suivants peuvent utiliser l'attribut `stroke-dasharray`: {{SVGElement('altGlyph')}}, {{SVGElement('circle')}}, {{SVGElement('ellipse')}}, {{SVGElement('path')}}, {{SVGElement('polygon')}}, {{SVGElement('polyline')}}, {{SVGElement('rect')}}, {{SVGElement('text')}}, {{SVGElement('textPath')}}, {{SVGElement('tref')}}, and {{SVGElement('tspan')}}
 
-<h2 id="Exemple">Exemple</h2>
+## Exemple
 
-<pre class="brush: css hidden">html,body,svg { height:100% }</pre>
+```css hidden
+html,body,svg { height:100% }
+```
 
-<pre class="brush: html">&lt;svg viewBox="0 0 30 10" version="1.1" xmlns="http://www.w3.org/2000/svg"&gt;
+```html
+<svg viewBox="0 0 30 10" version="1.1" xmlns="http://www.w3.org/2000/svg">
 
-    &lt;line                                  x1="0" y1="1" x2="30" y2="1" stroke="black" /&gt;
-    &lt;line stroke-dasharray="4"             x1="0" y1="3" x2="30" y2="3" stroke="black" /&gt;
-    &lt;line stroke-dasharray="4, 1"          x1="0" y1="5" x2="30" y2="5" stroke="black" /&gt;
-    &lt;line stroke-dasharray="4, 1, 2"       x1="0" y1="7" x2="30" y2="7" stroke="black" /&gt;
-    &lt;line stroke-dasharray="4, 1, 2, 3"    x1="0" y1="9" x2="30" y2="9" stroke="black" /&gt;
-&lt;/svg&gt;
-</pre>
+    <line                                  x1="0" y1="1" x2="30" y2="1" stroke="black" />
+    <line stroke-dasharray="4"             x1="0" y1="3" x2="30" y2="3" stroke="black" />
+    <line stroke-dasharray="4, 1"          x1="0" y1="5" x2="30" y2="5" stroke="black" />
+    <line stroke-dasharray="4, 1, 2"       x1="0" y1="7" x2="30" y2="7" stroke="black" />
+    <line stroke-dasharray="4, 1, 2, 3"    x1="0" y1="9" x2="30" y2="9" stroke="black" />
+</svg>
+```
 
-<p>{{ EmbedLiveSample('Exemple', '220', '150', '', 'Web/SVG/Attribute/stroke-dasharray') }}</p>
+{{ EmbedLiveSample('Exemple', '220', '150', '', 'Web/SVG/Attribute/stroke-dasharray') }}
 
-<h2 id="Contexte_d'usage">Contexte d'usage</h2>
+## Contexte d'usage
 
 <table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="row">Catégories</th>
-   <td>Attribut de présentation</td>
-  </tr>
-  <tr>
-   <th scope="row">Valeur</th>
-   <td>none | &lt;dasharray&gt; | inherit</td>
-  </tr>
-  <tr>
-   <th scope="row">Animable</th>
-   <td>Oui</td>
-  </tr>
-  <tr>
-   <th scope="row">Document normatif</th>
-   <td><a href="http://www.w3.org/TR/SVG/painting.html#StrokeDasharrayProperty">SVG 1.1 (2nd Edition)</a></td>
-  </tr>
- </tbody>
+  <tbody>
+    <tr>
+      <th scope="row">Catégories</th>
+      <td>Attribut de présentation</td>
+    </tr>
+    <tr>
+      <th scope="row">Valeur</th>
+      <td>none | &#x3C;dasharray> | inherit</td>
+    </tr>
+    <tr>
+      <th scope="row">Animable</th>
+      <td>Oui</td>
+    </tr>
+    <tr>
+      <th scope="row">Document normatif</th>
+      <td>
+        <a href="http://www.w3.org/TR/SVG/painting.html#StrokeDasharrayProperty"
+          >SVG 1.1 (2nd Edition)</a
+        >
+      </td>
+    </tr>
+  </tbody>
 </table>
 
-<dl>
- <dt>&lt;dasharray&gt;</dt>
- <dd>Il s'agit d'une liste de mesures <a href="/fr/SVG/Content_type#Length" title="en/SVG/Content_type#Length">&lt;length&gt;</a> et <a href="/fr/SVG/Content_type#Percentage" title="en/SVG/Content_type#Percentage">&lt;percentage&gt;</a> séparées par des virgules ou des espaces blancs. Ils permettent de spécifier la longeur de l'alternance entre segments et vides. Si un nombre impair de valeurs est entré, alors la liste sera répartie afin de créer un nombre pair de valeurs par répétition. Ainsi, <strong>5,3,2</strong> sera rendu comme <strong>5,3,2,5,3,2</strong>.</dd>
-</dl>
+- \<dasharray>
+  - : Il s'agit d'une liste de mesures [\<length>](/fr/SVG/Content_type#Length "en/SVG/Content_type#Length") et [\<percentage>](/fr/SVG/Content_type#Percentage "en/SVG/Content_type#Percentage") séparées par des virgules ou des espaces blancs. Ils permettent de spécifier la longeur de l'alternance entre segments et vides. Si un nombre impair de valeurs est entré, alors la liste sera répartie afin de créer un nombre pair de valeurs par répétition. Ainsi, **5,3,2** sera rendu comme **5,3,2,5,3,2**.
 
-<h2 id="Browser_Compatibility">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("svg.attributes.presentation.stroke-dasharray")}}</p>
+{{Compat("svg.attributes.presentation.stroke-dasharray")}}
 
-<h2 id="Spécification">Spécification</h2>
+## Spécification
 
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">Statut</th>
-   <th scope="col">Commentaire</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName("SVG2", "painting.html#StrokeDasharrayProperty", "stroke-dasharray")}}</td>
-   <td>{{Spec2("SVG2")}}</td>
-   <td>Définition pour les formes et textes</td>
-  </tr>
-  <tr>
-   <td>{{SpecName("SVG1.1", "painting.html#StrokeDasharrayProperty", "stroke-dasharray")}}</td>
-   <td>{{Spec2("SVG1.1")}}</td>
-   <td>Définition initiale pour les formes et textes</td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                                                                                    | Statut                   | Commentaire                                   |
+| ---------------------------------------------------------------------------------------------------------------- | ------------------------ | --------------------------------------------- |
+| {{SpecName("SVG2", "painting.html#StrokeDasharrayProperty", "stroke-dasharray")}}     | {{Spec2("SVG2")}} | Définition pour les formes et textes          |
+| {{SpecName("SVG1.1", "painting.html#StrokeDasharrayProperty", "stroke-dasharray")}} | {{Spec2("SVG1.1")}} | Définition initiale pour les formes et textes |
diff --git a/files/fr/web/svg/attribute/stroke-dashoffset/index.md b/files/fr/web/svg/attribute/stroke-dashoffset/index.md
index 071512cffe..9a1a8fbd70 100644
--- a/files/fr/web/svg/attribute/stroke-dashoffset/index.md
+++ b/files/fr/web/svg/attribute/stroke-dashoffset/index.md
@@ -6,109 +6,108 @@ tags:
   - SVG Attribute
 translation_of: Web/SVG/Attribute/stroke-dashoffset
 ---
-<div>{{SVGRef}}</div>
+{{SVGRef}}
 
-<p>L'attribut <strong><code>stroke-dashoffset</code></strong> décale la position de départ des pointillés sur les lignes SVG.</p>
+L'attribut **`stroke-dashoffset`** décale la position de départ des pointillés sur les lignes SVG.
 
-<div class="note">
-  <p><strong>Note :</strong> <code>stroke-dashoffset</code> étant un attribut de présentation, il peut être utilisé comme propriété CSS.</p>
-</div>
+> **Note :** `stroke-dashoffset` étant un attribut de présentation, il peut être utilisé comme propriété CSS.
 
-<p>Cet attribut peut être appliqué sur tous les éléments, en revanche il n'aura d'effet que sur les éléments suivants: {{SVGElement('altGlyph')}}, {{SVGElement('circle')}}, {{SVGElement('ellipse')}}, {{SVGElement('path')}}, {{SVGElement('polygon')}}, {{SVGElement('polyline')}}, {{SVGElement('rect')}}, {{SVGElement('text')}}, {{SVGElement('textPath')}}, {{SVGElement('tref')}}, and {{SVGElement('tspan')}}</p>
+Cet attribut peut être appliqué sur tous les éléments, en revanche il n'aura d'effet que sur les éléments suivants: {{SVGElement('altGlyph')}}, {{SVGElement('circle')}}, {{SVGElement('ellipse')}}, {{SVGElement('path')}}, {{SVGElement('polygon')}}, {{SVGElement('polyline')}}, {{SVGElement('rect')}}, {{SVGElement('text')}}, {{SVGElement('textPath')}}, {{SVGElement('tref')}}, and {{SVGElement('tspan')}}
 
-<h2>Exemple</h2>
+## Exemple
 
-<pre class="brush: css hidden">html,body,svg { height:100% }</pre>
+```css hidden
+html,body,svg { height:100% }
+```
 
+```html
+<svg viewBox="-3 0 33 10" xmlns="http://www.w3.org/2000/svg">
+  <!-- Pas de tiret -->
+  <line x1="0" y1="1" x2="30" y2="1" stroke="black" />
 
-<pre class="brush: html">&lt;svg viewBox="-3 0 33 10" xmlns="http://www.w3.org/2000/svg"&gt;
-  &lt;!-- Pas de tiret --&gt;
-  &lt;line x1="0" y1="1" x2="30" y2="1" stroke="black" /&gt;
+  <!-- Pas de décalage -->
+  <line x1="0" y1="3" x2="30" y2="3" stroke="black"
+        stroke-dasharray="3 1" />
 
-  &lt;!-- Pas de décalage --&gt;
-  &lt;line x1="0" y1="3" x2="30" y2="3" stroke="black"
-        stroke-dasharray="3 1" /&gt;
-
-  &lt;!--
+  <!--
   Le début des tirets est décalé
   de 3 unités vers la gauche
-  --&gt;
-  &lt;line x1="0" y1="5" x2="30" y2="5" stroke="black"
+  -->
+  <line x1="0" y1="5" x2="30" y2="5" stroke="black"
         stroke-dasharray="3 1"
-        stroke-dashoffset="3" /&gt;
+        stroke-dashoffset="3" />
 
-  &lt;!--
+  <!--
   Le début des tirets est décalé
   de 3 unités vers la droite (-3)
-  --&gt;
-  &lt;line x1="0" y1="7" x2="30" y2="7" stroke="black"
+  -->
+  <line x1="0" y1="7" x2="30" y2="7" stroke="black"
         stroke-dasharray="3 1"
-        stroke-dashoffset="-3" /&gt;
+        stroke-dashoffset="-3" />
 
-  &lt;!--
+  <!--
   Le début des tirets est décalé
   de 1 unité vers la gauche
   ce qui affiche la même chose que l'exemple précédent
-  --&gt;
-  &lt;line x1="0" y1="9" x2="30" y2="9" stroke="black"
+  -->
+  <line x1="0" y1="9" x2="30" y2="9" stroke="black"
         stroke-dasharray="3 1"
-        stroke-dashoffset="1" /&gt;
+        stroke-dashoffset="1" />
 
-  &lt;!--
+  <!--
   Lignes rouges pour indiquer la position
   de départ des tirets
-  --&gt;
-  &lt;path d="M0,5 h-3 M0,7 h3 M0,9 h-1" stroke="rgba(255,0,0,.5)" /&gt;
-&lt;/svg&gt;
-</pre>
+  -->
+  <path d="M0,5 h-3 M0,7 h3 M0,9 h-1" stroke="rgba(255,0,0,.5)" />
+</svg>
+```
 
-<p>{{EmbedLiveSample('exemple', '100%', 200)}}</p>
+{{EmbedLiveSample('exemple', '100%', 200)}}
 
-<h2 id="Notes_d'usage">Notes d'usage</h2>
+## Notes d'usage
 
 <table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="row">Valeur</th>
-   <td><strong><a href="/fr/SVG/Content_type#Percentage" title="en/SVG/Content_type#Percentage">&lt;percentage&gt;</a></strong> | <strong><a href="/fr/SVG/Content_type#Length" title="en/SVG/Content_type#Length">&lt;length&gt;</a></strong></td>
-  </tr>
-  <tr>
-   <th scope="row">Valeur par défaut</th>
-   <td><code>0</code></td>
-  </tr>
-  <tr>
-   <th scope="row">Animation</th>
-   <td>Oui</td>
-  </tr>
- </tbody>
+  <tbody>
+    <tr>
+      <th scope="row">Valeur</th>
+      <td>
+        <strong
+          ><a
+            href="/fr/SVG/Content_type#Percentage"
+            title="en/SVG/Content_type#Percentage"
+            >&#x3C;percentage></a
+          ></strong
+        >
+        |
+        <strong
+          ><a
+            href="/fr/SVG/Content_type#Length"
+            title="en/SVG/Content_type#Length"
+            >&#x3C;length></a
+          ></strong
+        >
+      </td>
+    </tr>
+    <tr>
+      <th scope="row">Valeur par défaut</th>
+      <td><code>0</code></td>
+    </tr>
+    <tr>
+      <th scope="row">Animation</th>
+      <td>Oui</td>
+    </tr>
+  </tbody>
 </table>
 
-<p>Le décalage est généralement exprimé en unités résolues par {{SVGAttr('pathLength')}} mais si un <a href="/fr/SVG/Content_type#Percentage" title="en/SVG/Content_type#Percentage">&lt;percentage&gt;</a> est utilisé, alors la valeur est résolue en pourcentage du viewport.</p>
+Le décalage est généralement exprimé en unités résolues par {{SVGAttr('pathLength')}} mais si un [\<percentage>](/fr/SVG/Content_type#Percentage "en/SVG/Content_type#Percentage") est utilisé, alors la valeur est résolue en pourcentage du viewport.
 
-<h2 id="Browser_Compatibility">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("svg.attributes.presentation.stroke-dashoffset")}}</p>
+{{Compat("svg.attributes.presentation.stroke-dashoffset")}}
 
-<h2 id="Spécification">Spécification</h2>
+## Spécification
 
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">Statut</th>
-   <th scope="col">Commentaire</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName("SVG2", "painting.html#StrokeDashoffsetProperty", "stroke-dashoffset")}}</td>
-   <td>{{Spec2("SVG2")}}</td>
-   <td>Définition pour les formes et le texte</td>
-  </tr>
-  <tr>
-   <td>{{SpecName("SVG1.1", "painting.html#StrokeDashoffsetProperty", "stroke-dashoffset")}}</td>
-   <td>{{Spec2("SVG1.1")}}</td>
-   <td>Définition initiale pour les formes et le texte</td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                                                                                    | Statut                   | Commentaire                                     |
+| ---------------------------------------------------------------------------------------------------------------- | ------------------------ | ----------------------------------------------- |
+| {{SpecName("SVG2", "painting.html#StrokeDashoffsetProperty", "stroke-dashoffset")}} | {{Spec2("SVG2")}} | Définition pour les formes et le texte          |
+| {{SpecName("SVG1.1", "painting.html#StrokeDashoffsetProperty", "stroke-dashoffset")}} | {{Spec2("SVG1.1")}} | Définition initiale pour les formes et le texte |
diff --git a/files/fr/web/svg/attribute/stroke-linecap/index.md b/files/fr/web/svg/attribute/stroke-linecap/index.md
index d8b46b8472..e44e7ffd19 100644
--- a/files/fr/web/svg/attribute/stroke-linecap/index.md
+++ b/files/fr/web/svg/attribute/stroke-linecap/index.md
@@ -6,182 +6,175 @@ tags:
   - SVG Attribute
 translation_of: Web/SVG/Attribute/stroke-linecap
 ---
-<div>{{SVGRef}}</div>
+{{SVGRef}}
 
-<p>L'attribut <strong><code>stroke-linecap</code></strong> définit la forme de la fin des lignes SVG.</p>
+L'attribut **`stroke-linecap`** définit la forme de la fin des lignes SVG.
 
-<div class="note">
-  <p><strong>Note :</strong> <code>stroke-linecap</code> étant un attribut de présentation, il peut être utilisé comme propriété CSS.</p>
-</div>
+> **Note :** `stroke-linecap` étant un attribut de présentation, il peut être utilisé comme propriété CSS.
 
-<p>Cet attribut peut être appliqué à tous les éléments, en revanche il n'aura d'effet que sur les éléments suivants: {{SVGElement('altGlyph')}}, {{SVGElement('path')}}, {{SVGElement('polyline')}}, {{SVGElement('text')}}, {{SVGElement('textPath')}}, {{SVGElement('tref')}}, et {{SVGElement('tspan')}}</p>
+Cet attribut peut être appliqué à tous les éléments, en revanche il n'aura d'effet que sur les éléments suivants: {{SVGElement('altGlyph')}}, {{SVGElement('path')}}, {{SVGElement('polyline')}}, {{SVGElement('text')}}, {{SVGElement('textPath')}}, {{SVGElement('tref')}}, et {{SVGElement('tspan')}}
 
-<h2>Exemple</h2>
+## Exemple
 
-<pre class="brush: css hidden">html,body,svg { height:100% }</pre>
+```css hidden
+html,body,svg { height:100% }
+```
 
-<pre class="brush: html">&lt;svg viewBox="0 0 6 6" xmlns="http://www.w3.org/2000/svg"&gt;
+```html
+<svg viewBox="0 0 6 6" xmlns="http://www.w3.org/2000/svg">
 
-  &lt;!-- Effet de la valeur "butt" (valeur par défaut) --&gt;
-  &lt;line x1="1" y1="1" x2="5" y2="1" stroke="black"
-        stroke-linecap="butt" /&gt;
+  <!-- Effet de la valeur "butt" (valeur par défaut) -->
+  <line x1="1" y1="1" x2="5" y2="1" stroke="black"
+        stroke-linecap="butt" />
 
-  &lt;!-- Effet de la valeur "round" --&gt;
-  &lt;line x1="1" y1="3" x2="5" y2="3" stroke="black"
-        stroke-linecap="round" /&gt;
+  <!-- Effet de la valeur "round" -->
+  <line x1="1" y1="3" x2="5" y2="3" stroke="black"
+        stroke-linecap="round" />
 
-  &lt;!-- Effet de la valeur "square" --&gt;
-  &lt;line x1="1" y1="5" x2="5" y2="5" stroke="black"
-        stroke-linecap="square" /&gt;
+  <!-- Effet de la valeur "square" -->
+  <line x1="1" y1="5" x2="5" y2="5" stroke="black"
+        stroke-linecap="square" />
 
-  &lt;!--
+  <!--
   Les lignes roses indiquent la position
   du chemin pour chaque trait
-  --&gt;
-  &lt;path d="M1,1 h4 M1,3 h4 M1,5 h4" stroke="pink" stroke-width="0.025" /&gt;
-&lt;/svg&gt;
-</pre>
+  -->
+  <path d="M1,1 h4 M1,3 h4 M1,5 h4" stroke="pink" stroke-width="0.025" />
+</svg>
+```
 
-<p>{{EmbedLiveSample('exemple', '100%', 200)}}</p>
+{{EmbedLiveSample('exemple', '100%', 200)}}
 
-<h2 id="Notes_d'usage">Notes d'usage</h2>
+## Notes d'usage
 
 <table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="row">Valeur</th>
-   <td><code>butt</code> | <code>round</code> | <code>square</code></td>
-  </tr>
-  <tr>
-   <th scope="row">Valeur par défaut</th>
-   <td><code>butt</code></td>
-  </tr>
-  <tr>
-   <th scope="row">Animation</th>
-   <td>Oui</td>
-  </tr>
- </tbody>
+  <tbody>
+    <tr>
+      <th scope="row">Valeur</th>
+      <td><code>butt</code> | <code>round</code> | <code>square</code></td>
+    </tr>
+    <tr>
+      <th scope="row">Valeur par défaut</th>
+      <td><code>butt</code></td>
+    </tr>
+    <tr>
+      <th scope="row">Animation</th>
+      <td>Oui</td>
+    </tr>
+  </tbody>
 </table>
 
-<h3 id="butt">butt</h3>
+### butt
 
-<p>La valeur <code>butt</code> indique que le trait de chaque chemin ne s'étend pas au-delà de ses extremités. Un chemin de longueur zéro ne s'affichera pas du tout.</p>
+La valeur `butt` indique que le trait de chaque chemin ne s'étend pas au-delà de ses extremités. Un chemin de longueur zéro ne s'affichera pas du tout.
 
-<h4 id="Exemple">Exemple</h4>
+#### Exemple
 
-<pre class="brush: css hidden">html,body,svg { height:100% }</pre>
+```css hidden
+html,body,svg { height:100% }
+```
 
-<pre class="brush: html">&lt;svg viewBox="0 0 6 4" xmlns="http://www.w3.org/2000/svg"&gt;
+```html
+<svg viewBox="0 0 6 4" xmlns="http://www.w3.org/2000/svg">
 
-  &lt;!-- Effet de la valeur "butt" --&gt;
-  &lt;path d="M1,1 h4" stroke="black"
-        stroke-linecap="butt" /&gt;
+  <!-- Effet de la valeur "butt" -->
+  <path d="M1,1 h4" stroke="black"
+        stroke-linecap="butt" />
 
-  &lt;!-- Effet de la valeur "butt" sur un chemin de longueur zéro --&gt;
-  &lt;path d="M3,3 h0" stroke="black"
-        stroke-linecap="butt" /&gt;
+  <!-- Effet de la valeur "butt" sur un chemin de longueur zéro -->
+  <path d="M3,3 h0" stroke="black"
+        stroke-linecap="butt" />
 
 
-  &lt;!--
+  <!--
   Lignes roses pour indiquer la position
   du chemin pour chaque trait
-  --&gt;
-  &lt;path d="M1,1 h4" stroke="pink" stroke-width="0.025" /&gt;
-  &lt;circle cx="1" cy="1" r="0.05" fill="pink" /&gt;
-  &lt;circle cx="5" cy="1" r="0.05" fill="pink" /&gt;
-  &lt;circle cx="3" cy="3" r="0.05" fill="pink" /&gt;
-&lt;/svg&gt;
-</pre>
+  -->
+  <path d="M1,1 h4" stroke="pink" stroke-width="0.025" />
+  <circle cx="1" cy="1" r="0.05" fill="pink" />
+  <circle cx="5" cy="1" r="0.05" fill="pink" />
+  <circle cx="3" cy="3" r="0.05" fill="pink" />
+</svg>
+```
 
-<p>{{EmbedLiveSample('butt', '100%', 200)}}</p>
+{{EmbedLiveSample('butt', '100%', 200)}}
 
-<h3 id="round">round</h3>
+### round
 
-<p>La valeur <code>round</code> indique que la fin de chaque trait sera prolongé d'un demi-cerlce de diamètre égal à la la largeur du trait. Pour un chemin de longueur zéro, un cercle complet est affiché.</p>
+La valeur `round` indique que la fin de chaque trait sera prolongé d'un demi-cerlce de diamètre égal à la la largeur du trait. Pour un chemin de longueur zéro, un cercle complet est affiché.
 
-<h4 id="Exemple_2">Exemple</h4>
+#### Exemple
 
-<pre class="brush: css hidden">html,body,svg { height:100% }</pre>
+```css hidden
+html,body,svg { height:100% }
+```
 
-<pre class="brush: html">&lt;svg viewBox="0 0 6 4" xmlns="http://www.w3.org/2000/svg"&gt;
+```html
+<svg viewBox="0 0 6 4" xmlns="http://www.w3.org/2000/svg">
 
-  &lt;!-- Effet de la valeur "round" --&gt;
-  &lt;path d="M1,1 h4" stroke="black"
-        stroke-linecap="round" /&gt;
+  <!-- Effet de la valeur "round" -->
+  <path d="M1,1 h4" stroke="black"
+        stroke-linecap="round" />
 
-  &lt;!-- Effet de la valeur "round" sur un chemin de longueur zéro --&gt;
-  &lt;path d="M3,3 h0" stroke="black"
-        stroke-linecap="round" /&gt;
+  <!-- Effet de la valeur "round" sur un chemin de longueur zéro -->
+  <path d="M3,3 h0" stroke="black"
+        stroke-linecap="round" />
 
 
-  &lt;!--
+  <!--
   Lignes roses pour indiquer la position
   du chemin pour chaque trait
-  --&gt;
-  &lt;path d="M1,1 h4" stroke="pink" stroke-width="0.025" /&gt;
-  &lt;circle cx="1" cy="1" r="0.05" fill="pink" /&gt;
-  &lt;circle cx="5" cy="1" r="0.05" fill="pink" /&gt;
-  &lt;circle cx="3" cy="3" r="0.05" fill="pink" /&gt;
-&lt;/svg&gt;
-</pre>
+  -->
+  <path d="M1,1 h4" stroke="pink" stroke-width="0.025" />
+  <circle cx="1" cy="1" r="0.05" fill="pink" />
+  <circle cx="5" cy="1" r="0.05" fill="pink" />
+  <circle cx="3" cy="3" r="0.05" fill="pink" />
+</svg>
+```
 
-<p>{{EmbedLiveSample('round', '100%', 200)}}</p>
+{{EmbedLiveSample('round', '100%', 200)}}
 
-<h3 id="square">square</h3>
+### square
 
-<p>La valeur <code>square</code> indique que la fin de chaque trait sera prolongé par un rectangle d'une taille égale à la moitié de l'épaisseur du contour. Pour un chemin de longueur zéro, seul un rectangle est affiché, de la longueur de l'épaisseur du contour, et centré autour de la position du chemin.</p>
+La valeur `square` indique que la fin de chaque trait sera prolongé par un rectangle d'une taille égale à la moitié de l'épaisseur du contour. Pour un chemin de longueur zéro, seul un rectangle est affiché, de la longueur de l'épaisseur du contour, et centré autour de la position du chemin.
 
-<h4 id="Exemple_3">Exemple</h4>
+#### Exemple
 
-<pre class="brush: css hidden">html,body,svg { height:100% }</pre>
+```css hidden
+html,body,svg { height:100% }
+```
 
-<pre class="brush: html">&lt;svg viewBox="0 0 6 4" xmlns="http://www.w3.org/2000/svg"&gt;
+```html
+<svg viewBox="0 0 6 4" xmlns="http://www.w3.org/2000/svg">
 
-  &lt;!-- Effet de la valeur "square" --&gt;
-  &lt;path d="M1,1 h4" stroke="black"
-        stroke-linecap="square" /&gt;
+  <!-- Effet de la valeur "square" -->
+  <path d="M1,1 h4" stroke="black"
+        stroke-linecap="square" />
 
-  &lt;!-- Effet de la valeur "square" sur un chemin de longueur zéro --&gt;
-  &lt;path d="M3,3 h0" stroke="black"
-        stroke-linecap="square" /&gt;
+  <!-- Effet de la valeur "square" sur un chemin de longueur zéro -->
+  <path d="M3,3 h0" stroke="black"
+        stroke-linecap="square" />
 
-  &lt;!--
+  <!--
   Les lignes roses indiquent la position
   du chemin pour chaque trait
-  --&gt;
-  &lt;path d="M1,1 h4" stroke="pink" stroke-width="0.025" /&gt;
-  &lt;circle cx="1" cy="1" r="0.05" fill="pink" /&gt;
-  &lt;circle cx="5" cy="1" r="0.05" fill="pink" /&gt;
-  &lt;circle cx="3" cy="3" r="0.05" fill="pink" /&gt;
-&lt;/svg&gt;
-</pre>
+  -->
+  <path d="M1,1 h4" stroke="pink" stroke-width="0.025" />
+  <circle cx="1" cy="1" r="0.05" fill="pink" />
+  <circle cx="5" cy="1" r="0.05" fill="pink" />
+  <circle cx="3" cy="3" r="0.05" fill="pink" />
+</svg>
+```
 
-<p>{{EmbedLiveSample('square', '100%', 200)}}</p>
+{{EmbedLiveSample('square', '100%', 200)}}
 
-<h2 id="Browser_Compatibility">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("svg.attributes.presentation.stroke-linecap")}}</p>
+{{Compat("svg.attributes.presentation.stroke-linecap")}}
 
-<h2 id="Spécification">Spécification</h2>
+## Spécification
 
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">Statut</th>
-   <th scope="col">Commentaire</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName("SVG2", "painting.html#StrokeLinecapProperty", "stroke-linecap")}}</td>
-   <td>{{Spec2("SVG2")}}</td>
-   <td>Définition pour les formes et le texte</td>
-  </tr>
-  <tr>
-   <td>{{SpecName("SVG1.1", "painting.html#StrokeLinecapProperty", "stroke-linecap")}}</td>
-   <td>{{Spec2("SVG1.1")}}</td>
-   <td>Définition initiale pour les formes et le texte</td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                                                                            | Statut                   | Commentaire                                     |
+| -------------------------------------------------------------------------------------------------------- | ------------------------ | ----------------------------------------------- |
+| {{SpecName("SVG2", "painting.html#StrokeLinecapProperty", "stroke-linecap")}} | {{Spec2("SVG2")}} | Définition pour les formes et le texte          |
+| {{SpecName("SVG1.1", "painting.html#StrokeLinecapProperty", "stroke-linecap")}} | {{Spec2("SVG1.1")}} | Définition initiale pour les formes et le texte |
diff --git a/files/fr/web/svg/attribute/stroke-linejoin/index.md b/files/fr/web/svg/attribute/stroke-linejoin/index.md
index 019611c57d..e22eaaea9e 100644
--- a/files/fr/web/svg/attribute/stroke-linejoin/index.md
+++ b/files/fr/web/svg/attribute/stroke-linejoin/index.md
@@ -6,301 +6,302 @@ tags:
   - SVG Attribute
 translation_of: Web/SVG/Attribute/stroke-linejoin
 ---
-<div>{{SVGRef}}</div>
+{{SVGRef}}
 
-<p>L'attribut <strong><code>stroke-linejoin</code></strong> définit la manière de dessiner la liaison entre deux segments de ligne.</p>
+L'attribut **`stroke-linejoin`** définit la manière de dessiner la liaison entre deux segments de ligne.
 
-<div class="note">
-  <p><strong>Note :</strong> <code>stroke-linejoin</code> étant un attribut de présentation, il peut être utililsé comme propriété CSS.</p>
-</div>
+> **Note :** `stroke-linejoin` étant un attribut de présentation, il peut être utililsé comme propriété CSS.
 
-<p>Cet attribut peut être appliqué sur tous les éléments, en revanche il n'aura d'effet que sur les éléments suivants: {{SVGElement('altGlyph')}}, {{SVGElement('path')}}, {{SVGElement('polygon')}}, {{SVGElement('polyline')}}, {{SVGElement('rect')}}, {{SVGElement('text')}}, {{SVGElement('textPath')}}, {{SVGElement('tref')}}, et {{SVGElement('tspan')}}</p>
+Cet attribut peut être appliqué sur tous les éléments, en revanche il n'aura d'effet que sur les éléments suivants: {{SVGElement('altGlyph')}}, {{SVGElement('path')}}, {{SVGElement('polygon')}}, {{SVGElement('polyline')}}, {{SVGElement('rect')}}, {{SVGElement('text')}}, {{SVGElement('textPath')}}, {{SVGElement('tref')}}, et {{SVGElement('tspan')}}
 
-<h2>Exemple</h2>
+## Exemple
 
-<pre class="brush: css hidden">html,body,svg { height:100% }</pre>
+```css hidden
+html,body,svg { height:100% }
+```
 
-<pre class="brush: html">&lt;svg viewBox="0 0 18 12" xmlns="http://www.w3.org/2000/svg"&gt;
-  &lt;!--
+```html
+<svg viewBox="0 0 18 12" xmlns="http://www.w3.org/2000/svg">
+  <!--
   Chemin en haut à gauche:
   Effet de la valeur "miter"
-  --&gt;
-  &lt;path d="M1,5 a2,2 0,0,0 2,-3 a3,3 0 0 1 2,3.5" stroke="black" fill="none"
-        stroke-linejoin="miter" /&gt;
+  -->
+  <path d="M1,5 a2,2 0,0,0 2,-3 a3,3 0 0 1 2,3.5" stroke="black" fill="none"
+        stroke-linejoin="miter" />
 
-  &lt;!--
+  <!--
   Chemin en haut au milieu:
   Effet de la valeur "round"
-  --&gt;
-  &lt;path d="M7,5 a2,2 0,0,0 2,-3 a3,3 0 0 1 2,3.5" stroke="black" fill="none"
-        stroke-linejoin="round" /&gt;
+  -->
+  <path d="M7,5 a2,2 0,0,0 2,-3 a3,3 0 0 1 2,3.5" stroke="black" fill="none"
+        stroke-linejoin="round" />
 
-  &lt;!--
+  <!--
   Chemin en haut à droite:
   Effet de la valeur "bevel"
-  --&gt;
-  &lt;path d="M13,5 a2,2 0,0,0 2,-3 a3,3 0 0 1 2,3.5" stroke="black" fill="none"
-        stroke-linejoin="bevel" /&gt;
+  -->
+  <path d="M13,5 a2,2 0,0,0 2,-3 a3,3 0 0 1 2,3.5" stroke="black" fill="none"
+        stroke-linejoin="bevel" />
 
-  &lt;!--
+  <!--
   Chemin en bas à gauche:
   Effet de la valeur "miter-clip"
   se replit sur la valeur par défaut (miter) si non pris en charge
-  --&gt;
-  &lt;path d="M3,11 a2,2 0,0,0 2,-3 a3,3 0 0 1 2,3.5" stroke="black" fill="none"
-        stroke-linejoin="miter-clip" /&gt;
+  -->
+  <path d="M3,11 a2,2 0,0,0 2,-3 a3,3 0 0 1 2,3.5" stroke="black" fill="none"
+        stroke-linejoin="miter-clip" />
 
-  &lt;!--
+  <!--
   Chemin en bas à droite:
   Effet de la valeur "arcs"
   se replit sur la valeur par défaut (miter) si non pris en charge
-  --&gt;
-  &lt;path d="M9,11 a2,2 0,0,0 2,-3 a3,3 0 0 1 2,3.5" stroke="black" fill="none"
-        stroke-linejoin="arcs" /&gt;
+  -->
+  <path d="M9,11 a2,2 0,0,0 2,-3 a3,3 0 0 1 2,3.5" stroke="black" fill="none"
+        stroke-linejoin="arcs" />
 
-  &lt;!--
+  <!--
   Lignes roses qui indiquent la position
   du chemin pour chaque trait
-  --&gt;
-  &lt;g id="highlight"&gt;
-    &lt;path d="M1,5 a2,2 0,0,0 2,-3 a3,3 0 0 1 2,3.5"
-          stroke="pink" fill="none" stroke-width="0.025" /&gt;
-    &lt;circle cx="1" cy="5"   r="0.05" fill="pink" /&gt;
-    &lt;circle cx="3" cy="2"   r="0.05" fill="pink" /&gt;
-    &lt;circle cx="5" cy="5.5" r="0.05" fill="pink" /&gt;
-  &lt;/g&gt;
-  &lt;use xlink:href="#highlight" x="6" /&gt;
-  &lt;use xlink:href="#highlight" x="12" /&gt;
-  &lt;use xlink:href="#highlight" x="2" y="6" /&gt;
-  &lt;use xlink:href="#highlight" x="8" y="6" /&gt;
-&lt;/svg&gt;
-</pre>
-
-<p>{{EmbedLiveSample('exemple', '100%', 400)}}</p>
-
-<h2 id="Contexte_d'utilisation">Contexte d'utilisation</h2>
+  -->
+  <g id="highlight">
+    <path d="M1,5 a2,2 0,0,0 2,-3 a3,3 0 0 1 2,3.5"
+          stroke="pink" fill="none" stroke-width="0.025" />
+    <circle cx="1" cy="5"   r="0.05" fill="pink" />
+    <circle cx="3" cy="2"   r="0.05" fill="pink" />
+    <circle cx="5" cy="5.5" r="0.05" fill="pink" />
+  </g>
+  <use xlink:href="#highlight" x="6" />
+  <use xlink:href="#highlight" x="12" />
+  <use xlink:href="#highlight" x="2" y="6" />
+  <use xlink:href="#highlight" x="8" y="6" />
+</svg>
+```
+
+{{EmbedLiveSample('exemple', '100%', 400)}}
+
+## Contexte d'utilisation
 
 <table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="row">Valeur</th>
-   <td><code>arcs</code> | <code>bevel</code> |<code>miter</code> | <code>miter-clip</code> | <code>round</code></td>
-  </tr>
-  <tr>
-   <th scope="row">Valeur par défaut</th>
-   <td><code>miter</code></td>
-  </tr>
-  <tr>
-   <th scope="row">Animation</th>
-   <td>Oui</td>
-  </tr>
- </tbody>
+  <tbody>
+    <tr>
+      <th scope="row">Valeur</th>
+      <td>
+        <code>arcs</code> | <code>bevel</code> |<code>miter</code> |
+        <code>miter-clip</code> | <code>round</code>
+      </td>
+    </tr>
+    <tr>
+      <th scope="row">Valeur par défaut</th>
+      <td><code>miter</code></td>
+    </tr>
+    <tr>
+      <th scope="row">Animation</th>
+      <td>Oui</td>
+    </tr>
+  </tbody>
 </table>
 
-<h3 id="arcs">arcs</h3>
+### arcs
 
-<div class="note">
-  <p><strong>Note :</strong> La valeur <code>arcs</code> a été introduite en SVG2 et n'est pas souvent pris en charge pour le moment, voir {{anch("Compatibilité des navigateurs")}} ci-dessous pour plus de détails.</p>
-</div>
+> **Note :** La valeur `arcs` a été introduite en SVG2 et n'est pas souvent pris en charge pour le moment, voir {{anch("Compatibilité des navigateurs")}} ci-dessous pour plus de détails.
 
-<p>La valeur <code>arcs</code> indique qu'un arc est utilisé pour joindre les segments du chemin. L'arc est formé en prolongeant les bords extérieurs du trait au point de liaison, avec la même courbe que ce bord.</p>
+La valeur `arcs` indique qu'un arc est utilisé pour joindre les segments du chemin. L'arc est formé en prolongeant les bords extérieurs du trait au point de liaison, avec la même courbe que ce bord.
 
-<h4 id="Exemple">Exemple</h4>
+#### Exemple
 
-<pre class="brush: css hidden">html,body,svg { height:100% }</pre>
+```css hidden
+html,body,svg { height:100% }
+```
 
-<pre class="brush: html">&lt;svg viewBox="0 0 6 6" xmlns="http://www.w3.org/2000/svg"&gt;
-  &lt;!-- Effet de la valeur "arcs" --&gt;
-  &lt;path d="M1,5 a2,2 0,0,0 2,-3 a3,3 0 0 1 2,3" stroke="black" fill="none"
-        stroke-linejoin="arcs" /&gt;
+```html
+<svg viewBox="0 0 6 6" xmlns="http://www.w3.org/2000/svg">
+  <!-- Effet de la valeur "arcs" -->
+  <path d="M1,5 a2,2 0,0,0 2,-3 a3,3 0 0 1 2,3" stroke="black" fill="none"
+        stroke-linejoin="arcs" />
 
-  &lt;!--
+  <!--
   Lignes roses qui indiquent la position
   du chemin pour chaque trait
-  --&gt;
-  &lt;g id="p"&gt;
-    &lt;path d="M1,5 a2,2 0,0,0 2,-3 a3,3 0 0 1 2,3"
-          stroke="pink" fill="none" stroke-width="0.025" /&gt;
-    &lt;circle cx="1" cy="5" r="0.05" fill="pink" /&gt;
-    &lt;circle cx="3" cy="2" r="0.05" fill="pink" /&gt;
-    &lt;circle cx="5" cy="5" r="0.05" fill="pink" /&gt;
-  &lt;/g&gt;
-&lt;/svg&gt;</pre>
+  -->
+  <g id="p">
+    <path d="M1,5 a2,2 0,0,0 2,-3 a3,3 0 0 1 2,3"
+          stroke="pink" fill="none" stroke-width="0.025" />
+    <circle cx="1" cy="5" r="0.05" fill="pink" />
+    <circle cx="3" cy="2" r="0.05" fill="pink" />
+    <circle cx="5" cy="5" r="0.05" fill="pink" />
+  </g>
+</svg>
+```
 
-<p>{{EmbedLiveSample('arcs', '100%', 200)}}</p>
+{{EmbedLiveSample('arcs', '100%', 200)}}
 
-<h3 id="bevel">bevel</h3>
+### bevel
 
-<p>La valeur <code>bevel</code> indique qu'un coin biseauté est utilisé pour joindre les segments du chemin.</p>
+La valeur `bevel` indique qu'un coin biseauté est utilisé pour joindre les segments du chemin.
 
-<h4 id="Exemple_2">Exemple</h4>
+#### Exemple
 
-<pre class="brush: css hidden">html,body,svg { height:100% }</pre>
+```css hidden
+html,body,svg { height:100% }
+```
 
-<pre class="brush: html">&lt;svg viewBox="0 0 6 6" xmlns="http://www.w3.org/2000/svg"&gt;
-  &lt;!-- Effet de la valeur "bevel" --&gt;
-  &lt;path d="M1,5 l2,-3 l2,3" stroke="black" fill="none"
-        stroke-linejoin="bevel" /&gt;
+```html
+<svg viewBox="0 0 6 6" xmlns="http://www.w3.org/2000/svg">
+  <!-- Effet de la valeur "bevel" -->
+  <path d="M1,5 l2,-3 l2,3" stroke="black" fill="none"
+        stroke-linejoin="bevel" />
 
-  &lt;!--
+  <!--
   Lignes roses qui indiquent la position
   du chemin pour chaque trait
-  --&gt;
-  &lt;g id="p"&gt;
-    &lt;path d="M1,5 l2,-3 l2,3"
-          stroke="pink" fill="none" stroke-width="0.025" /&gt;
-    &lt;circle cx="1" cy="5" r="0.05" fill="pink" /&gt;
-    &lt;circle cx="3" cy="2" r="0.05" fill="pink" /&gt;
-    &lt;circle cx="5" cy="5" r="0.05" fill="pink" /&gt;
-  &lt;/g&gt;
-&lt;/svg&gt;</pre>
+  -->
+  <g id="p">
+    <path d="M1,5 l2,-3 l2,3"
+          stroke="pink" fill="none" stroke-width="0.025" />
+    <circle cx="1" cy="5" r="0.05" fill="pink" />
+    <circle cx="3" cy="2" r="0.05" fill="pink" />
+    <circle cx="5" cy="5" r="0.05" fill="pink" />
+  </g>
+</svg>
+```
 
-<p>{{EmbedLiveSample('bevel', '100%', 200)}}</p>
+{{EmbedLiveSample('bevel', '100%', 200)}}
 
-<h3 id="miter">miter</h3>
+### miter
 
-<p>La valeur <code>miter</code> indique qu'un angle droit est utilisé pour joindre les segments du chemin. Le coin est formé en prolongeant les bords extérieurs du trait jusqu'à ce qu'ils se joignent.</p>
+La valeur `miter` indique qu'un angle droit est utilisé pour joindre les segments du chemin. Le coin est formé en prolongeant les bords extérieurs du trait jusqu'à ce qu'ils se joignent.
 
-<div class="note">
-  <p><strong>Note :</strong> Si la longueur du coin dépasse {{SVGAttr('stroke-miterlimit')}}, un coin de type <code>bevel</code> est utilisé à la place.</p>
-</div>
+> **Note :** Si la longueur du coin dépasse {{SVGAttr('stroke-miterlimit')}}, un coin de type `bevel` est utilisé à la place.
 
-<h4 id="Exemple_3">Exemple</h4>
+#### Exemple
 
-<pre class="brush: css hidden">html,body,svg { height:100% }</pre>
+```css hidden
+html,body,svg { height:100% }
+```
 
-<pre class="brush: html">&lt;svg viewBox="0 -1 10 7" xmlns="http://www.w3.org/2000/svg"&gt;
-  &lt;!-- Effet de la valeur "miter" --&gt;
-  &lt;path d="M1,5 l2,-3 l2,3" stroke="black" fill="none"
-        stroke-linejoin="miter" /&gt;
+```html
+<svg viewBox="0 -1 10 7" xmlns="http://www.w3.org/2000/svg">
+  <!-- Effet de la valeur "miter" -->
+  <path d="M1,5 l2,-3 l2,3" stroke="black" fill="none"
+        stroke-linejoin="miter" />
 
-  &lt;!-- Effet de la valeur "miter" sur un angle aigu
-       où la limite stroke-miterlimit est dépassée --&gt;
-  &lt;path d="M7,5 l0.75,-3 l0.75,3" stroke="black" fill="none"
-        stroke-linejoin="miter" /&gt;
+  <!-- Effet de la valeur "miter" sur un angle aigu
+       où la limite stroke-miterlimit est dépassée -->
+  <path d="M7,5 l0.75,-3 l0.75,3" stroke="black" fill="none"
+        stroke-linejoin="miter" />
 
-  &lt;!-- Ligne rouge pointillé qui indique la limite
-       à partir de laquelle une liaison miter devient bevel --&gt;
-  &lt;path d="M0,0 h10" stroke="red" stroke-dasharray="0.05"  stroke-width="0.025"/&gt;
+  <!-- Ligne rouge pointillé qui indique la limite
+       à partir de laquelle une liaison miter devient bevel -->
+  <path d="M0,0 h10" stroke="red" stroke-dasharray="0.05"  stroke-width="0.025"/>
 
-  &lt;!--
+  <!--
   Lignes roses qui indiquent la position
   du chemin pour chaque trait
-  --&gt;
-  &lt;g&gt;
-    &lt;path d="M1,5 l2,-3 l2,3" stroke="pink" fill="none" stroke-width="0.025" /&gt;
-    &lt;circle cx="1" cy="5" r="0.05" fill="pink" /&gt;
-    &lt;circle cx="3" cy="2" r="0.05" fill="pink" /&gt;
-    &lt;circle cx="5" cy="5" r="0.05" fill="pink" /&gt;
+  -->
+  <g>
+    <path d="M1,5 l2,-3 l2,3" stroke="pink" fill="none" stroke-width="0.025" />
+    <circle cx="1" cy="5" r="0.05" fill="pink" />
+    <circle cx="3" cy="2" r="0.05" fill="pink" />
+    <circle cx="5" cy="5" r="0.05" fill="pink" />
 
-    &lt;path d="M7,5 l0.75,-3 l0.75,3" stroke="pink" fill="none" stroke-width="0.025" /&gt;
-    &lt;circle cx="7"    cy="5" r="0.05" fill="pink" /&gt;
-    &lt;circle cx="7.75" cy="2" r="0.05" fill="pink" /&gt;
-    &lt;circle cx="8.5"  cy="5" r="0.05" fill="pink" /&gt;
-  &lt;/g&gt;
-&lt;/svg&gt;</pre>
+    <path d="M7,5 l0.75,-3 l0.75,3" stroke="pink" fill="none" stroke-width="0.025" />
+    <circle cx="7"    cy="5" r="0.05" fill="pink" />
+    <circle cx="7.75" cy="2" r="0.05" fill="pink" />
+    <circle cx="8.5"  cy="5" r="0.05" fill="pink" />
+  </g>
+</svg>
+```
 
-<p>{{EmbedLiveSample('miter', '100%', 200)}}</p>
+{{EmbedLiveSample('miter', '100%', 200)}}
 
-<h3 id="miter-clip">miter-clip</h3>
+### miter-clip
 
-<div class="note">
-  <p><strong>Note :</strong> La valeur <code>miter-clip</code> a été introduite en SVG2 et n'est pas souvent pris en charge pour le moment, voir {{anch("Compatibilité des navigateurs")}} ci-dessous pour plus de détails.</p>
-</div>
+> **Note :** La valeur `miter-clip` a été introduite en SVG2 et n'est pas souvent pris en charge pour le moment, voir {{anch("Compatibilité des navigateurs")}} ci-dessous pour plus de détails.
 
-<p>La valeur <code>miter-clip</code> indique qu'un angle droit est utilisé pour joindre les segments du chemin. Le coin est formé en prolongeant les bords extérieurs du trait jusqu'à ce qu'ils se joignent.</p>
+La valeur `miter-clip` indique qu'un angle droit est utilisé pour joindre les segments du chemin. Le coin est formé en prolongeant les bords extérieurs du trait jusqu'à ce qu'ils se joignent.
 
-<p>Si la longueur du coin dépasse {{SVGAttr('stroke-miterlimit')}}, le coin tronqué à une distance égale à la moitié de la valeur de {{SVGAttr('stroke-miterlimit')}} multiplié par l'épaisseur du trait. Cela fournit un meilleur rendu que <code>miter</code> sur les angles très aigus et dans le cas d'une animation.</p>
+Si la longueur du coin dépasse {{SVGAttr('stroke-miterlimit')}}, le coin tronqué à une distance égale à la moitié de la valeur de {{SVGAttr('stroke-miterlimit')}} multiplié par l'épaisseur du trait. Cela fournit un meilleur rendu que `miter` sur les angles très aigus et dans le cas d'une animation.
 
-<h4 id="Exemple_4">Exemple</h4>
+#### Exemple
 
-<pre class="brush: css hidden">html,body,svg { height:100% }</pre>
+```css hidden
+html,body,svg { height:100% }
+```
 
-<pre class="brush: html">&lt;svg viewBox="0 -1 10 7" xmlns="http://www.w3.org/2000/svg"&gt;
-  &lt;!-- Effet de la valeur "miter-clip" --&gt;
-  &lt;path d="M1,5 l2,-3 l2,3" stroke="black" fill="none"
-        stroke-linejoin="miter-clip" /&gt;
+```html
+<svg viewBox="0 -1 10 7" xmlns="http://www.w3.org/2000/svg">
+  <!-- Effet de la valeur "miter-clip" -->
+  <path d="M1,5 l2,-3 l2,3" stroke="black" fill="none"
+        stroke-linejoin="miter-clip" />
 
-  &lt;!-- Effet de la valeur "miter-clip" sur un angle aigu
-       où la limite stroke-miterlimit est dépassée --&gt;
-  &lt;path d="M7,5 l0.75,-3 l0.75,3" stroke="black" fill="none"
-        stroke-linejoin="miter-clip" /&gt;
+  <!-- Effet de la valeur "miter-clip" sur un angle aigu
+       où la limite stroke-miterlimit est dépassée -->
+  <path d="M7,5 l0.75,-3 l0.75,3" stroke="black" fill="none"
+        stroke-linejoin="miter-clip" />
 
-  &lt;!-- Ligne rouge pointillé qui indique la limite
-       à partir de laquelle le coin sera tronqué --&gt;
-  &lt;path d="M0,0 h10" stroke="red" stroke-dasharray="0.05"  stroke-width="0.025"/&gt;
+  <!-- Ligne rouge pointillé qui indique la limite
+       à partir de laquelle le coin sera tronqué -->
+  <path d="M0,0 h10" stroke="red" stroke-dasharray="0.05"  stroke-width="0.025"/>
 
-  &lt;!--
+  <!--
   Lignes roses qui indiquent la position
   du chemin pour chaque trait
-  --&gt;
-  &lt;g&gt;
-    &lt;path d="M1,5 l2,-3 l2,3" stroke="pink" fill="none" stroke-width="0.025" /&gt;
-    &lt;circle cx="1" cy="5" r="0.05" fill="pink" /&gt;
-    &lt;circle cx="3" cy="2" r="0.05" fill="pink" /&gt;
-    &lt;circle cx="5" cy="5" r="0.05" fill="pink" /&gt;
+  -->
+  <g>
+    <path d="M1,5 l2,-3 l2,3" stroke="pink" fill="none" stroke-width="0.025" />
+    <circle cx="1" cy="5" r="0.05" fill="pink" />
+    <circle cx="3" cy="2" r="0.05" fill="pink" />
+    <circle cx="5" cy="5" r="0.05" fill="pink" />
 
-    &lt;path d="M7,5 l0.75,-3 l0.75,3" stroke="pink" fill="none" stroke-width="0.025" /&gt;
-    &lt;circle cx="7"    cy="5" r="0.05" fill="pink" /&gt;
-    &lt;circle cx="7.75" cy="2" r="0.05" fill="pink" /&gt;
-    &lt;circle cx="8.5"  cy="5" r="0.05" fill="pink" /&gt;
-  &lt;/g&gt;
-&lt;/svg&gt;</pre>
+    <path d="M7,5 l0.75,-3 l0.75,3" stroke="pink" fill="none" stroke-width="0.025" />
+    <circle cx="7"    cy="5" r="0.05" fill="pink" />
+    <circle cx="7.75" cy="2" r="0.05" fill="pink" />
+    <circle cx="8.5"  cy="5" r="0.05" fill="pink" />
+  </g>
+</svg>
+```
 
-<p>{{EmbedLiveSample('miter-clip', '100%', 200)}}</p>
+{{EmbedLiveSample('miter-clip', '100%', 200)}}
 
-<h3 id="round">round</h3>
+### round
 
-<p>La valeur <code>round</code> indique qu'un coin arrondi est utilisé pour joindre les segments du chemin.</p>
+La valeur `round` indique qu'un coin arrondi est utilisé pour joindre les segments du chemin.
 
-<h4 id="Exemple_5">Exemple</h4>
+#### Exemple
 
-<pre class="brush: css hidden">html,body,svg { height:100% }</pre>
+```css hidden
+html,body,svg { height:100% }
+```
 
-<pre class="brush: html">&lt;svg viewBox="0 0 6 6" xmlns="http://www.w3.org/2000/svg"&gt;
-  &lt;!-- Effet de la valeur "round" --&gt;
-  &lt;path d="M1,5 l2,-3 l2,3" stroke="black" fill="none"
-        stroke-linejoin="round" /&gt;
+```html
+<svg viewBox="0 0 6 6" xmlns="http://www.w3.org/2000/svg">
+  <!-- Effet de la valeur "round" -->
+  <path d="M1,5 l2,-3 l2,3" stroke="black" fill="none"
+        stroke-linejoin="round" />
 
-  &lt;!--
+  <!--
   Lignes roses qui indiquent la position
   du chemin pour chaque trait
-  --&gt;
-  &lt;g id="p"&gt;
-    &lt;path d="M1,5 l2,-3 l2,3"
-          stroke="pink" fill="none" stroke-width="0.025" /&gt;
-    &lt;circle cx="1" cy="5" r="0.05" fill="pink" /&gt;
-    &lt;circle cx="3" cy="2" r="0.05" fill="pink" /&gt;
-    &lt;circle cx="5" cy="5" r="0.05" fill="pink" /&gt;
-  &lt;/g&gt;
-&lt;/svg&gt;</pre>
+  -->
+  <g id="p">
+    <path d="M1,5 l2,-3 l2,3"
+          stroke="pink" fill="none" stroke-width="0.025" />
+    <circle cx="1" cy="5" r="0.05" fill="pink" />
+    <circle cx="3" cy="2" r="0.05" fill="pink" />
+    <circle cx="5" cy="5" r="0.05" fill="pink" />
+  </g>
+</svg>
+```
 
-<p>{{EmbedLiveSample('round', '100%', 200)}}</p>
+{{EmbedLiveSample('round', '100%', 200)}}
 
-<h2 id="Spécifications">Spécifications</h2>
+## Spécifications
 
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">Statut</th>
-   <th scope="col">Commentaire</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName("SVG2", "painting.html#StrokeLinejoinProperty", "stroke-linejoin")}}</td>
-   <td>{{Spec2("SVG2")}}</td>
-   <td>Définition pour les formes et le texte</td>
-  </tr>
-  <tr>
-   <td>{{SpecName("SVG1.1", "painting.html#StrokeLinejoinProperty", "stroke-linejoin")}}</td>
-   <td>{{Spec2("SVG1.1")}}</td>
-   <td>Définition initiale pour les formes et le texte</td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                                                                                | Statut                   | Commentaire                                     |
+| ------------------------------------------------------------------------------------------------------------ | ------------------------ | ----------------------------------------------- |
+| {{SpecName("SVG2", "painting.html#StrokeLinejoinProperty", "stroke-linejoin")}}     | {{Spec2("SVG2")}} | Définition pour les formes et le texte          |
+| {{SpecName("SVG1.1", "painting.html#StrokeLinejoinProperty", "stroke-linejoin")}} | {{Spec2("SVG1.1")}} | Définition initiale pour les formes et le texte |
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("svg.attributes.presentation.stroke-linejoin")}}</p>
+{{Compat("svg.attributes.presentation.stroke-linejoin")}}
diff --git a/files/fr/web/svg/attribute/stroke-miterlimit/index.md b/files/fr/web/svg/attribute/stroke-miterlimit/index.md
index f1dfd341e8..4b9a02bb5d 100644
--- a/files/fr/web/svg/attribute/stroke-miterlimit/index.md
+++ b/files/fr/web/svg/attribute/stroke-miterlimit/index.md
@@ -6,109 +6,102 @@ tags:
   - SVG Attribute
 translation_of: Web/SVG/Attribute/stroke-miterlimit
 ---
-<div>{{SVGRef}}</div>
+{{SVGRef}}
 
-<p>L'attribut <strong><code>stroke-miterlimit</code></strong> définit la limite du rapport entre la longueur du coin et la valeur de {{ SVGAttr("stroke-width") }} utilisée pour dessiner la <a href="/fr/docs/Web/SVG/Attribute/stroke-linejoin">liaison entre deux segments de ligne</a>. Quand la limite est dépassée, la liaison passe du type <em>miter</em> (pointu) au type <em>bevel</em> (biseauté).</p>
+L'attribut **`stroke-miterlimit`** définit la limite du rapport entre la longueur du coin et la valeur de {{ SVGAttr("stroke-width") }} utilisée pour dessiner la [liaison entre deux segments de ligne](/fr/docs/Web/SVG/Attribute/stroke-linejoin). Quand la limite est dépassée, la liaison passe du type _miter_ (pointu) au type _bevel_ (biseauté).
 
-<div class="note">
-  <p><strong>Note:</strong> L'attribut <code>stroke-miterlimit</code> étant un attribut de présentation, il peut être utilisé comme propriété CSS.</p>
-</div>
+> **Note :** L'attribut `stroke-miterlimit` étant un attribut de présentation, il peut être utilisé comme propriété CSS.
 
-<p>Cet attribut peut être appliqué à n'importe quel élément, en revanche il n'aura d'effet que sur les éléments suivants: {{SVGElement('altGlyph')}}, {{SVGElement('path')}}, {{SVGElement('polygon')}}, {{SVGElement('polyline')}}, {{SVGElement('rect')}}, {{SVGElement('text')}}, {{SVGElement('textPath')}}, {{SVGElement('tref')}}, and {{SVGElement('tspan')}}</p>
+Cet attribut peut être appliqué à n'importe quel élément, en revanche il n'aura d'effet que sur les éléments suivants: {{SVGElement('altGlyph')}}, {{SVGElement('path')}}, {{SVGElement('polygon')}}, {{SVGElement('polyline')}}, {{SVGElement('rect')}}, {{SVGElement('text')}}, {{SVGElement('textPath')}}, {{SVGElement('tref')}}, and {{SVGElement('tspan')}}
 
-<h2>Exemple</h2>
+## Exemple
 
-<pre class="brush: css hidden">html,body,svg { height:100% }</pre>
+```css hidden
+html,body,svg { height:100% }
+```
 
-<pre class="brush: html">&lt;svg viewBox="0 0 38 30" xmlns="http://www.w3.org/2000/svg"&gt;
-  &lt;!-- Impact du miterlimit par défaut --&gt;
-  &lt;path stroke="black" fill="none" stroke-linejoin="miter" id="p1"
+```html
+<svg viewBox="0 0 38 30" xmlns="http://www.w3.org/2000/svg">
+  <!-- Impact du miterlimit par défaut -->
+  <path stroke="black" fill="none" stroke-linejoin="miter" id="p1"
         d="M1,9 l7   ,-3 l7   ,3
            m2,0 l3.5 ,-3 l3.5 ,3
            m2,0 l2   ,-3 l2   ,3
            m2,0 l0.75,-3 l0.75,3
-           m2,0 l0.5 ,-3 l0.5 ,3" /&gt;
+           m2,0 l0.5 ,-3 l0.5 ,3" />
 
-  &lt;!-- Impact du miterlimit le plus petit (1) --&gt;
-  &lt;path stroke="black" fill="none" stroke-linejoin="miter"
+  <!-- Impact du miterlimit le plus petit (1) -->
+  <path stroke="black" fill="none" stroke-linejoin="miter"
         stroke-miterlimit="1" id="p2"
         d="M1,19 l7   ,-3 l7   ,3
            m2, 0 l3.5 ,-3 l3.5 ,3
            m2, 0 l2   ,-3 l2   ,3
            m2, 0 l0.75,-3 l0.75,3
-           m2, 0 l0.5 ,-3 l0.5 ,3" /&gt;
+           m2, 0 l0.5 ,-3 l0.5 ,3" />
 
-  &lt;!-- Impact d'un large miterlimit (8) --&gt;
-  &lt;path stroke="black" fill="none" stroke-linejoin="miter"
+  <!-- Impact d'un large miterlimit (8) -->
+  <path stroke="black" fill="none" stroke-linejoin="miter"
         stroke-miterlimit="8" id="p3"
         d="M1,29 l7   ,-3 l7   ,3
            m2, 0 l3.5 ,-3 l3.5 ,3
            m2, 0 l2   ,-3 l2   ,3
            m2, 0 l0.75,-3 l0.75,3
-           m2, 0 l0.5 ,-3 l0.5 ,3" /&gt;
+           m2, 0 l0.5 ,-3 l0.5 ,3" />
 
-  &lt;!-- Les lignes roses suivantes indiquent la position du chemin pour chaque trait --&gt;
-  &lt;path stroke="pink" fill="none" stroke-width="0.05"
+  <!-- Les lignes roses suivantes indiquent la position du chemin pour chaque trait -->
+  <path stroke="pink" fill="none" stroke-width="0.05"
         d="M1, 9 l7,-3 l7,3 m2,0 l3.5,-3 l3.5,3 m2,0 l2,-3 l2,3 m2,0 l0.75,-3 l0.75,3 m2,0 l0.5,-3 l0.5,3
            M1,19 l7,-3 l7,3 m2,0 l3.5,-3 l3.5,3 m2,0 l2,-3 l2,3 m2,0 l0.75,-3 l0.75,3 m2,0 l0.5,-3 l0.5,3
-           M1,29 l7,-3 l7,3 m2,0 l3.5,-3 l3.5,3 m2,0 l2,-3 l2,3 m2,0 l0.75,-3 l0.75,3 m2,0 l0.5,-3 l0.5,3" /&gt;
-&lt;/svg&gt;</pre>
+           M1,29 l7,-3 l7,3 m2,0 l3.5,-3 l3.5,3 m2,0 l2,-3 l2,3 m2,0 l0.75,-3 l0.75,3 m2,0 l0.5,-3 l0.5,3" />
+</svg>
+```
 
-<p>{{EmbedLiveSample('exemple', '100%', 400)}}</p>
+{{EmbedLiveSample('exemple', '100%', 400)}}
 
-<p>Quand deux segments de ligne se recontrent en angle aigu, et la liaison définit par {{ SVGAttr("stroke-linejoin") }} vaut <code>miter</code>, il est possible que le coin s'étende bien au-delà de l'épaisseur de la ligne du contour. Le ratio <code>stroke-miterlimit</code> est utilisé pour définir une limite à partir de laquelle la liaison est convertie de <em>miter</em> à <em>bevel</em>.</p>
+Quand deux segments de ligne se recontrent en angle aigu, et la liaison définit par {{ SVGAttr("stroke-linejoin") }} vaut `miter`, il est possible que le coin s'étende bien au-delà de l'épaisseur de la ligne du contour. Le ratio `stroke-miterlimit` est utilisé pour définir une limite à partir de laquelle la liaison est convertie de _miter_ à _bevel_.
 
-<p>Le rapport entre la longueur du coin (distance entre le côté intérieur et le côté externe du coin) et {{ SVGAttr("stroke-width") }} est directement lié à l'angle (θ) entre les segments, tel que décrit par cette formule:</p>
+Le rapport entre la longueur du coin (distance entre le côté intérieur et le côté externe du coin) et {{ SVGAttr("stroke-width") }} est directement lié à l'angle (θ) entre les segments, tel que décrit par cette formule:
 
-<p><math> <mstyle displaystyle="true"> <mi><code>stroke-miterlimit</code></mi> <mo>=</mo> <mfrac> <mrow> <mi>miterLength</mi> </mrow> <mrow> <mi><code>stroke-width</code></mi> </mrow> </mfrac> <mo>=</mo> <mfrac> <mrow> <mn>1</mn> </mrow> <mrow> <mrow> <mi>sin</mi> <mrow> <mo>(</mo> <mfrac> <mrow> <mo>θ</mo> </mrow> <mrow> <mn>2</mn> </mrow> </mfrac> <mo>)</mo> </mrow> </mrow> </mrow> </mfrac> </mstyle> </math></p>
+<math><mstyle displaystyle="true"><mi><code>stroke-miterlimit</code></mi> <mo>=</mo> <mfrac><mrow><mi>miterLength</mi> </mrow><mrow><mi><code>stroke-width</code></mi> </mrow></mfrac><mo>=</mo> <mfrac><mrow><mn>1</mn> </mrow><mrow><mrow><mi>sin</mi> <mrow><mo>(</mo> <mfrac><mrow><mo>θ</mo> </mrow><mrow><mn>2</mn> </mrow></mfrac><mo>)</mo></mrow></mrow></mrow></mfrac></mstyle></math>
 
-<p>Par exemple, une limite de 1.414 convertit une liaison <em>miter</em> en <em>bevel</em> pour les angles de moins de 90 degrés, une limite de 4.0 pour les angles de moins de 29 degrés, et une limite de 10.0 pour les angles de moins de 11.5 degrés environ.</p>
+Par exemple, une limite de 1.414 convertit une liaison _miter_ en _bevel_ pour les angles de moins de 90 degrés, une limite de 4.0 pour les angles de moins de 29 degrés, et une limite de 10.0 pour les angles de moins de 11.5 degrés environ.
 
-<h2 id="Contexte_d'utilisation">Contexte d'utilisation</h2>
+## Contexte d'utilisation
 
 <table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="row">Valeur</th>
-   <td><strong><a href="/fr/SVG/Content_type#Number" title="en/SVG/Content_type#Number">&lt;number&gt;</a></strong></td>
-  </tr>
-  <tr>
-   <th scope="row">Valeur par défaut</th>
-   <td>4</td>
-  </tr>
-  <tr>
-   <th scope="row">Animation</th>
-   <td>Oui</td>
-  </tr>
- </tbody>
+  <tbody>
+    <tr>
+      <th scope="row">Valeur</th>
+      <td>
+        <strong
+          ><a
+            href="/fr/SVG/Content_type#Number"
+            title="en/SVG/Content_type#Number"
+            >&#x3C;number></a
+          ></strong
+        >
+      </td>
+    </tr>
+    <tr>
+      <th scope="row">Valeur par défaut</th>
+      <td>4</td>
+    </tr>
+    <tr>
+      <th scope="row">Animation</th>
+      <td>Oui</td>
+    </tr>
+  </tbody>
 </table>
 
-<p>La valeur de <code>stroke-miterlimit</code> doit être supérieure ou égale à 1.</p>
+La valeur de `stroke-miterlimit` doit être supérieure ou égale à 1.
 
-<h2 id="Browser_Compatibility">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("svg.attributes.presentation.stroke-miterlimit")}}</p>
+{{Compat("svg.attributes.presentation.stroke-miterlimit")}}
 
-<h2 id="Spécification">Spécification</h2>
+## Spécification
 
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">Statut</th>
-   <th scope="col">Commentaire</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName("SVG2", "painting.html#StrokeMiterlimitProperty", "stroke-miterlimit")}}</td>
-   <td>{{Spec2("SVG2")}}</td>
-   <td>Définition pour les formes et le texte</td>
-  </tr>
-  <tr>
-   <td>{{SpecName("SVG1.1", "painting.html#StrokeMiterlimitProperty", "stroke-miterlimit")}}</td>
-   <td>{{Spec2("SVG1.1")}}</td>
-   <td>Définition initiale pour les formes et le texte</td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                                                                                    | Statut                   | Commentaire                                     |
+| ---------------------------------------------------------------------------------------------------------------- | ------------------------ | ----------------------------------------------- |
+| {{SpecName("SVG2", "painting.html#StrokeMiterlimitProperty", "stroke-miterlimit")}} | {{Spec2("SVG2")}} | Définition pour les formes et le texte          |
+| {{SpecName("SVG1.1", "painting.html#StrokeMiterlimitProperty", "stroke-miterlimit")}} | {{Spec2("SVG1.1")}} | Définition initiale pour les formes et le texte |
diff --git a/files/fr/web/svg/attribute/stroke-opacity/index.md b/files/fr/web/svg/attribute/stroke-opacity/index.md
index c1ba3c17f0..8acc8053df 100644
--- a/files/fr/web/svg/attribute/stroke-opacity/index.md
+++ b/files/fr/web/svg/attribute/stroke-opacity/index.md
@@ -6,88 +6,78 @@ tags:
   - SVG Attribute
 translation_of: Web/SVG/Attribute/stroke-opacity
 ---
-<div>{{SVGRef}}</div>
+{{SVGRef}}
 
-<p>L'attribut <strong><code>stroke-opacity</code></strong> définit l'opacité du contour (<em>couleur</em>, <em>dégradé</em>, <em>motif</em>, etc) appliqué à une forme SVG.</p>
+L'attribut **`stroke-opacity`** définit l'opacité du contour (_couleur_, _dégradé_, _motif_, etc) appliqué à une forme SVG.
 
-<div class="note">
-  <p><strong>Note :</strong> <code>stroke-opacity</code> étant un attribut de présentation, il peut être utilisé comme propriété CSS.</p>
-</div>
+> **Note :** `stroke-opacity` étant un attribut de présentation, il peut être utilisé comme propriété CSS.
 
-<p>Cet attribut peut être appliqué à tous les éléments, en revanche il n'aura d'effet que sur les éléments suivants: {{SVGElement('altGlyph')}}, {{SVGElement('circle')}}, {{SVGElement('ellipse')}}, {{SVGElement('path')}}, {{SVGElement('polygon')}}, {{SVGElement('polyline')}}, {{SVGElement('rect')}}, {{SVGElement('text')}}, {{SVGElement('textPath')}}, {{SVGElement('tref')}}, et {{SVGElement('tspan')}}</p>
+Cet attribut peut être appliqué à tous les éléments, en revanche il n'aura d'effet que sur les éléments suivants: {{SVGElement('altGlyph')}}, {{SVGElement('circle')}}, {{SVGElement('ellipse')}}, {{SVGElement('path')}}, {{SVGElement('polygon')}}, {{SVGElement('polyline')}}, {{SVGElement('rect')}}, {{SVGElement('text')}}, {{SVGElement('textPath')}}, {{SVGElement('tref')}}, et {{SVGElement('tspan')}}
 
-<h2>Exemple</h2>
+## Exemple
 
-<pre class="brush: css hidden">html,body,svg { height:100% }</pre>
+```css hidden
+html,body,svg { height:100% }
+```
 
-<pre class="brush: html">&lt;svg viewBox="0 0 40 10" xmlns="http://www.w3.org/2000/svg"&gt;
-  &lt;!-- Opacité par défaut: 1 --&gt;
-  &lt;circle cx="5" cy="5" r="4" stroke="green" /&gt;
+```html
+<svg viewBox="0 0 40 10" xmlns="http://www.w3.org/2000/svg">
+  <!-- Opacité par défaut: 1 -->
+  <circle cx="5" cy="5" r="4" stroke="green" />
 
-  &lt;!-- Définit l'opacité avec un nombre entre 0 et 1--&gt;
-  &lt;circle cx="15" cy="5" r="4" stroke="green"
-          stroke-opacity="0.7" /&gt;
+  <!-- Définit l'opacité avec un nombre entre 0 et 1-->
+  <circle cx="15" cy="5" r="4" stroke="green"
+          stroke-opacity="0.7" />
 
-  &lt;!-- Définit l'opacité avec un pourcentage --&gt;
-  &lt;circle cx="25" cy="5" r="4" stroke="green"
-          stroke-opacity="50%" /&gt;
+  <!-- Définit l'opacité avec un pourcentage -->
+  <circle cx="25" cy="5" r="4" stroke="green"
+          stroke-opacity="50%" />
 
-  &lt;!-- Définit l'opacité comme propriété CSS --&gt;
-  &lt;circle cx="35" cy="5" r="4" stroke="green"
-          style="stroke-opacity: .3;" /&gt;
-&lt;/svg&gt;</pre>
+  <!-- Définit l'opacité comme propriété CSS -->
+  <circle cx="35" cy="5" r="4" stroke="green"
+          style="stroke-opacity: .3;" />
+</svg>
+```
 
-<p>{{EmbedLiveSample('exemple', '100%', 150)}}</p>
+{{EmbedLiveSample('exemple', '100%', 150)}}
 
-<h2 id="Notes_d'usage">Notes d'usage</h2>
+## Notes d'usage
 
 <table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="row">Valeur</th>
-   <td><code>[0-1]</code> | <strong><a href="/docs/Web/SVG/Content_type#Paint">&lt;percentage&gt;</a></strong></td>
-  </tr>
-  <tr>
-   <th scope="row">Valeur par défaut</th>
-   <td><code>1</code></td>
-  </tr>
-  <tr>
-   <th scope="row">Animation</th>
-   <td>Oui</td>
-  </tr>
- </tbody>
+  <tbody>
+    <tr>
+      <th scope="row">Valeur</th>
+      <td>
+        <code>[0-1]</code> |
+        <strong
+          ><a href="/docs/Web/SVG/Content_type#Paint"
+            >&#x3C;percentage></a
+          ></strong
+        >
+      </td>
+    </tr>
+    <tr>
+      <th scope="row">Valeur par défaut</th>
+      <td><code>1</code></td>
+    </tr>
+    <tr>
+      <th scope="row">Animation</th>
+      <td>Oui</td>
+    </tr>
+  </tbody>
 </table>
 
-<div class="note">
-  <p><strong>Note :</strong> SVG2 introduit les valeurs en pourcentage pour <code>stroke-opacity</code>, Cependant, ce n'est pas souvent pris en charge. pour le moment (<em>voir {{anch("Compatibilité des navigateurs")}} ci-dessous</em>), il est par conséquent recommendé d'utiliser les valeurs de l'intervalle <code>[0-1]</code>.</p>
-</div>
+> **Note :** SVG2 introduit les valeurs en pourcentage pour `stroke-opacity`, Cependant, ce n'est pas souvent pris en charge. pour le moment (_voir {{anch("Compatibilité des navigateurs")}} ci-dessous_), il est par conséquent recommendé d'utiliser les valeurs de l'intervalle `[0-1]`.
 
-<p>Il est important de savoir que le contour recouvre partiellement le remplissage d'une forme. Ainsi, un contour avec une opacité différente de 1 affichera partiellement le remplissage du dessous. Pour éviter cet effet, il est possible d'appliquer une opacité globale avec l'attribut {{SVGAttr('opacity')}} ou placer le contour derrière le remplissage avec {{SVGAttr('paint-order')}}.</p>
+Il est important de savoir que le contour recouvre partiellement le remplissage d'une forme. Ainsi, un contour avec une opacité différente de 1 affichera partiellement le remplissage du dessous. Pour éviter cet effet, il est possible d'appliquer une opacité globale avec l'attribut {{SVGAttr('opacity')}} ou placer le contour derrière le remplissage avec {{SVGAttr('paint-order')}}.
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("svg.attributes.presentation.stroke-opacity")}}</p>
+{{Compat("svg.attributes.presentation.stroke-opacity")}}
 
-<h2 id="Spécification">Spécification</h2>
+## Spécification
 
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">Statut</th>
-   <th scope="col">Commentaire</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName("SVG2", "painting.html#StrokeOpacityProperty", "stroke-opacity")}}</td>
-   <td>{{Spec2("SVG2")}}</td>
-   <td>Définition pour les formes et le texte</td>
-  </tr>
-  <tr>
-   <td>{{SpecName("SVG1.1", "painting.html#StrokeOpacityProperty", "stroke-opacity")}}</td>
-   <td>{{Spec2("SVG1.1")}}</td>
-   <td>Définition initiale pour les formes et le texte</td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                                                                            | Statut                   | Commentaire                                     |
+| -------------------------------------------------------------------------------------------------------- | ------------------------ | ----------------------------------------------- |
+| {{SpecName("SVG2", "painting.html#StrokeOpacityProperty", "stroke-opacity")}} | {{Spec2("SVG2")}} | Définition pour les formes et le texte          |
+| {{SpecName("SVG1.1", "painting.html#StrokeOpacityProperty", "stroke-opacity")}} | {{Spec2("SVG1.1")}} | Définition initiale pour les formes et le texte |
diff --git a/files/fr/web/svg/attribute/stroke-width/index.md b/files/fr/web/svg/attribute/stroke-width/index.md
index db0bb6754d..66dcae8d4a 100644
--- a/files/fr/web/svg/attribute/stroke-width/index.md
+++ b/files/fr/web/svg/attribute/stroke-width/index.md
@@ -6,88 +6,97 @@ tags:
   - SVG Attribute
 translation_of: Web/SVG/Attribute/stroke-width
 ---
-<div>{{SVGRef}}</div>
+{{SVGRef}}
 
-<p>L'attribut <strong><code>stroke-width</code></strong> définit l'épaisseur du contour à appliquer à une forme SVG.</p>
+L'attribut **`stroke-width`** définit l'épaisseur du contour à appliquer à une forme SVG.
 
-<div class="note">
-  <p><strong>Note :</strong> <code>stroke-width</code> étant un attribut de présentation, il peut être utilisé comme propriété CSS.</p>
-</div>
+> **Note :** `stroke-width` étant un attribut de présentation, il peut être utilisé comme propriété CSS.
 
-<p>Cet attribut peut être appliqué à tous les éléments, en revanche il n'aura d'effet que sur les éléments suivants: {{SVGElement('altGlyph')}}, {{SVGElement('circle')}}, {{SVGElement('ellipse')}}, {{SVGElement('path')}}, {{SVGElement('polygon')}}, {{SVGElement('polyline')}}, {{SVGElement('rect')}}, {{SVGElement('text')}}, {{SVGElement('textPath')}}, {{SVGElement('tref')}}, et {{SVGElement('tspan')}}</p>
+Cet attribut peut être appliqué à tous les éléments, en revanche il n'aura d'effet que sur les éléments suivants: {{SVGElement('altGlyph')}}, {{SVGElement('circle')}}, {{SVGElement('ellipse')}}, {{SVGElement('path')}}, {{SVGElement('polygon')}}, {{SVGElement('polyline')}}, {{SVGElement('rect')}}, {{SVGElement('text')}}, {{SVGElement('textPath')}}, {{SVGElement('tref')}}, et {{SVGElement('tspan')}}
 
-<h2>Exemple</h2>
+## Exemple
 
-<pre class="brush: css hidden">html,body,svg { height:100% }</pre>
+```css hidden
+html,body,svg { height:100% }
+```
 
-<pre class="brush: html">&lt;svg viewBox="0 0 30 10" xmlns="http://www.w3.org/2000/svg"&gt;
-  &lt;!-- Épaisseur par défaut: 1 --&gt;
-  &lt;circle cx="5" cy="5" r="3" stroke="green" /&gt;
+```html
+<svg viewBox="0 0 30 10" xmlns="http://www.w3.org/2000/svg">
+  <!-- Épaisseur par défaut: 1 -->
+  <circle cx="5" cy="5" r="3" stroke="green" />
 
-  &lt;!-- Définit l'épaisseur avec un nombre --&gt;
-  &lt;circle cx="15" cy="5" r="3" stroke="green"
-          stroke-width="3" /&gt;
+  <!-- Définit l'épaisseur avec un nombre -->
+  <circle cx="15" cy="5" r="3" stroke="green"
+          stroke-width="3" />
 
-  &lt;!-- Définit l'épaisseur avec un pourcentage --&gt;
-  &lt;circle cx="25" cy="5" r="3" stroke="green"
-          stroke-width="2%" /&gt;
-&lt;/svg&gt;</pre>
+  <!-- Définit l'épaisseur avec un pourcentage -->
+  <circle cx="25" cy="5" r="3" stroke="green"
+          stroke-width="2%" />
+</svg>
+```
 
-<p>{{EmbedLiveSample('exemple', '100%', 150)}}</p>
+{{EmbedLiveSample('exemple', '100%', 150)}}
 
-<h2 id="Notes_d'usage">Notes d'usage</h2>
+## Notes d'usage
 
 <table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="row">Valeur</th>
-   <td><strong><a href="/docs/Web/SVG/Content_type#Length">&lt;length&gt;</a></strong> | <strong><a href="/docs/Web/SVG/Content_type#Percentage">&lt;percentage&gt;</a></strong></td>
-  </tr>
-  <tr>
-   <th scope="row">Valeur par défaut</th>
-   <td><code>1px</code></td>
-  </tr>
-  <tr>
-   <th scope="row">Animation</th>
-   <td>Oui</td>
-  </tr>
- </tbody>
+  <tbody>
+    <tr>
+      <th scope="row">Valeur</th>
+      <td>
+        <strong
+          ><a href="/docs/Web/SVG/Content_type#Length">&#x3C;length></a></strong
+        > |
+        <strong
+          ><a href="/docs/Web/SVG/Content_type#Percentage"
+            >&#x3C;percentage></a
+          ></strong
+        >
+      </td>
+    </tr>
+    <tr>
+      <th scope="row">Valeur par défaut</th>
+      <td><code>1px</code></td>
+    </tr>
+    <tr>
+      <th scope="row">Animation</th>
+      <td>Oui</td>
+    </tr>
+  </tbody>
 </table>
 
-<div class="note">
-  <p><strong>Note :</strong> SVG2 introduit les valeurs en pourcentage pour <code>stroke-width</code>, Cependant, ce n'est pas souvent pris en charge pour le moment (<em>voir {{anch('Compatibilité des navigateurs')}} ci-dessous</em>). Il est par conséquent recommandé d'utiliser les valeurs de l'intervalle <code>[0-1]</code>.</p>
-</div>
+> **Note :** SVG2 introduit les valeurs en pourcentage pour `stroke-width`, Cependant, ce n'est pas souvent pris en charge pour le moment (_voir {{anch('Compatibilité des navigateurs')}} ci-dessous_). Il est par conséquent recommandé d'utiliser les valeurs de l'intervalle `[0-1]`.
 
-<p>Une valeur en pourcentage est toujours calculée en tant que pourcentage de la longueur diagonale {{SVGAttr('viewBox')}} normalisée.</p>
+Une valeur en pourcentage est toujours calculée en tant que pourcentage de la longueur diagonale {{SVGAttr('viewBox')}} normalisée.
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("svg.attributes.presentation.stroke-width")}}</p>
+{{Compat("svg.attributes.presentation.stroke-width")}}
 
-<h2 id="Spécification">Spécification</h2>
+## Spécification
 
 <table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">Statut</th>
-   <th scope="col">Commentaire</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName("SVG2", "painting.html#StrokeWidthProperty", "stroke-width")}}</td>
-   <td>{{Spec2("SVG2")}}</td>
-   <td>
-    <p>Définition pour les formes et le texte</p>
-
-
-   </td>
-  </tr>
-  <tr>
-   <td>{{SpecName("SVG1.1", "painting.html#StrokeWidthProperty", "stroke-width")}}</td>
-   <td>{{Spec2("SVG1.1")}}</td>
-   <td>Définition initiale pour les formes et le texte</td>
-  </tr>
- </tbody>
+  <thead>
+    <tr>
+      <th scope="col">Spécification</th>
+      <th scope="col">Statut</th>
+      <th scope="col">Commentaire</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td>
+        {{SpecName("SVG2", "painting.html#StrokeWidthProperty", "stroke-width")}}
+      </td>
+      <td>{{Spec2("SVG2")}}</td>
+      <td><p>Définition pour les formes et le texte</p></td>
+    </tr>
+    <tr>
+      <td>
+        {{SpecName("SVG1.1", "painting.html#StrokeWidthProperty", "stroke-width")}}
+      </td>
+      <td>{{Spec2("SVG1.1")}}</td>
+      <td>Définition initiale pour les formes et le texte</td>
+    </tr>
+  </tbody>
 </table>
diff --git a/files/fr/web/svg/attribute/stroke/index.md b/files/fr/web/svg/attribute/stroke/index.md
index 01e3b44595..15d964e62f 100644
--- a/files/fr/web/svg/attribute/stroke/index.md
+++ b/files/fr/web/svg/attribute/stroke/index.md
@@ -6,88 +6,73 @@ tags:
   - SVG
 translation_of: Web/SVG/Attribute/stroke
 ---
-<div>{{SVGRef}}</div>
+{{SVGRef}}
 
-<p>L'attribut <strong><code>stroke</code></strong> définit la couleur (ou n'importe quelle méthode de remplissage, comme un gradient ou motif) a utiliser pour dessiner le contour d'une forme SVG.</p>
+L'attribut **`stroke`** définit la couleur (ou n'importe quelle méthode de remplissage, comme un gradient ou motif) a utiliser pour dessiner le contour d'une forme SVG.
 
-<div class="note">
-  <p><strong>Note :</strong> <code>stroke</code> étant un attribut de présentation, il peut être utilisé comme propriété CSS.</p>
-</div>
+> **Note :** `stroke` étant un attribut de présentation, il peut être utilisé comme propriété CSS.
 
-<p>Cet attribut peut être appliqué à tout élément, en revanche il n'aura d'effet que sur les éléments suivants: {{SVGElement('altGlyph')}}, {{SVGElement('circle')}}, {{SVGElement('ellipse')}}, {{SVGElement('path')}}, {{SVGElement('polygon')}}, {{SVGElement('polyline')}}, {{SVGElement('rect')}}, {{SVGElement('text')}}, {{SVGElement('textPath')}}, {{SVGElement('tref')}}, and {{SVGElement('tspan')}}</p>
+Cet attribut peut être appliqué à tout élément, en revanche il n'aura d'effet que sur les éléments suivants: {{SVGElement('altGlyph')}}, {{SVGElement('circle')}}, {{SVGElement('ellipse')}}, {{SVGElement('path')}}, {{SVGElement('polygon')}}, {{SVGElement('polyline')}}, {{SVGElement('rect')}}, {{SVGElement('text')}}, {{SVGElement('textPath')}}, {{SVGElement('tref')}}, and {{SVGElement('tspan')}}
 
-<h2>Exemple</h2>
+## Exemple
 
-<pre class="brush: css hidden">html,body,svg { height:100% }</pre>
+```css hidden
+html,body,svg { height:100% }
+```
 
-<pre class="brush: html">&lt;svg viewBox="0 0 20 10" xmlns="http://www.w3.org/2000/svg"&gt;
+```html
+<svg viewBox="0 0 20 10" xmlns="http://www.w3.org/2000/svg">
 
-  &lt;!-- Simple trait de couleur --&gt;
-  &lt;circle cx="5" cy="5" r="4" fill="none"
-          stroke="green" /&gt;
+  <!-- Simple trait de couleur -->
+  <circle cx="5" cy="5" r="4" fill="none"
+          stroke="green" />
 
-  &lt;!-- Utiliser un degradé comme contour --&gt;
-  &lt;defs&gt;
-    &lt;linearGradient id="myGradient"&gt;
-      &lt;stop offset="0%"   stop-color="green" /&gt;
-      &lt;stop offset="100%" stop-color="white" /&gt;
-    &lt;/linearGradient&gt;
-  &lt;/defs&gt;
-  &lt;circle cx="15" cy="5" r="4" fill="none"
-          stroke="url(#myGradient)" /&gt;
-&lt;/svg&gt;
-</pre>
+  <!-- Utiliser un degradé comme contour -->
+  <defs>
+    <linearGradient id="myGradient">
+      <stop offset="0%"   stop-color="green" />
+      <stop offset="100%" stop-color="white" />
+    </linearGradient>
+  </defs>
+  <circle cx="15" cy="5" r="4" fill="none"
+          stroke="url(#myGradient)" />
+</svg>
+```
 
-<p>{{EmbedLiveSample('exemple', '100%', 200)}}</p>
+{{EmbedLiveSample('exemple', '100%', 200)}}
 
-<h2 id="Notes_d'usage">Notes d'usage</h2>
+## Notes d'usage
 
 <table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="row">Valeur</th>
-   <td><strong><a href="/docs/Web/SVG/Content_type#Paint">&lt;paint&gt;</a></strong></td>
-  </tr>
-  <tr>
-   <th scope="row">Valeur par défaut</th>
-   <td><code>none</code></td>
-  </tr>
-  <tr>
-   <th scope="row">Animation</th>
-   <td>Oui</td>
-  </tr>
- </tbody>
+  <tbody>
+    <tr>
+      <th scope="row">Valeur</th>
+      <td>
+        <strong
+          ><a href="/docs/Web/SVG/Content_type#Paint">&#x3C;paint></a></strong
+        >
+      </td>
+    </tr>
+    <tr>
+      <th scope="row">Valeur par défaut</th>
+      <td><code>none</code></td>
+    </tr>
+    <tr>
+      <th scope="row">Animation</th>
+      <td>Oui</td>
+    </tr>
+  </tbody>
 </table>
 
-<h2 id="Spécifications">Spécifications</h2>
+## Spécifications
 
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">Statut</th>
-   <th scope="col">Commentaire</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName("SVG2", "painting.html#StrokeProperty", "stroke")}}</td>
-   <td>{{Spec2("SVG2")}}</td>
-   <td>Définition pour les formes et le texte.<br>
-    Ajoute <code>context-fill</code> et <code>context-stroke</code>.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName("SVG1.1", "painting.html#StrokeProperty", "stroke")}}</td>
-   <td>{{Spec2("SVG1.1")}}</td>
-   <td>Définiton initiale pour les formes et le texte</td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                                                        | Statut                   | Commentaire                                                                        |
+| ------------------------------------------------------------------------------------ | ------------------------ | ---------------------------------------------------------------------------------- |
+| {{SpecName("SVG2", "painting.html#StrokeProperty", "stroke")}} | {{Spec2("SVG2")}} | Définition pour les formes et le texte. Ajoute `context-fill` et `context-stroke`. |
+| {{SpecName("SVG1.1", "painting.html#StrokeProperty", "stroke")}} | {{Spec2("SVG1.1")}} | Définiton initiale pour les formes et le texte                                     |
 
-<h2 id="Browser_Compatibility">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("svg.attributes.presentation.stroke")}}</p>
+{{Compat("svg.attributes.presentation.stroke")}}
 
-<div class="note">
-  <p><strong>Note :</strong> Pour plus d'informations sur les valeurs de <code>context-stroke</code> (et <code>context-fill</code>) à partir de documents HTML, voir la documentation pour la propriété non-standard {{cssxref("-moz-context-properties")}}.</p>
-</div>
+> **Note :** Pour plus d'informations sur les valeurs de `context-stroke` (et `context-fill`) à partir de documents HTML, voir la documentation pour la propriété non-standard {{cssxref("-moz-context-properties")}}.
diff --git a/files/fr/web/svg/attribute/style/index.md b/files/fr/web/svg/attribute/style/index.md
index 658ac2d4a0..13203fec87 100644
--- a/files/fr/web/svg/attribute/style/index.md
+++ b/files/fr/web/svg/attribute/style/index.md
@@ -7,78 +7,76 @@ tags:
   - SVG Attribute
 translation_of: Web/SVG/Attribute/style
 ---
-<p>{{SVGRef}}</p>
+{{SVGRef}}
 
-<p>L'attribut <strong><code>style</code></strong> définit les <a href="/fr/docs/Web/CSS">informations de style</a> pour son élément. Il fonctionne de manière identique à <a href="/fr/docs/Web/HTML/Attributs_universels/style">l'attribut <code>style</code> en HTML</a>.</p>
+L'attribut **`style`** définit les [informations de style](/fr/docs/Web/CSS) pour son élément. Il fonctionne de manière identique à [l'attribut `style` en HTML](/fr/docs/Web/HTML/Attributs_universels/style).
 
-<h2 id="Context_d'utilisation">Context d'utilisation</h2>
+## Context d'utilisation
 
 <table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="row">Catégories</th>
-   <td>Attribut de présentation</td>
-  </tr>
-  <tr>
-   <th scope="row">Valeur</th>
-   <td>&lt;style&gt;</td>
-  </tr>
-  <tr>
-   <th scope="row">Animation</th>
-   <td>Non</td>
-  </tr>
-  <tr>
-   <th scope="row">Document normatif</th>
-   <td><a href="http://www.w3.org/TR/SVG/styling.html#StyleAttribute">SVG 1.1 (2ème Edition)</a></td>
-  </tr>
- </tbody>
+  <tbody>
+    <tr>
+      <th scope="row">Catégories</th>
+      <td>Attribut de présentation</td>
+    </tr>
+    <tr>
+      <th scope="row">Valeur</th>
+      <td>&#x3C;style></td>
+    </tr>
+    <tr>
+      <th scope="row">Animation</th>
+      <td>Non</td>
+    </tr>
+    <tr>
+      <th scope="row">Document normatif</th>
+      <td>
+        <a href="http://www.w3.org/TR/SVG/styling.html#StyleAttribute"
+          >SVG 1.1 (2ème Edition)</a
+        >
+      </td>
+    </tr>
+  </tbody>
 </table>
 
-<dl>
- <dt>&lt;style&gt;</dt>
- <dd><p>La syntaxe des données de style dépend du langage de la feuille de style. Par défaut, le langage est <a href="/fr/docs/Web/CSS">CSS</a>.</p>
- <div class="note">
-  <p><strong>Note :</strong> En théorie, l'attribut {{SVGAttr("contentStyleType")}} pourrait être utilisé pour spécifier un language de style autre que CSS, comme <a href="/fr/docs/Web/XSLT">XSL(T)</a>. Cependant, cela n'a jamais été implémenté de manière satisfaisante dans les navigateurs, donc ne vous y fiez pas.</p>
-  </div>
- </dd>
-</dl>
-
-<h2 id="Exemple">Exemple</h2>
-
-<p>L'exemple suivant stylise le rectangle en utilisant l'attribut <code>style</code>, avec CSS comme langage de feuille de style.</p>
-
-<pre class="brush: html">&lt;svg viewbox="0 0 1000 500" xmlns="http://www.w3.org/2000/svg"&gt;
-  &lt;rect height="300" width="600" x="200" y="100"
-     style="fill: red; stroke: blue; stroke-width: 3"/&gt;
-&lt;/svg&gt;
-</pre>
-
-<h2 id="Éléments">Éléments</h2>
-
-<p>Les éléments suivants peuvent utiliser l'attribut <code>style</code>:</p>
-
-<ul>
- <li><a href="/fr/docs/Web/SVG/Element#Éléments_conteneurs">Éléments conteneur</a> »</li>
- <li><a href="/fr/docs/Web/SVG/Element#Éléments_primitives_de_filtre">Éléments primitives de filtre</a> »</li>
- <li><a href="/fr/docs/Web/SVG/Element#Éléments_de_dégradés">Éléments de dégradés</a> »</li>
- <li><a href="/fr/docs/Web/SVG/Element#Éléments_graphiques">Éléments graphiques</a> »</li>
- <li><a href="/fr/docs/Web/SVG/Element#Éléments_structurels">Éléments structurels</a> »</li>
- <li><a href="/fr/docs/Web/SVG/Element#Éléments_de_contenu_textuel">Éléments de contenu textuel</a> »</li>
- <li>{{ SVGElement("clipPath") }}</li>
- <li>{{ SVGElement("filter") }}</li>
- <li>{{ SVGElement("font") }}</li>
- <li>{{ SVGElement("foreignObject") }}</li>
- <li>{{ SVGElement("glyphRef") }}</li>
- <li>{{ SVGElement("stop") }}</li>
- <li>{{ SVGElement("glyph") }}</li>
-</ul>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{ SVGElement("style") }}</li>
-</ul>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("svg.attributes.style.style")}}</p>
+- \<style>
+
+  - : La syntaxe des données de style dépend du langage de la feuille de style. Par défaut, le langage est [CSS](/fr/docs/Web/CSS).
+
+    > **Note :** En théorie, l'attribut {{SVGAttr("contentStyleType")}} pourrait être utilisé pour spécifier un language de style autre que CSS, comme [XSL(T)](/fr/docs/Web/XSLT). Cependant, cela n'a jamais été implémenté de manière satisfaisante dans les navigateurs, donc ne vous y fiez pas.
+
+## Exemple
+
+L'exemple suivant stylise le rectangle en utilisant l'attribut `style`, avec CSS comme langage de feuille de style.
+
+```html
+<svg viewbox="0 0 1000 500" xmlns="http://www.w3.org/2000/svg">
+  <rect height="300" width="600" x="200" y="100"
+     style="fill: red; stroke: blue; stroke-width: 3"/>
+</svg>
+```
+
+## Éléments
+
+Les éléments suivants peuvent utiliser l'attribut `style`:
+
+- [Éléments conteneur](/fr/docs/Web/SVG/Element#Éléments_conteneurs) »
+- [Éléments primitives de filtre](/fr/docs/Web/SVG/Element#Éléments_primitives_de_filtre) »
+- [Éléments de dégradés](/fr/docs/Web/SVG/Element#Éléments_de_dégradés) »
+- [Éléments graphiques](/fr/docs/Web/SVG/Element#Éléments_graphiques) »
+- [Éléments structurels](/fr/docs/Web/SVG/Element#Éléments_structurels) »
+- [Éléments de contenu textuel](/fr/docs/Web/SVG/Element#Éléments_de_contenu_textuel) »
+- {{ SVGElement("clipPath") }}
+- {{ SVGElement("filter") }}
+- {{ SVGElement("font") }}
+- {{ SVGElement("foreignObject") }}
+- {{ SVGElement("glyphRef") }}
+- {{ SVGElement("stop") }}
+- {{ SVGElement("glyph") }}
+
+## Voir aussi
+
+- {{ SVGElement("style") }}
+
+## Compatibilité des navigateurs
+
+{{Compat("svg.attributes.style.style")}}
diff --git a/files/fr/web/svg/attribute/styling/index.md b/files/fr/web/svg/attribute/styling/index.md
index 60021207eb..94590c126d 100644
--- a/files/fr/web/svg/attribute/styling/index.md
+++ b/files/fr/web/svg/attribute/styling/index.md
@@ -3,26 +3,21 @@ title: Attributs SVG de style
 slug: Web/SVG/Attribute/Styling
 translation_of: Web/SVG/Attribute/Styling
 ---
-<p>Les <em>attributs SVG de style</em> sont tous les attributs qui peuvent être spécifiés sur tout élément SVG pour appliquer des styles CSS.</p>
+Les _attributs SVG de style_ sont tous les attributs qui peuvent être spécifiés sur tout élément SVG pour appliquer des styles CSS.
 
-<ul>
- <li><code>class</code></li>
- <li><code>style</code></li>
-</ul>
+- `class`
+- `style`
 
-<h2 id="Attributs">Attributs</h2>
+## Attributs
 
-<dl>
- <dt>{{SVGAttr('class')}}</dt>
- <dd>Assigne un nom de classe ou un ensemble de noms de classe à un élément. Il fonctionne de manière identique à l'attribut {{htmlattrxref('class')}} en HTML.<br>
- <small><em>Valeur</em>: Tout ID valide; <em>Animation</em>: <strong>Oui</strong></small></dd>
- <dt>{{SVGAttr('style')}}</dt>
- <dd>Spécifie les informations de style d'un élément. Il fonctionne de manière identique à l'attribut {{htmlattrxref('style')}} en HTML.<br>
- <small><em>Valeur</em>: Toute chaîne de caractères valide; <em>Animation</em>: <strong>Non</strong></small>
- <p> </p>
- </dd>
-</dl>
+- {{SVGAttr('class')}}
+  - : Assigne un nom de classe ou un ensemble de noms de classe à un élément. Il fonctionne de manière identique à l'attribut {{htmlattrxref('class')}} en HTML.
+    _Valeur_: Tout ID valide; _Animation_: **Oui**
+- {{SVGAttr('style')}}
+  - : Spécifie les informations de style d'un élément. Il fonctionne de manière identique à l'attribut {{htmlattrxref('style')}} en HTML.
+    _Valeur_: Toute chaîne de caractères valide; _Animation_: **Non**
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
 
-<p>{{Compat("svg.attributes.style")}}</p>
+## Compatibilité des navigateurs
+
+{{Compat("svg.attributes.style")}}
diff --git a/files/fr/web/svg/attribute/text-anchor/index.md b/files/fr/web/svg/attribute/text-anchor/index.md
index 449c87238f..f92806af36 100644
--- a/files/fr/web/svg/attribute/text-anchor/index.md
+++ b/files/fr/web/svg/attribute/text-anchor/index.md
@@ -7,57 +7,56 @@ tags:
 translation_of: Web/SVG/Attribute/text-anchor
 browser-compat: svg.attributes.presentation.text-anchor
 ---
-<div>{{SVGRef}}</div>
+{{SVGRef}}
 
-<p>L'attribut <strong><code>text-anchor</code></strong> est utilisé pour aligner (alignement de début, de milieu ou de fin) une chaîne de texte préformaté ou un texte auto-enveloppé dont la zone d'enveloppement est déterminée à partir de la propriété <a href="/fr/docs/Web/SVG/Attribute/inline-size"><code>inline-size</code></a> par rapport à un point donné. Elle ne s'applique pas aux autres types de texte auto-enveloppé. Pour ces cas, vous devez utiliser <a href="/fr/docs/Web/CSS/text-align"><code>text-align</code></a>. Pour le texte à plusieurs lignes, l'alignement a lieu pour chaque ligne.</p>
+L'attribut **`text-anchor`** est utilisé pour aligner (alignement de début, de milieu ou de fin) une chaîne de texte préformaté ou un texte auto-enveloppé dont la zone d'enveloppement est déterminée à partir de la propriété [`inline-size`](/fr/docs/Web/SVG/Attribute/inline-size) par rapport à un point donné. Elle ne s'applique pas aux autres types de texte auto-enveloppé. Pour ces cas, vous devez utiliser [`text-align`](/fr/docs/Web/CSS/text-align). Pour le texte à plusieurs lignes, l'alignement a lieu pour chaque ligne.
 
-<p>L'attribut <code>text-anchor</code> est appliqué à chaque bloc de texte individuel dans un élément <a href="/fr/docs/Web/SVG/Element/text"><code>&lt;text&gt;</code></a> donné. Chaque fragment de texte a une position de texte actuelle initiale, qui représente le point du système de coordonnées de l'utilisateur résultant (selon le contexte) de l'application des attributs <a href="/fr/docs/Web/SVG/Attribute/x"><code>x</code></a> et <a href="/fr/docs/Web/SVG/Attribute/y"><code>y</code></a> sur l'élément <code>&lt;text&gt;</code>, toute valeur d'attribut <code>x</code> ou <code>y</code> sur un élément <a href="/fr/docs/Web/SVG/Element/tspan"><code>&lt;tspan&gt;</code></a>, <a href="/fr/docs/Web/SVG/Element/tref"><code>&lt;tref&gt;</code></a> ou <a href="/fr/docs/Web/SVG/Element/altGlyph"><code>&lt;altGlyph&gt;</code></a> assigné explicitement au premier caractère rendu dans un fragment de texte, ou la détermination de la position initiale du texte actuel pour un élément <a href="/fr/docs/Web/SVG/Element/textPath"><code>&lt;textPath&gt;</code></a>.</p>
+L'attribut `text-anchor` est appliqué à chaque bloc de texte individuel dans un élément [`<text>`](/fr/docs/Web/SVG/Element/text) donné. Chaque fragment de texte a une position de texte actuelle initiale, qui représente le point du système de coordonnées de l'utilisateur résultant (selon le contexte) de l'application des attributs [`x`](/fr/docs/Web/SVG/Attribute/x) et [`y`](/fr/docs/Web/SVG/Attribute/y) sur l'élément `<text>`, toute valeur d'attribut `x` ou `y` sur un élément [`<tspan>`](/fr/docs/Web/SVG/Element/tspan), [`<tref>`](/fr/docs/Web/SVG/Element/tref) ou [`<altGlyph>`](/fr/docs/Web/SVG/Element/altGlyph) assigné explicitement au premier caractère rendu dans un fragment de texte, ou la détermination de la position initiale du texte actuel pour un élément [`<textPath>`](/fr/docs/Web/SVG/Element/textPath).
 
-<div class="note">
-  <p><strong>Note :</strong> En tant qu'attribut de présentation, <code>text-anchor</code> peut être utilisé comme une propriété CSS.</p>
-</div>
+> **Note :** En tant qu'attribut de présentation, `text-anchor` peut être utilisé comme une propriété CSS.
 
-<p>Cet attribut peut être utilisé pour les éléments SVG suivants :</p>
+Cet attribut peut être utilisé pour les éléments SVG suivants :
 
-<ul>
-  <li><a href="/fr/docs/Web/SVG/Element/altGlyph"><code>&lt;altGlyph&gt;</code></a></li>
-  <li><a href="/fr/docs/Web/SVG/Element/text"><code>&lt;text&gt;</code></a></li>
-  <li><a href="/fr/docs/Web/SVG/Element/textPath"><code>&lt;textPath&gt;</code></a></li>
-  <li><a href="/fr/docs/Web/SVG/Element/tref"><code>&lt;tref&gt;</code></a></li>
-  <li><a href="/fr/docs/Web/SVG/Element/tspan"><code>&lt;tspan&gt;</code></a></li>
-</ul>
+- [`<altGlyph>`](/fr/docs/Web/SVG/Element/altGlyph)
+- [`<text>`](/fr/docs/Web/SVG/Element/text)
+- [`<textPath>`](/fr/docs/Web/SVG/Element/textPath)
+- [`<tref>`](/fr/docs/Web/SVG/Element/tref)
+- [`<tspan>`](/fr/docs/Web/SVG/Element/tspan)
 
-<h2>Exemple</h2>
+## Exemple
 
-<pre class="brush: css hidden">html, body, svg {
+```css hidden
+html, body, svg {
   height: 100%;
-}</pre>
+}
+```
 
+```html
+<svg viewBox="0 0 120 120" xmlns="http://www.w3.org/2000/svg">
+  <!-- Matérialisation des ancrages -->
+  <path d="M60,15 L60,110 M30,40 L90,40 M30,75 L90,75 M30,110 L90,110" stroke="grey" />
 
-<pre class="brush: html">&lt;svg viewBox="0 0 120 120" xmlns="http://www.w3.org/2000/svg"&gt;
-  &lt;!-- Matérialisation des ancrages --&gt;
-  &lt;path d="M60,15 L60,110 M30,40 L90,40 M30,75 L90,75 M30,110 L90,110" stroke="grey" /&gt;
+  <!-- Ancres en action -->
+  <text text-anchor="start" x="60" y="40">A</text>
+  <text text-anchor="middle" x="60" y="75">A</text>
+  <text text-anchor="end" x="60" y="110">A</text>
 
-  &lt;!-- Ancres en action --&gt;
-  &lt;text text-anchor="start" x="60" y="40"&gt;A&lt;/text&gt;
-  &lt;text text-anchor="middle" x="60" y="75"&gt;A&lt;/text&gt;
-  &lt;text text-anchor="end" x="60" y="110"&gt;A&lt;/text&gt;
+  <!-- Matérialisation des ancrages -->
+  <circle cx="60" cy="40" r="3" fill="red" />
+  <circle cx="60" cy="75" r="3" fill="red" />
+  <circle cx="60" cy="110" r="3" fill="red" />
 
-  &lt;!-- Matérialisation des ancrages --&gt;
-  &lt;circle cx="60" cy="40" r="3" fill="red" /&gt;
-  &lt;circle cx="60" cy="75" r="3" fill="red" /&gt;
-  &lt;circle cx="60" cy="110" r="3" fill="red" /&gt;
-
-  &lt;style&gt;&lt;![CDATA[
+  <style><![CDATA[
   text {
     font: bold 36px Verdana, Helvetica, Arial, sans-serif;
   }
-  ]]&gt;&lt;/style&gt;
-&lt;/svg&gt;</pre>
+  ]]></style>
+</svg>
+```
 
-<p>{{EmbedLiveSample("exemple", "120", "120")}}</p>
+{{EmbedLiveSample("exemple", "120", "120")}}
 
-<h2 id="usage_notes">Notes d'utilisation</h2>
+## Notes d'utilisation
 
 <table class="properties">
   <tbody>
@@ -76,19 +75,17 @@ browser-compat: svg.attributes.presentation.text-anchor
   </tbody>
 </table>
 
-<dl>
-  <dt><code>start</code></dt>
-  <dd>Les caractères rendus sont alignés de telle sorte que le début de la chaîne de texte se trouve à la position initiale du texte courant. Pour un élément dont la valeur de propriété <a href="/fr/docs/Web/CSS/direction"><code>direction</code></a> est <code>ltr</code> (typique de la plupart des langues européennes), le côté gauche du texte est rendu à la position initiale du texte. Pour un élément dont la valeur de la propriété direction est <code>rtl</code> (typique de l'arabe et de l'hébreu), le côté droit du texte est rendu à la position initiale du texte. Pour un élément dont la direction du texte primaire est verticale (souvent typique des textes asiatiques), le côté supérieur du texte est rendu à la position initiale du texte.</dd>
-  <dt><code>middle</code></dt>
-  <dd>Les caractères rendus sont alignés de telle sorte que le milieu de la chaîne de texte se trouve à la position actuelle du texte. (Pour le texte sur un chemin, la chaîne de texte est d'abord disposée en ligne droite. Le point médian entre le début et la fin de la chaîne de texte est déterminé. Ensuite, la chaîne de texte est mappée sur le chemin avec ce point médian placé à la position actuelle du texte).</dd>
-  <dt><code>end</code></dt>
-  <dd>Les caractères rendus sont décalés de telle sorte que la fin du texte rendu résultant (position finale du texte actuel avant l'application de la propriété <code>text-anchor</code>) se trouve à la position initiale du texte actuel. Pour un élément avec une valeur de propriété <code>direction</code> égale à <code>ltr</code> (typique pour la plupart des langues européennes), le côté droit du texte est rendu à la position initiale du texte. Pour un élément avec une valeur de propriété <code>direction</code> égale à <code>rtl</code> (typique pour l'arabe et l'hébreu), le côté gauche du texte est rendu à la position initiale du texte. Pour un élément dont la direction primaire du texte est verticale (souvent typique des textes asiatiques), le bas du texte est rendu à la position initiale du texte.</dd>
-</dl>
+- `start`
+  - : Les caractères rendus sont alignés de telle sorte que le début de la chaîne de texte se trouve à la position initiale du texte courant. Pour un élément dont la valeur de propriété [`direction`](/fr/docs/Web/CSS/direction) est `ltr` (typique de la plupart des langues européennes), le côté gauche du texte est rendu à la position initiale du texte. Pour un élément dont la valeur de la propriété direction est `rtl` (typique de l'arabe et de l'hébreu), le côté droit du texte est rendu à la position initiale du texte. Pour un élément dont la direction du texte primaire est verticale (souvent typique des textes asiatiques), le côté supérieur du texte est rendu à la position initiale du texte.
+- `middle`
+  - : Les caractères rendus sont alignés de telle sorte que le milieu de la chaîne de texte se trouve à la position actuelle du texte. (Pour le texte sur un chemin, la chaîne de texte est d'abord disposée en ligne droite. Le point médian entre le début et la fin de la chaîne de texte est déterminé. Ensuite, la chaîne de texte est mappée sur le chemin avec ce point médian placé à la position actuelle du texte).
+- `end`
+  - : Les caractères rendus sont décalés de telle sorte que la fin du texte rendu résultant (position finale du texte actuel avant l'application de la propriété `text-anchor`) se trouve à la position initiale du texte actuel. Pour un élément avec une valeur de propriété `direction` égale à `ltr` (typique pour la plupart des langues européennes), le côté droit du texte est rendu à la position initiale du texte. Pour un élément avec une valeur de propriété `direction` égale à `rtl` (typique pour l'arabe et l'hébreu), le côté gauche du texte est rendu à la position initiale du texte. Pour un élément dont la direction primaire du texte est verticale (souvent typique des textes asiatiques), le bas du texte est rendu à la position initiale du texte.
 
-<h2 id="specifications">Spécifications</h2>
+## Spécifications
 
-<p>{{Specifications}}</p>
+{{Specifications}}
 
-<h2 id="browser_compatibility">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat}}</p>
+{{Compat}}
diff --git a/files/fr/web/svg/attribute/transform/index.md b/files/fr/web/svg/attribute/transform/index.md
index 9ed4c9cc25..59a858b588 100644
--- a/files/fr/web/svg/attribute/transform/index.md
+++ b/files/fr/web/svg/attribute/transform/index.md
@@ -6,78 +6,87 @@ tags:
   - SVG
 translation_of: Web/SVG/Attribute/transform
 ---
-<div>{{SVGRef}}</div>
+{{SVGRef}}
 
-<p>L'attribut <strong><code>transform</code></strong> définit une liste de définitions de transformation qui sont appliquées à l'élément ainsi qu'à ses éléments fils.</p>
+L'attribut **`transform`** définit une liste de définitions de transformation qui sont appliquées à l'élément ainsi qu'à ses éléments fils.
 
-<h2>Exemple</h2>
+## Exemple
 
-<pre class="brush: css hidden">html,body,svg { height:100% }</pre>
+```css hidden
+html,body,svg { height:100% }
+```
 
-<pre class="brush: html">&lt;svg viewBox="-40 0 150 100" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"&gt;
-  &lt;g fill="grey"
+```html
+<svg viewBox="-40 0 150 100" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+  <g fill="grey"
      transform="rotate(-10 50 100)
                 translate(-36 45.5)
                 skewX(40)
-                scale(1 0.5)"&gt;
-    &lt;path id="heart" d="M 10,30 A 20,20 0,0,1 50,30 A 20,20 0,0,1 90,30 Q 90,60 50,90 Q 10,60 10,30 z" /&gt;
-  &lt;/g&gt;
+                scale(1 0.5)">
+    <path id="heart" d="M 10,30 A 20,20 0,0,1 50,30 A 20,20 0,0,1 90,30 Q 90,60 50,90 Q 10,60 10,30 z" />
+  </g>
 
-  &lt;use xlink:href="#heart" fill="none" stroke="red"/&gt;
-&lt;/svg&gt;
-</pre>
+  <use xlink:href="#heart" fill="none" stroke="red"/>
+</svg>
+```
 
-<p>{{EmbedLiveSample('exemple', '100%', 200)}}</p>
+{{EmbedLiveSample('exemple', '100%', 200)}}
 
-<div class="note">
-  <p><strong>Note :</strong> Pour SVG2, <code>transform</code> est un attribut de présentation et peut donc être utilisé comme une propriété CSS. Attention toutefois aux différences de syntaxe entre la propriété CSS et cet attribut. Voir la documentation de la propriété {{cssxref('transform')}} pour la syntaxe .</p>
-</div>
+> **Note :** Pour SVG2, `transform` est un attribut de présentation et peut donc être utilisé comme une propriété CSS. Attention toutefois aux différences de syntaxe entre la propriété CSS et cet attribut. Voir la documentation de la propriété {{cssxref('transform')}} pour la syntaxe .
 
-<p>En tant qu'attribut de présentation, <strong><code>transform</code></strong> peut être utilisé par n'importe quel élément (en SVG 1.1, seuls les 16 éléments suivants pouvaient l'utiliser : {{SVGElement('a')}}, {{SVGElement('circle')}}, {{SVGElement('clipPath')}}, {{SVGElement('defs')}}, {{SVGElement('ellipse')}}, {{SVGElement('foreignObject')}}, {{SVGElement('g')}}, {{SVGElement('image')}}, {{SVGElement('line')}}, {{SVGElement('path')}}, {{SVGElement('polygon')}}, {{SVGElement('polyline')}}, {{SVGElement('rect')}}, {{SVGElement('switch')}}, {{SVGElement('text')}} et {{SVGElement('use')}}).</p>
+En tant qu'attribut de présentation, **`transform`** peut être utilisé par n'importe quel élément (en SVG 1.1, seuls les 16 éléments suivants pouvaient l'utiliser : {{SVGElement('a')}}, {{SVGElement('circle')}}, {{SVGElement('clipPath')}}, {{SVGElement('defs')}}, {{SVGElement('ellipse')}}, {{SVGElement('foreignObject')}}, {{SVGElement('g')}}, {{SVGElement('image')}}, {{SVGElement('line')}}, {{SVGElement('path')}}, {{SVGElement('polygon')}}, {{SVGElement('polyline')}}, {{SVGElement('rect')}}, {{SVGElement('switch')}}, {{SVGElement('text')}} et {{SVGElement('use')}}).
 
-<p>Pour des raisons historiques liées à SVG 1.1, {{SVGElement('linearGradient')}} et {{SVGElement('radialGradient')}} prennent en charge l'attribut <code>gradientTransform</code> et {{SVGElement('pattern')}} permet d'utiliser <code>patternTransform</code>. Ces deux attributs sont exactement synonymes de l'attribut <code>transform</code>.</p>
+Pour des raisons historiques liées à SVG 1.1, {{SVGElement('linearGradient')}} et {{SVGElement('radialGradient')}} prennent en charge l'attribut `gradientTransform` et {{SVGElement('pattern')}} permet d'utiliser `patternTransform`. Ces deux attributs sont exactement synonymes de l'attribut `transform`.
 
 <table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="row">Valeur</th>
-   <td><code><strong><a href="/fr/docs/Web/SVG/Content_type#Transform-list">&lt;transform-list&gt;</a></strong></code></td>
-  </tr>
-  <tr>
-   <th scope="row">Valeur par défaut</th>
-   <td><code>none</code></td>
-  </tr>
-  <tr>
-   <th scope="row">Peut être animé</th>
-   <td>Oui</td>
-  </tr>
- </tbody>
+  <tbody>
+    <tr>
+      <th scope="row">Valeur</th>
+      <td>
+        <code
+          ><strong
+            ><a href="/fr/docs/Web/SVG/Content_type#Transform-list"
+              >&#x3C;transform-list></a
+            ></strong
+          ></code
+        >
+      </td>
+    </tr>
+    <tr>
+      <th scope="row">Valeur par défaut</th>
+      <td><code>none</code></td>
+    </tr>
+    <tr>
+      <th scope="row">Peut être animé</th>
+      <td>Oui</td>
+    </tr>
+  </tbody>
 </table>
 
-<h2 id="Fonctions_de_transformation">Fonctions de transformation</h2>
+## Fonctions de transformation
 
-<p>Les fonctions de transformation suivantes peuvent être utilisées par l'attribut <code>transform</code>.</p>
+Les fonctions de transformation suivantes peuvent être utilisées par l'attribut `transform`.
 
-<div class="warning">
-  <p><strong>Attention :</strong> Selon la spécification, on devrait également pouvoit utiliser les fonctions CSS {{cssxref('transform-function', 'transform functions')}} mais la compatibilité n'est pas assurée.</p>
-</div>
+> **Attention :** Selon la spécification, on devrait également pouvoit utiliser les fonctions CSS {{cssxref('transform-function', 'transform functions')}} mais la compatibilité n'est pas assurée.
 
-<h3 id="matrix"><code>matrix()</code></h3>
+### `matrix()`
 
-<p>La fonction de transformation <code>matrix(&lt;a&gt; &lt;b&gt; &lt;c&gt; &lt;d&gt; &lt;e&gt; &lt;f&gt;)</code> permet d'appliquer une transformation géométrique décrite par 6 coefficients et <code>matrix(a,b,c,d,e,f)</code> sera équivalent à la matrice de transformation mathématique :<math display="block"><semantics><mrow><mo>(</mo><mtable 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">\begin{pmatrix} a &amp; c &amp; e \\ b &amp; d &amp; f \\ 0 &amp; 0 &amp; 1 \end{pmatrix}</annotation></semantics></math>Le calcul des coordonnées s'obtient de la façon suivante :<math display="block"><semantics><mrow><mrow><mo>(</mo><mtable rowspacing="0.5ex"><mtr><mtd><msub><mi>x</mi><mstyle mathvariant="normal"><mrow><mi>n</mi><mi>e</mi><mi>w</mi><mi>C</mi><mi>o</mi><mi>o</mi><mi>r</mi><mi>d</mi><mi>S</mi><mi>y</mi><mi>s</mi></mrow></mstyle></msub></mtd></mtr><mtr><mtd><msub><mi>y</mi><mstyle mathvariant="normal"><mrow><mi>n</mi><mi>e</mi><mi>w</mi><mi>C</mi><mi>o</mi><mi>o</mi><mi>r</mi><mi>d</mi><mi>S</mi><mi>y</mi><mi>s</mi></mrow></mstyle></msub></mtd></mtr><mtr><mtd><mn>1</mn></mtd></mtr></mtable><mo>)</mo></mrow><mo>=</mo><mrow><mo>(</mo><mtable 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><mrow><mo>(</mo><mtable rowspacing="0.5ex"><mtr><mtd><msub><mi>x</mi><mstyle mathvariant="normal"><mrow><mi>p</mi><mi>r</mi><mi>e</mi><mi>v</mi><mi>C</mi><mi>o</mi><mi>o</mi><mi>r</mi><mi>d</mi><mi>S</mi><mi>y</mi><mi>s</mi></mrow></mstyle></msub></mtd></mtr><mtr><mtd><msub><mi>y</mi><mstyle mathvariant="normal"><mrow><mi>p</mi><mi>r</mi><mi>e</mi><mi>v</mi><mi>C</mi><mi>o</mi><mi>o</mi><mi>r</mi><mi>d</mi><mi>S</mi><mi>y</mi><mi>s</mi></mrow></mstyle></msub></mtd></mtr><mtr><mtd><mn>1</mn></mtd></mtr></mtable><mo>)</mo></mrow><mo>=</mo><mrow><mo>(</mo><mtable rowspacing="0.5ex"><mtr><mtd><mi>a</mi><msub><mi>x</mi><mstyle mathvariant="normal"><mrow><mi>p</mi><mi>r</mi><mi>e</mi><mi>v</mi><mi>C</mi><mi>o</mi><mi>o</mi><mi>r</mi><mi>d</mi><mi>S</mi><mi>y</mi><mi>s</mi></mrow></mstyle></msub><mo>+</mo><mi>c</mi><msub><mi>y</mi><mstyle mathvariant="normal"><mrow><mi>p</mi><mi>r</mi><mi>e</mi><mi>v</mi><mi>C</mi><mi>o</mi><mi>o</mi><mi>r</mi><mi>d</mi><mi>S</mi><mi>y</mi><mi>s</mi></mrow></mstyle></msub><mo>+</mo><mi>e</mi></mtd></mtr><mtr><mtd><mi>b</mi><msub><mi>x</mi><mstyle mathvariant="normal"><mrow><mi>p</mi><mi>r</mi><mi>e</mi><mi>v</mi><mi>C</mi><mi>o</mi><mi>o</mi><mi>r</mi><mi>d</mi><mi>S</mi><mi>y</mi><mi>s</mi></mrow></mstyle></msub><mo>+</mo><mi>d</mi><msub><mi>y</mi><mstyle mathvariant="normal"><mrow><mi>p</mi><mi>r</mi><mi>e</mi><mi>v</mi><mi>C</mi><mi>o</mi><mi>o</mi><mi>r</mi><mi>d</mi><mi>S</mi><mi>y</mi><mi>s</mi></mrow></mstyle></msub><mo>+</mo><mi>f</mi></mtd></mtr><mtr><mtd><mn>1</mn></mtd></mtr></mtable><mo>)</mo></mrow></mrow><annotation encoding="TeX"> \begin{pmatrix} x_{\mathrm{newCoordSys}} \\ y_{\mathrm{newCoordSys}} \\ 1 \end{pmatrix} = \begin{pmatrix} a &amp; c &amp; e \\ b &amp; d &amp; f \\ 0 &amp; 0 &amp; 1 \end{pmatrix} \begin{pmatrix} x_{\mathrm{prevCoordSys}} \\ y_{\mathrm{prevCoordSys}} \\ 1 \end{pmatrix} = \begin{pmatrix} a x_{\mathrm{prevCoordSys}} + c y_{\mathrm{prevCoordSys}} + e \\ b x_{\mathrm{prevCoordSys}} + d y_{\mathrm{prevCoordSys}} + f \\ 1 \end{pmatrix} </annotation></semantics></math></p>
+La fonction de transformation `matrix(<a> <b> <c> <d> <e> <f>)` permet d'appliquer une transformation géométrique décrite par 6 coefficients et `matrix(a,b,c,d,e,f)` sera équivalent à la matrice de transformation mathématique :<math display="block"><semantics><mrow><mo>(</mo><mtable 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">\begin{pmatrix} a &#x26; c &#x26; e \\ b &#x26; d &#x26; f \\ 0 &#x26; 0 &#x26; 1 \end{pmatrix}</annotation></semantics></math>Le calcul des coordonnées s'obtient de la façon suivante :<math display="block"><semantics><mrow><mrow><mo>(</mo><mtable rowspacing="0.5ex"><mtr><mtd><msub><mi>x</mi><mstyle mathvariant="normal"><mrow><mi>n</mi><mi>e</mi><mi>w</mi><mi>C</mi><mi>o</mi><mi>o</mi><mi>r</mi><mi>d</mi><mi>S</mi><mi>y</mi><mi>s</mi></mrow></mstyle></msub></mtd></mtr><mtr><mtd><msub><mi>y</mi><mstyle mathvariant="normal"><mrow><mi>n</mi><mi>e</mi><mi>w</mi><mi>C</mi><mi>o</mi><mi>o</mi><mi>r</mi><mi>d</mi><mi>S</mi><mi>y</mi><mi>s</mi></mrow></mstyle></msub></mtd></mtr><mtr><mtd><mn>1</mn></mtd></mtr></mtable><mo>)</mo></mrow><mo>=</mo><mrow><mo>(</mo><mtable 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><mrow><mo>(</mo><mtable rowspacing="0.5ex"><mtr><mtd><msub><mi>x</mi><mstyle mathvariant="normal"><mrow><mi>p</mi><mi>r</mi><mi>e</mi><mi>v</mi><mi>C</mi><mi>o</mi><mi>o</mi><mi>r</mi><mi>d</mi><mi>S</mi><mi>y</mi><mi>s</mi></mrow></mstyle></msub></mtd></mtr><mtr><mtd><msub><mi>y</mi><mstyle mathvariant="normal"><mrow><mi>p</mi><mi>r</mi><mi>e</mi><mi>v</mi><mi>C</mi><mi>o</mi><mi>o</mi><mi>r</mi><mi>d</mi><mi>S</mi><mi>y</mi><mi>s</mi></mrow></mstyle></msub></mtd></mtr><mtr><mtd><mn>1</mn></mtd></mtr></mtable><mo>)</mo></mrow><mo>=</mo><mrow><mo>(</mo><mtable rowspacing="0.5ex"><mtr><mtd><mi>a</mi><msub><mi>x</mi><mstyle mathvariant="normal"><mrow><mi>p</mi><mi>r</mi><mi>e</mi><mi>v</mi><mi>C</mi><mi>o</mi><mi>o</mi><mi>r</mi><mi>d</mi><mi>S</mi><mi>y</mi><mi>s</mi></mrow></mstyle></msub><mo>+</mo><mi>c</mi><msub><mi>y</mi><mstyle mathvariant="normal"><mrow><mi>p</mi><mi>r</mi><mi>e</mi><mi>v</mi><mi>C</mi><mi>o</mi><mi>o</mi><mi>r</mi><mi>d</mi><mi>S</mi><mi>y</mi><mi>s</mi></mrow></mstyle></msub><mo>+</mo><mi>e</mi></mtd></mtr><mtr><mtd><mi>b</mi><msub><mi>x</mi><mstyle mathvariant="normal"><mrow><mi>p</mi><mi>r</mi><mi>e</mi><mi>v</mi><mi>C</mi><mi>o</mi><mi>o</mi><mi>r</mi><mi>d</mi><mi>S</mi><mi>y</mi><mi>s</mi></mrow></mstyle></msub><mo>+</mo><mi>d</mi><msub><mi>y</mi><mstyle mathvariant="normal"><mrow><mi>p</mi><mi>r</mi><mi>e</mi><mi>v</mi><mi>C</mi><mi>o</mi><mi>o</mi><mi>r</mi><mi>d</mi><mi>S</mi><mi>y</mi><mi>s</mi></mrow></mstyle></msub><mo>+</mo><mi>f</mi></mtd></mtr><mtr><mtd><mn>1</mn></mtd></mtr></mtable><mo>)</mo></mrow></mrow><annotation encoding="TeX"> \begin{pmatrix} x*{\mathrm{newCoordSys}} \\ y*{\mathrm{newCoordSys}} \\ 1 \end{pmatrix} = \begin{pmatrix} a &#x26; c &#x26; e \\ b &#x26; d &#x26; f \\ 0 &#x26; 0 &#x26; 1 \end{pmatrix} \begin{pmatrix} x*{\mathrm{prevCoordSys}} \\ y*{\mathrm{prevCoordSys}} \\ 1 \end{pmatrix} = \begin{pmatrix} a x*{\mathrm{prevCoordSys}} + c y*{\mathrm{prevCoordSys}} + e \\ b x*{\mathrm{prevCoordSys}} + d y*{\mathrm{prevCoordSys}} + f \\ 1 \end{pmatrix}</annotation></semantics></math>
 
-<h4 id="Exemples">Exemples</h4>
+#### Exemples
 
-<pre class="brush: css hidden">html,body,svg { height:100% }
-</pre>
+```css hidden
+html,body,svg { height:100% }
+```
 
-<pre class="brush: html">&lt;svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg"&gt;
-  &lt;rect x="10" y="10" width="30" height="20" fill="green" /&gt;
+```html
+<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
+  <rect x="10" y="10" width="30" height="20" fill="green" />
 
-  &lt;!--
+  <!--
   Dans l'exemple suivant, on applique la matrice suivante:
   [a c e]    [3 -1 30]
-  [b d f] =&gt; [1  3 40]
+  [b d f] => [1  3 40]
   [0 0 1]    [0  0  1]
 
   qui transforme le rectangle de cette façon:
@@ -97,158 +106,149 @@ translation_of: Web/SVG/Attribute/transform
   bottom right corner: oldX=40 oldY=30
   newX = a * oldX + c * oldY + e = 3 * 40 - 1 * 30 + 30 = 120
   newY = b * oldX + d * oldY + f = 1 * 40 + 3 * 30 + 40 = 170
-  --&gt;
-  &lt;rect x="10" y="10" width="30" height="20" fill="red"
-        transform="matrix(3 1 -1 3 30 40)" /&gt;
-&lt;/svg&gt;</pre>
+  -->
+  <rect x="10" y="10" width="30" height="20" fill="red"
+        transform="matrix(3 1 -1 3 30 40)" />
+</svg>
+```
 
-<p>{{EmbedLiveSample('matrix()', '100%', 200)}}</p>
+{{EmbedLiveSample('matrix()', '100%', 200)}}
 
-<h3 id="translate"><code>translate()</code></h3>
+### `translate()`
 
-<p>La fonction de transformation <code>translate(&lt;x&gt; [&lt;y&gt;])</code> permet de déplacer un objet de <code>x</code> sur l'axe horizontal et de <code>y</code> sur l'axe vertical (i.e. <code>x<sub>new</sub> = x<sub>old</sub> + &lt;x&gt;, y<sub>new</sub> = y<sub>old</sub> + &lt;y&gt;</code>). Si <code>y</code> n'est pas fourni, la valeur par défaut est 0.</p>
+La fonction de transformation `translate(<x> [<y>])` permet de déplacer un objet de `x` sur l'axe horizontal et de `y` sur l'axe vertical (i.e. `xnew = xold + <x>, ynew = yold + <y>`). Si `y` n'est pas fourni, la valeur par défaut est 0.
 
-<h4 id="Exemples_2">Exemples</h4>
+#### Exemples
 
-<pre class="brush: css hidden">html,body,svg { height:100% }
-</pre>
+```css hidden
+html,body,svg { height:100% }
+```
 
-<pre class="brush: html">&lt;svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"&gt;
-  &lt;!-- Pas de translation --&gt;
-  &lt;rect x="5" y="5" width="40" height="40" fill="green" /&gt;
+```html
+<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
+  <!-- Pas de translation -->
+  <rect x="5" y="5" width="40" height="40" fill="green" />
 
-  &lt;!-- Translation horizontale --&gt;
-  &lt;rect x="5" y="5" width="40" height="40" fill="blue"
-        transform="translate(50)" /&gt;
+  <!-- Translation horizontale -->
+  <rect x="5" y="5" width="40" height="40" fill="blue"
+        transform="translate(50)" />
 
-  &lt;!-- Translation verticale --&gt;
-  &lt;rect x="5" y="5" width="40" height="40" fill="red"
-        transform="translate(0 50)" /&gt;
+  <!-- Translation verticale -->
+  <rect x="5" y="5" width="40" height="40" fill="red"
+        transform="translate(0 50)" />
 
-  &lt;!-- Translation horizontale et verticale --&gt;
-  &lt;rect x="5" y="5" width="40" height="40" fill="yellow"
-         transform="translate(50,50)" /&gt;
-&lt;/svg&gt;</pre>
+  <!-- Translation horizontale et verticale -->
+  <rect x="5" y="5" width="40" height="40" fill="yellow"
+         transform="translate(50,50)" />
+</svg>
+```
 
-<p>{{EmbedLiveSample('translate()', '100%', 200)}}</p>
+{{EmbedLiveSample('translate()', '100%', 200)}}
 
-<h3 id="scale"><code>scale()</code></h3>
+### `scale()`
 
-<p>La fonction de transformation <code>scale(&lt;x&gt; [&lt;y&gt;])</code> définit une homothétie d'un facteur <code>x</code> en horizontal et d'un facteur <code>y</code> en vertical. Si la valeur <code>y</code> n'est pas fournie, on considère qu'elle est égale à <code>x</code>.</p>
+La fonction de transformation `scale(<x> [<y>])` définit une homothétie d'un facteur `x` en horizontal et d'un facteur `y` en vertical. Si la valeur `y` n'est pas fournie, on considère qu'elle est égale à `x`.
 
-<h4 id="Exemples_3">Exemples</h4>
+#### Exemples
 
-<pre class="brush: css hidden">html,body,svg { height:100% }
-</pre>
+```css hidden
+html,body,svg { height:100% }
+```
 
-<pre class="brush: html">&lt;svg viewBox="-50 -50 100 100" xmlns="http://www.w3.org/2000/svg"&gt;
-  &lt;!-- uniform scale --&gt;
-  &lt;circle cx="0" cy="0" r="10" fill="red"
-          transform="scale(4)" /&gt;
+```html
+<svg viewBox="-50 -50 100 100" xmlns="http://www.w3.org/2000/svg">
+  <!-- uniform scale -->
+  <circle cx="0" cy="0" r="10" fill="red"
+          transform="scale(4)" />
 
-  &lt;!-- vertical scale --&gt;
-  &lt;circle cx="0" cy="0" r="10" fill="yellow"
-          transform="scale(1,4)" /&gt;
+  <!-- vertical scale -->
+  <circle cx="0" cy="0" r="10" fill="yellow"
+          transform="scale(1,4)" />
 
-  &lt;!-- horizontal scale --&gt;
-  &lt;circle cx="0" cy="0" r="10" fill="pink"
-          transform="scale(4,1)" /&gt;
+  <!-- horizontal scale -->
+  <circle cx="0" cy="0" r="10" fill="pink"
+          transform="scale(4,1)" />
 
-  &lt;!-- No scale --&gt;
-  &lt;circle cx="0" cy="0" r="10" fill="black" /&gt;
-&lt;/svg&gt;</pre>
+  <!-- No scale -->
+  <circle cx="0" cy="0" r="10" fill="black" />
+</svg>
+```
 
-<p>{{EmbedLiveSample('scale()', '100%', 200)}}</p>
+{{EmbedLiveSample('scale()', '100%', 200)}}
 
-<h3 id="rotate"><code>rotate()</code></h3>
+### `rotate()`
 
-<p>La fonction de transformation <code>rotate(&lt;a&gt; [&lt;x&gt; &lt;y&gt;])</code> définit une rotation de <code>a</code> degrés autour d'un point de coordonnées <code>x</code> et <code>y</code>. Si les paramètres optionnels <code>x</code> et <code>y</code> ne sont pas fournis, la rotation est effectuée autour de l'origine dans le système de coordonnés actuel.</p>
+La fonction de transformation `rotate(<a> [<x> <y>])` définit une rotation de `a` degrés autour d'un point de coordonnées `x` et `y`. Si les paramètres optionnels `x` et `y` ne sont pas fournis, la rotation est effectuée autour de l'origine dans le système de coordonnés actuel.
 
-<h4 id="Exemples_4">Exemples</h4>
+#### Exemples
 
-<pre class="brush: css hidden">html,body,svg { height:100% }
-</pre>
+```css hidden
+html,body,svg { height:100% }
+```
 
-<pre class="brush: html">&lt;svg viewBox="-12 -2 34 14" xmlns="http://www.w3.org/2000/svg"&gt;
-  &lt;rect x="0" y="0" width="10" height="10" /&gt;
+```html
+<svg viewBox="-12 -2 34 14" xmlns="http://www.w3.org/2000/svg">
+  <rect x="0" y="0" width="10" height="10" />
 
-  &lt;!-- rotation is done around the point 0,0 --&gt;
-  &lt;rect x="0" y="0" width="10" height="10" fill="red"
-        transform="rotate(100)" /&gt;
+  <!-- rotation is done around the point 0,0 -->
+  <rect x="0" y="0" width="10" height="10" fill="red"
+        transform="rotate(100)" />
 
-  &lt;!-- rotation is done around the point 10,10 --&gt;
-  &lt;rect x="0" y="0" width="10" height="10" fill="green"
-        transform="rotate(100,10,10)" /&gt;
-&lt;/svg&gt;</pre>
+  <!-- rotation is done around the point 10,10 -->
+  <rect x="0" y="0" width="10" height="10" fill="green"
+        transform="rotate(100,10,10)" />
+</svg>
+```
 
-<p>{{EmbedLiveSample('rotate()', '100%', 200)}}</p>
+{{EmbedLiveSample('rotate()', '100%', 200)}}
 
-<h3 id="skewX"><code>skewX()</code></h3>
+### `skewX()`
 
-<p>La fonction de transformation <code>skewX(&lt;a&gt;)</code> définit une distorsion horizontale de <code>a</code> degrés.</p>
+La fonction de transformation `skewX(<a>)` définit une distorsion horizontale de `a` degrés.
 
-<h4 id="Exemples_5">Exemples</h4>
+#### Exemples
 
-<pre class="brush: css hidden">html,body,svg { height:100% }
-</pre>
+```css hidden
+html,body,svg { height:100% }
+```
 
-<pre class="brush: html">&lt;svg viewBox="-5 -5 10 10" xmlns="http://www.w3.org/2000/svg"&gt;
-  &lt;rect x="-3" y="-3" width="6" height="6" /&gt;
+```html
+<svg viewBox="-5 -5 10 10" xmlns="http://www.w3.org/2000/svg">
+  <rect x="-3" y="-3" width="6" height="6" />
 
-  &lt;rect x="-3" y="-3" width="6" height="6" fill="red"
-        transform="skewX(30)" /&gt;
-&lt;/svg&gt;</pre>
+  <rect x="-3" y="-3" width="6" height="6" fill="red"
+        transform="skewX(30)" />
+</svg>
+```
 
-<p>{{EmbedLiveSample('skewX()', '100%', 200)}}</p>
+{{EmbedLiveSample('skewX()', '100%', 200)}}
 
-<h3 id="skewY"><code>skewY()</code></h3>
+### `skewY()`
 
-<p>La fonction de transformation <code>skewY(&lt;a&gt;)</code> définit une distorsion verticale de <code>a</code> degrés.</p>
+La fonction de transformation `skewY(<a>)` définit une distorsion verticale de `a` degrés.
 
-<h4 id="Exemples_6">Exemples</h4>
+#### Exemples
 
-<pre class="brush: css hidden">html,body,svg { height:100% }
-</pre>
+```css hidden
+html,body,svg { height:100% }
+```
 
-<pre class="brush: html">&lt;svg viewBox="-5 -5 10 10" xmlns="http://www.w3.org/2000/svg"&gt;
-  &lt;rect x="-3" y="-3" width="6" height="6" /&gt;
+```html
+<svg viewBox="-5 -5 10 10" xmlns="http://www.w3.org/2000/svg">
+  <rect x="-3" y="-3" width="6" height="6" />
 
-  &lt;rect x="-3" y="-3" width="6" height="6" fill="red"
-        transform="skewY(30)" /&gt;
-&lt;/svg&gt;</pre>
+  <rect x="-3" y="-3" width="6" height="6" fill="red"
+        transform="skewY(30)" />
+</svg>
+```
 
-<p>{{EmbedLiveSample('skewY()', '100%', 200)}}</p>
+{{EmbedLiveSample('skewY()', '100%', 200)}}
 
-<h2 id="Spécifications">Spécifications</h2>
+## Spécifications
 
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('CSS Transforms 2', '#svg-transform', 'transform')}}</td>
-   <td>{{Spec2('CSS Transforms 2')}}</td>
-   <td></td>
-  </tr>
-  <tr>
-   <td>{{SpecName('CSS3 Transforms', '#svg-transform', 'transform')}}</td>
-   <td>{{Spec2('CSS3 Transforms')}}</td>
-   <td></td>
-  </tr>
-  <tr>
-   <td>{{SpecName("SVG2", "coords.html#TransformProperty", "transform")}}</td>
-   <td>{{Spec2("SVG2")}}</td>
-   <td></td>
-  </tr>
-  <tr>
-   <td>{{SpecName("SVG1.1", "coords.html#TransformAttribute", "transform")}}</td>
-   <td>{{Spec2("SVG1.1")}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                                                                | État                                     | Commentaires         |
+| -------------------------------------------------------------------------------------------- | ---------------------------------------- | -------------------- |
+| {{SpecName('CSS Transforms 2', '#svg-transform', 'transform')}}         | {{Spec2('CSS Transforms 2')}} |                      |
+| {{SpecName('CSS3 Transforms', '#svg-transform', 'transform')}}         | {{Spec2('CSS3 Transforms')}}     |                      |
+| {{SpecName("SVG2", "coords.html#TransformProperty", "transform")}}     | {{Spec2("SVG2")}}                 |                      |
+| {{SpecName("SVG1.1", "coords.html#TransformAttribute", "transform")}} | {{Spec2("SVG1.1")}}                 | Définition initiale. |
diff --git a/files/fr/web/svg/attribute/viewbox/index.md b/files/fr/web/svg/attribute/viewbox/index.md
index d8133f9c84..2ade5dcb69 100644
--- a/files/fr/web/svg/attribute/viewbox/index.md
+++ b/files/fr/web/svg/attribute/viewbox/index.md
@@ -6,62 +6,62 @@ tags:
   - SVG
 translation_of: Web/SVG/Attribute/viewBox
 ---
-<p>« <a href="/fr/SVG/Attribute">Sommaire de la référence des attributs SVG</a></p>
+« [Sommaire de la référence des attributs SVG](/fr/SVG/Attribute)
 
-<p>L'attribut <code>viewBox</code> permet de spécifier qu'un groupe d'éléments graphiques s'étire afin de s'adapter à un élément conteneur.</p>
+L'attribut `viewBox` permet de spécifier qu'un groupe d'éléments graphiques s'étire afin de s'adapter à un élément conteneur.
 
-<p>La valeur de l'attribut <code>viewBox</code> est une liste de quatre nombres <code>min-x</code>, <code>min-y</code>, <code>width</code> et <code>height</code>, séparés par des espaces ou/et des virgules. Ces nombres spécifient un rectangle dans l'espace utilisateur, qui doit correspondre aux coins du viewport établis par l'élément SVG donné, ceci en prenant en compte l'attribut {{ SVGAttr("preserveAspectRatio") }}.</p>
+La valeur de l'attribut `viewBox` est une liste de quatre nombres `min-x`, `min-y`, `width` et `height`, séparés par des espaces ou/et des virgules. Ces nombres spécifient un rectangle dans l'espace utilisateur, qui doit correspondre aux coins du viewport établis par l'élément SVG donné, ceci en prenant en compte l'attribut {{ SVGAttr("preserveAspectRatio") }}.
 
-<p>Les valeurs négatives de <code>width</code> et <code>height</code> ne sont pas autorisées et une valeur à zéro désactive le rendu de l'élément.</p>
+Les valeurs négatives de `width` et `height` ne sont pas autorisées et une valeur à zéro désactive le rendu de l'élément.
 
-<h2 id="Contexte_d'utilisation">Contexte d'utilisation</h2>
+## Contexte d'utilisation
 
 <table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="row">Catégories</th>
-   <td>Aucune</td>
-  </tr>
-  <tr>
-   <th scope="row">Valeur</th>
-   <td><em>Voir ci-dessus</em></td>
-  </tr>
-  <tr>
-   <th scope="row">Animable</th>
-   <td>Oui</td>
-  </tr>
-  <tr>
-   <th scope="row">Document de norme</th>
-   <td><a href="http://www.w3.org/TR/SVG11/coords.html#ViewBoxAttribute">SVG 1.1 (2nd Edition)</a></td>
-  </tr>
- </tbody>
+  <tbody>
+    <tr>
+      <th scope="row">Catégories</th>
+      <td>Aucune</td>
+    </tr>
+    <tr>
+      <th scope="row">Valeur</th>
+      <td><em>Voir ci-dessus</em></td>
+    </tr>
+    <tr>
+      <th scope="row">Animable</th>
+      <td>Oui</td>
+    </tr>
+    <tr>
+      <th scope="row">Document de norme</th>
+      <td>
+        <a href="http://www.w3.org/TR/SVG11/coords.html#ViewBoxAttribute"
+          >SVG 1.1 (2nd Edition)</a
+        >
+      </td>
+    </tr>
+  </tbody>
 </table>
 
-<h2 id="Exemple">Exemple</h2>
+## Exemple
 
-<p>Nous créons ici un viewport de 300×200 unités, ce qui fait que chaque unité de l'élément SVG correspondra à une unité du viewport. On aura donc un élément SVG dont le système de coordonnée ira de 0 à 300 en largeur et de 0 à 200 en hauteur :</p>
+Nous créons ici un viewport de 300×200 unités, ce qui fait que chaque unité de l'élément SVG correspondra à une unité du viewport. On aura donc un élément SVG dont le système de coordonnée ira de 0 à 300 en largeur et de 0 à 200 en hauteur :
 
-<p><code>&lt;svg width="300" height="200"&gt;&lt;/svg&gt;</code></p>
+`<svg width="300" height="200"></svg>`
 
-<p>En ajoutant une notion de viewbox, nous transformons ce système de coordonnées afin qu'il aille de 0 à w à l'horizontale et de 0 à h à la verticale. Ici, ce sera donc 300/30 (=10) en x ce qui équivaut à 10 unités d'élément SVG pour 1 unité du viewport :</p>
+En ajoutant une notion de viewbox, nous transformons ce système de coordonnées afin qu'il aille de 0 à w à l'horizontale et de 0 à h à la verticale. Ici, ce sera donc 300/30 (=10) en x ce qui équivaut à 10 unités d'élément SVG pour 1 unité du viewport :
 
-<p><code>&lt;svg width="300" height="200" viewBox="0 0 30 20"&gt;&lt;/svg&gt;</code></p>
+`<svg width="300" height="200" viewBox="0 0 30 20"></svg>`
 
-<h2 id="Elements">Elements</h2>
+## Elements
 
-<p>Les éléments suivants peuvent utiliser l'attribut <code>viewBox</code></p>
+Les éléments suivants peuvent utiliser l'attribut `viewBox`
 
-<ul>
- <li>{{ SVGElement("svg") }}</li>
- <li>{{ SVGElement("symbol") }}</li>
- <li>{{ SVGElement("image") }}</li>
- <li>{{ SVGElement("marker") }}</li>
- <li>{{ SVGElement("pattern") }}</li>
- <li>{{ SVGElement("view") }}</li>
-</ul>
+- {{ SVGElement("svg") }}
+- {{ SVGElement("symbol") }}
+- {{ SVGElement("image") }}
+- {{ SVGElement("marker") }}
+- {{ SVGElement("pattern") }}
+- {{ SVGElement("view") }}
 
-<h2 id="Voir_également">Voir également</h2>
+## Voir également
 
-<ul>
- <li><a href="/fr/SVG/Tutoriel/Positionnement">Introduction au SVG : Positionnement</a></li>
-</ul>
+- [Introduction au SVG : Positionnement](/fr/SVG/Tutoriel/Positionnement)
diff --git a/files/fr/web/svg/attribute/width/index.md b/files/fr/web/svg/attribute/width/index.md
index bc98142691..f86b517005 100644
--- a/files/fr/web/svg/attribute/width/index.md
+++ b/files/fr/web/svg/attribute/width/index.md
@@ -3,66 +3,91 @@ title: Width
 slug: Web/SVG/Attribute/width
 translation_of: Web/SVG/Attribute/width
 ---
-<p>« <a href="/fr/SVG/Attribute" title="en/SVG/Attribute">SVG Attribute reference home</a></p>
+« [SVG Attribute reference home](/fr/SVG/Attribute "en/SVG/Attribute")
 
-<p>Cet attribut indique une dimension horizontale <code>&lt;length&gt;</code> dans le système de coordonnées. La donnée (ou coordonnée) définie par cet attribut dépend de l'élément sur lequel il est appliqué. La plupart du temps, il représente la largeur de la région rectangulaire composant l'élément (voir les exceptions dans la documentation pour chaque type d'élément).</p>
+Cet attribut indique une dimension horizontale `<length>` dans le système de coordonnées. La donnée (ou coordonnée) définie par cet attribut dépend de l'élément sur lequel il est appliqué. La plupart du temps, il représente la largeur de la région rectangulaire composant l'élément (voir les exceptions dans la documentation pour chaque type d'élément).
 
-<p>Cet attribut doit être spécifié, hormis pour les éléments {{ SVGElement("svg") }} dont la valeur par défaut est de 100% (exepté pour l'élément racine {{ SVGElement("svg") }} qui possède un parent HTML),  {{ SVGElement("filter") }} et {{ SVGElement("mask") }} dont la valeur par défaut est de 120%.</p>
+Cet attribut doit être spécifié, hormis pour les éléments {{ SVGElement("svg") }} dont la valeur par défaut est de 100% (exepté pour l'élément racine {{ SVGElement("svg") }} qui possède un parent HTML),  {{ SVGElement("filter") }} et {{ SVGElement("mask") }} dont la valeur par défaut est de 120%.
 
-<h2 id="Contexte_d'utilisation">Contexte d'utilisation</h2>
+## Contexte d'utilisation
 
 <table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="row">Catégories</th>
-   <td>Aucune</td>
-  </tr>
-  <tr>
-   <th scope="row">Valeur</th>
-   <td><a href="/fr/SVG/Content_type#Length" title="https://developer.mozilla.org/en/SVG/Content_type#Length">&lt;length&gt;</a></td>
-  </tr>
-  <tr>
-   <th scope="row">Animable</th>
-   <td>Oui</td>
-  </tr>
-  <tr>
-   <th scope="row">Document normatif</th>
-   <td><a href="http://www.w3.org/TR/SVG/extend.html#ForeignObjectElementWidthAttribute">SVG 1.1 (2nd Edition): foreignObject element</a><br>
-    <a href="http://www.w3.org/TR/SVG/struct.html#ImageElementWidthAttribute">SVG 1.1 (2nd Edition): image element</a><br>
-    <a href="http://www.w3.org/TR/SVG/pservers.html#PatternElementWidthAttribute">SVG 1.1 (2nd Edition): pattern element</a><br>
-    <a href="http://www.w3.org/TR/SVG/shapes.html#RectElementWidthAttribute">SVG 1.1 (2nd Edition): rect element</a><br>
-    <a href="http://www.w3.org/TR/SVG/struct.html#SVGElementWidthAttribute">SVG 1.1 (2nd Edition): svg element</a><br>
-    <a href="http://www.w3.org/TR/SVG/struct.html#UseElementWidthAttribute">SVG 1.1 (2nd Edition): use element</a><br>
-    <a href="http://www.w3.org/TR/SVG/filters.html#FilterPrimitiveWidthAttribute">SVG 1.1 (2nd Edition): Filter primitive</a><br>
-    <a href="http://www.w3.org/TR/SVG/masking.html#MaskElementWidthAttribute">SVG 1.1 (2nd Edition): mask element</a></td>
-  </tr>
- </tbody>
+  <tbody>
+    <tr>
+      <th scope="row">Catégories</th>
+      <td>Aucune</td>
+    </tr>
+    <tr>
+      <th scope="row">Valeur</th>
+      <td>
+        <a
+          href="/fr/SVG/Content_type#Length"
+          title="https://developer.mozilla.org/en/SVG/Content_type#Length"
+          >&#x3C;length></a
+        >
+      </td>
+    </tr>
+    <tr>
+      <th scope="row">Animable</th>
+      <td>Oui</td>
+    </tr>
+    <tr>
+      <th scope="row">Document normatif</th>
+      <td>
+        <a
+          href="http://www.w3.org/TR/SVG/extend.html#ForeignObjectElementWidthAttribute"
+          >SVG 1.1 (2nd Edition): foreignObject element</a
+        ><br /><a
+          href="http://www.w3.org/TR/SVG/struct.html#ImageElementWidthAttribute"
+          >SVG 1.1 (2nd Edition): image element</a
+        ><br /><a
+          href="http://www.w3.org/TR/SVG/pservers.html#PatternElementWidthAttribute"
+          >SVG 1.1 (2nd Edition): pattern element</a
+        ><br /><a
+          href="http://www.w3.org/TR/SVG/shapes.html#RectElementWidthAttribute"
+          >SVG 1.1 (2nd Edition): rect element</a
+        ><br /><a
+          href="http://www.w3.org/TR/SVG/struct.html#SVGElementWidthAttribute"
+          >SVG 1.1 (2nd Edition): svg element</a
+        ><br /><a
+          href="http://www.w3.org/TR/SVG/struct.html#UseElementWidthAttribute"
+          >SVG 1.1 (2nd Edition): use element</a
+        ><br /><a
+          href="http://www.w3.org/TR/SVG/filters.html#FilterPrimitiveWidthAttribute"
+          >SVG 1.1 (2nd Edition): Filter primitive</a
+        ><br /><a
+          href="http://www.w3.org/TR/SVG/masking.html#MaskElementWidthAttribute"
+          >SVG 1.1 (2nd Edition): mask element</a
+        >
+      </td>
+    </tr>
+  </tbody>
 </table>
 
-<p>{{ page("fr/docs/Web/SVG/Content_type","Length") }}</p>
+{{ page("fr/docs/Web/SVG/Content_type","Length") }}
 
-<h2 id="Exemple">Exemple</h2>
+## Exemple
 
-<pre class="brush: xml">&lt;?xml version="1.0"?&gt;
-&lt;svg width="120" height="120"
+```xml
+<?xml version="1.0"?>
+<svg width="120" height="120"
      viewBox="0 0 120 120"
-     xmlns="http://www.w3.org/2000/svg"&gt;
+     xmlns="http://www.w3.org/2000/svg">
 
-  &lt;rect x="10" y="10" width="100" height="100"/&gt;
-&lt;/svg&gt;</pre>
+  <rect x="10" y="10" width="100" height="100"/>
+</svg>
+```
 
-<h2 id="Eléments">Eléments</h2>
+## Eléments
 
-<p>Les éléments suivants peuvent utiliser l'attribut <code>width</code> :</p>
+Les éléments suivants peuvent utiliser l'attribut `width` :
 
-<ul>
- <li><a href="/fr/SVG/Element#FilterPrimitive" title="en/SVG/Element#FilterPrimitive">Filter primitive elements</a> »</li>
- <li>{{ SVGElement("filter") }}</li>
- <li>{{ SVGElement("foreignObject") }}</li>
- <li>{{ SVGElement("image") }}</li>
- <li>{{ SVGElement("pattern") }}</li>
- <li>{{ SVGElement("rect") }}</li>
- <li>{{ SVGElement("svg") }}</li>
- <li>{{ SVGElement("use") }}</li>
- <li>{{ SVGElement("mask") }}</li>
-</ul>
+- [Filter primitive elements](/fr/SVG/Element#FilterPrimitive "en/SVG/Element#FilterPrimitive") »
+- {{ SVGElement("filter") }}
+- {{ SVGElement("foreignObject") }}
+- {{ SVGElement("image") }}
+- {{ SVGElement("pattern") }}
+- {{ SVGElement("rect") }}
+- {{ SVGElement("svg") }}
+- {{ SVGElement("use") }}
+- {{ SVGElement("mask") }}
diff --git a/files/fr/web/svg/attribute/x/index.md b/files/fr/web/svg/attribute/x/index.md
index b34d43d08c..52b1b7c252 100644
--- a/files/fr/web/svg/attribute/x/index.md
+++ b/files/fr/web/svg/attribute/x/index.md
@@ -8,81 +8,121 @@ tags:
   - SVG
 translation_of: Web/SVG/Attribute/x
 ---
-<div>{{SVGRef}}</div>
+{{SVGRef}}
 
-<p>L'attribut <strong><code>x</code></strong> indique une coordonnée en x pour le système des coordonnées de l'utilisateur. L'effet de cette coordonnée dépend de l'élément sur lequel elle est utilisée. La plupart du temps, elle représente l'abscisse du coin en haut à gauche de la région rectangulaire pour l'élément. Cet attribut a la même syntaxe que <code><a href="https://www.w3.org/TR/SVG11/types.html#DataTypeLength">&lt;length&gt;</a></code></p>
+L'attribut **`x`** indique une coordonnée en x pour le système des coordonnées de l'utilisateur. L'effet de cette coordonnée dépend de l'élément sur lequel elle est utilisée. La plupart du temps, elle représente l'abscisse du coin en haut à gauche de la région rectangulaire pour l'élément. Cet attribut a la même syntaxe que [`<length>`](https://www.w3.org/TR/SVG11/types.html#DataTypeLength)
 
-<p>Si cet attribut n'est pas défini, on aura le même effet que si on avait utilisé la valeur <strong>0</strong>. Les éléments {{SVGElement("filter")}} et {{SVGElement("mask")}} font exception à cette règle, la valeur par défaut pour cet attribut est ici <strong>-10%</strong>.</p>
+Si cet attribut n'est pas défini, on aura le même effet que si on avait utilisé la valeur **0**. Les éléments {{SVGElement("filter")}} et {{SVGElement("mask")}} font exception à cette règle, la valeur par défaut pour cet attribut est ici **-10%**.
 
-<h2 id="Contexte_d'utilisation">Contexte d'utilisation</h2>
+## Contexte d'utilisation
 
 <table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="row">Catégories</th>
-   <td>Aucune</td>
-  </tr>
-  <tr>
-   <th scope="row">Type de valeur</th>
-   <td><code><a href="/fr/docs/Web/SVG/Content_type#Coordinate">&lt;coordinate&gt;</a></code></td>
-  </tr>
-  <tr>
-   <th scope="row">Peut être animée</th>
-   <td>Oui</td>
-  </tr>
-  <tr>
-   <th scope="row">Spécifications</th>
-   <td><a href="https://www.w3.org/TR/SVG/text.html#AltGlyphElementXAttribute">SVG 1.1 (seconde édition) : élément <code>altGlyph</code></a><br>
-    <a href="https://www.w3.org/TR/SVG/interact.html#CursorElementXAttribute">SVG 1.1 (seconde édition) : élément <code>cursor</code></a><br>
-    <a href="https://www.w3.org/TR/SVG/filters.html#fePointLightXAttribute">SVG 1.1 (seconde édition) : élément <code>fePointLight</code></a><br>
-    <a href="https://www.w3.org/TR/SVG/filters.html#feSpotLightXAttribute">SVG 1.1 (seconde édition) : élément <code>feSpotLight</code></a><br>
-    <a href="https://www.w3.org/TR/SVG/filters.html#FilterElementXAttribute">SVG 1.1 (seconde édition) : élément <code>filter</code></a><br>
-    <a href="https://www.w3.org/TR/SVG/extend.html#ForeignObjectElementXAttribute">SVG 1.1 (seconde édition) : élément <code>foreignObject</code></a><br>
-    <a href="https://www.w3.org/TR/SVG/text.html#GlyphRefElementXAttribute">SVG 1.1 (seconde édition) : élément <code>glyphRef</code></a><br>
-    <a href="https://www.w3.org/TR/SVG/struct.html#ImageElementXAttribute">SVG 1.1 (seconde édition) : élément <code>image</code></a><br>
-    <a href="https://www.w3.org/TR/SVG/pservers.html#PatternElementXAttribute">SVG 1.1 (seconde édition) : élément <code>pattern</code></a><br>
-    <a href="https://www.w3.org/TR/SVG/shapes.html#RectElementXAttribute">SVG 1.1 (seconde édition) : élément <code>rect</code></a><br>
-    <a href="https://www.w3.org/TR/SVG/struct.html#SVGElementXAttribute">SVG 1.1 (seconde édition) : élément <code>svg</code></a><br>
-    <a href="https://www.w3.org/TR/SVG/text.html#TextElementXAttribute">SVG 1.1 (seconde édition) : élément <code>text</code></a><br>
-    <a href="https://www.w3.org/TR/SVG/struct.html#UseElementXAttribute">SVG 1.1 (seconde édition) : élément <code>use</code></a><br>
-    <a href="https://www.w3.org/TR/SVG/filters.html#FilterPrimitiveXAttribute">SVG 1.1 (seconde édition) : primitive de filtre</a><br>
-    <a href="https://www.w3.org/TR/SVG/masking.html#MaskElementXAttribute">SVG 1.1 (seconde édition) : élément <code>mask</code></a><br>
-    <a href="https://www.w3.org/TR/SVG/text.html#TSpanElementXAttribute">SVG 1.1 (seconde édition) : élément <code>tspan</code></a></td>
-  </tr>
- </tbody>
+  <tbody>
+    <tr>
+      <th scope="row">Catégories</th>
+      <td>Aucune</td>
+    </tr>
+    <tr>
+      <th scope="row">Type de valeur</th>
+      <td>
+        <code
+          ><a href="/fr/docs/Web/SVG/Content_type#Coordinate"
+            >&#x3C;coordinate></a
+          ></code
+        >
+      </td>
+    </tr>
+    <tr>
+      <th scope="row">Peut être animée</th>
+      <td>Oui</td>
+    </tr>
+    <tr>
+      <th scope="row">Spécifications</th>
+      <td>
+        <a href="https://www.w3.org/TR/SVG/text.html#AltGlyphElementXAttribute"
+          >SVG 1.1 (seconde édition) : élément <code>altGlyph</code></a
+        ><br /><a
+          href="https://www.w3.org/TR/SVG/interact.html#CursorElementXAttribute"
+          >SVG 1.1 (seconde édition) : élément <code>cursor</code></a
+        ><br /><a
+          href="https://www.w3.org/TR/SVG/filters.html#fePointLightXAttribute"
+          >SVG 1.1 (seconde édition) : élément <code>fePointLight</code></a
+        ><br /><a
+          href="https://www.w3.org/TR/SVG/filters.html#feSpotLightXAttribute"
+          >SVG 1.1 (seconde édition) : élément <code>feSpotLight</code></a
+        ><br /><a
+          href="https://www.w3.org/TR/SVG/filters.html#FilterElementXAttribute"
+          >SVG 1.1 (seconde édition) : élément <code>filter</code></a
+        ><br /><a
+          href="https://www.w3.org/TR/SVG/extend.html#ForeignObjectElementXAttribute"
+          >SVG 1.1 (seconde édition) : élément <code>foreignObject</code></a
+        ><br /><a
+          href="https://www.w3.org/TR/SVG/text.html#GlyphRefElementXAttribute"
+          >SVG 1.1 (seconde édition) : élément <code>glyphRef</code></a
+        ><br /><a
+          href="https://www.w3.org/TR/SVG/struct.html#ImageElementXAttribute"
+          >SVG 1.1 (seconde édition) : élément <code>image</code></a
+        ><br /><a
+          href="https://www.w3.org/TR/SVG/pservers.html#PatternElementXAttribute"
+          >SVG 1.1 (seconde édition) : élément <code>pattern</code></a
+        ><br /><a
+          href="https://www.w3.org/TR/SVG/shapes.html#RectElementXAttribute"
+          >SVG 1.1 (seconde édition) : élément <code>rect</code></a
+        ><br /><a
+          href="https://www.w3.org/TR/SVG/struct.html#SVGElementXAttribute"
+          >SVG 1.1 (seconde édition) : élément <code>svg</code></a
+        ><br /><a
+          href="https://www.w3.org/TR/SVG/text.html#TextElementXAttribute"
+          >SVG 1.1 (seconde édition) : élément <code>text</code></a
+        ><br /><a
+          href="https://www.w3.org/TR/SVG/struct.html#UseElementXAttribute"
+          >SVG 1.1 (seconde édition) : élément <code>use</code></a
+        ><br /><a
+          href="https://www.w3.org/TR/SVG/filters.html#FilterPrimitiveXAttribute"
+          >SVG 1.1 (seconde édition) : primitive de filtre</a
+        ><br /><a
+          href="https://www.w3.org/TR/SVG/masking.html#MaskElementXAttribute"
+          >SVG 1.1 (seconde édition) : élément <code>mask</code></a
+        ><br /><a
+          href="https://www.w3.org/TR/SVG/text.html#TSpanElementXAttribute"
+          >SVG 1.1 (seconde édition) : élément <code>tspan</code></a
+        >
+      </td>
+    </tr>
+  </tbody>
 </table>
 
-<p>{{page("/fr/docs/Web/SVG/Content_type","coordinate")}}</p>
+{{page("/fr/docs/Web/SVG/Content_type","coordinate")}}
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<pre class="brush: xml">&lt;?xml version="1.0"?&gt;
-&lt;svg width="120" height="120"
+```xml
+<?xml version="1.0"?>
+<svg width="120" height="120"
      viewBox="0 0 120 120"
-     xmlns="https://www.w3.org/2000/svg"&gt;
+     xmlns="https://www.w3.org/2000/svg">
 
-  &lt;rect x="10" y="10" width="100" height="100"/&gt;
-&lt;/svg&gt;</pre>
+  <rect x="10" y="10" width="100" height="100"/>
+</svg>
+```
 
-<h2 id="Éléments">Éléments</h2>
+## Éléments
 
-<p>On peut utiliser l'attribut <code>x</code> sur les éléments suivants :</p>
+On peut utiliser l'attribut `x` sur les éléments suivants :
 
-<ul>
- <li><a href="/fr/docs/Web/SVG/Element#Éléments_de_primitives_de_filtre">Les éléments de primitives de filtres</a></li>
- <li>{{SVGElement("altGlyph")}}</li>
- <li>{{SVGElement("fePointLight")}}</li>
- <li>{{SVGElement("feSpotLight")}}</li>
- <li>{{SVGElement("filter")}}</li>
- <li>{{SVGElement("foreignObject")}}</li>
- <li>{{SVGElement("glyphRef")}}</li>
- <li>{{SVGElement("image")}}</li>
- <li>{{SVGElement("pattern")}}</li>
- <li>{{SVGElement("rect")}}</li>
- <li>{{SVGElement("svg")}}</li>
- <li>{{SVGElement("text")}}</li>
- <li>{{SVGElement("use")}}</li>
- <li>{{SVGElement("mask")}}</li>
- <li>{{SVGElement("tref")}}</li>
- <li>{{SVGElement("tspan")}}</li>
-</ul>
+- [Les éléments de primitives de filtres](/fr/docs/Web/SVG/Element#Éléments_de_primitives_de_filtre)
+- {{SVGElement("altGlyph")}}
+- {{SVGElement("fePointLight")}}
+- {{SVGElement("feSpotLight")}}
+- {{SVGElement("filter")}}
+- {{SVGElement("foreignObject")}}
+- {{SVGElement("glyphRef")}}
+- {{SVGElement("image")}}
+- {{SVGElement("pattern")}}
+- {{SVGElement("rect")}}
+- {{SVGElement("svg")}}
+- {{SVGElement("text")}}
+- {{SVGElement("use")}}
+- {{SVGElement("mask")}}
+- {{SVGElement("tref")}}
+- {{SVGElement("tspan")}}