follow up PR #14339 for fr page (#1444)

* follow up PR #14339 for fr page
* FIX: minor fixes

Co-authored-by: tristantheb <tristantheb@users.noreply.github.com>

1 files changed, 42 insertions, 42 deletions

diff --git a/files/fr/web/svg/tutorial/getting_started/index.html b/files/fr/web/svg/tutorial/getting_started/index.html
index a006028aa8..5b5fda31c5 100644
--- a/files/fr/web/svg/tutorial/getting_started/index.html
+++ b/files/fr/web/svg/tutorial/getting_started/index.html
@@ -7,93 +7,93 @@ tags:
 translation_of: Web/SVG/Tutorial/Getting_Started
 original_slug: Web/SVG/Tutoriel/Premiers_pas
 ---
-<p>{{ PreviousNext("SVG/Tutoriel/Introduction", "SVG/Tutoriel/Positionnement") }}</p>
+<p>{{PreviousNext("Web/SVG/Tutorial/Introduction", "Web/SVG/Tutorial/Positions")}}</p>
 
-<h3 id="Commençons_par_un_exemple_simple">Commençons par un exemple simple</h3>
+<h2 id="a_simple_example">Un exemple simple</h2>
 
-<p>Jetez un coup d'oeil au morceau de code suivant :</p>
+<p>Commençons directement avec un exemple pratique. Jetez un coup d'œil au morceau de code suivant :</p>
 
-<pre class="alt">&lt;svg version="1.1"
-     baseProfile="full"
-     xmlns="http://www.w3.org/2000/svg"&gt;
+<pre class="brush: xml">
+&lt;svg version="1.1"
+     baseProfile="full"
+     width="300" height="200"
+     xmlns="http://www.w3.org/2000/svg"&gt;
 
-  &lt;rect width="100%" height="100%" fill="red"/&gt;
+  &lt;rect width="100%" height="100%" fill="red" /&gt;
 
-  &lt;circle cx="150" cy="100" r="80" fill="green"/&gt;
+  &lt;circle cx="150" cy="100" r="80" fill="green" /&gt;
 
-  &lt;text x="150" y="125" font-size="60" text-anchor="middle" fill="white"&gt;SVG&lt;/text&gt;
+  &lt;text x="150" y="125" font-size="60" text-anchor="middle" fill="white"&gt;SVG&lt;/text&gt;
 
 &lt;/svg&gt;
 </pre>
 
-<p>Copiez le code précédent dans un document texte, puis enregistrez le sous le nom de <em>demo1.svg</em>. Ouvrez le fichier dans Firefox. Vous obtiendrez alors l'image suivante (pour les utilisateurs de Firefox : cliquez <a class="external" href="https://developer.mozilla.org/@api/deki/files/4571/=svgdemo1.xml" title="https://developer.mozilla.org/@api/deki/files/4571/=svgdemo1.xml">ici</a>)</p>
+<p>Copiez le code précédent dans un document texte, puis enregistrez-le sous le nom de <em>demo1.svg</em>. Ouvrez le fichier dans Firefox. Vous obtiendrez alors l'image suivante (pour les utilisateurs de Firefox : cliquez <a href="https://media.prod.mdn.mozit.cloud/attachments/2012/07/09/3075/89b1e0a26e8421e19f907e0522b188bd/svgdemo1.xml">ici</a>)</p>
 
-<p><img alt="svgdemo1.png" class="default internal" src="/@api/deki/files/4928/=svgdemo1.png"></p>
+<p><img alt="une image avec un rectangle rouge contenant un disque vert dans lequel est écrit SVG en blanc" src="svgdemo1.png"></p>
 
 <p>Quelques explications s'imposent quant au fonctionnement du rendu :</p>
 
 <ol>
- <li>Nous commençons avec l'élément <code>svg </code>à la racine : <a href="/en/SVG/Namespaces_Crash_Course" title="en/SVG/Namespaces_Crash_Course"> </a><a href="/en/SVG/Namespaces_Crash_Course" title="en/SVG/Namespaces_Crash_Course"> </a>
+ <li>Nous commençons avec l'élément <a href="/fr/docs/Web/SVG/Element/svg"><code>svg</code></a> à la racine :
 
   <ul>
-   <li>la déclaration du doctype que l'on voit en (X)HTML peut être enlevée car la DTD du SVG provoque plus de problèmes qu'elle n'en résout.</li>
-   <li>pour identifier la version du SVG pour d'autre types de validation, les attributs <code>version</code> et <code>baseProfile</code> doivent toujours être utilisés.</li>
-   <li>en tant que langage basé sur XML, l'espace de nommage du document SVG doit toujours utiliser des limites définies, d'où l'attribut <code>xmlns</code>. Pour plus d'informations, n'hésitez pas à consulter la page <a href="/en/SVG/Namespaces_Crash_Course" title="en/SVG/Namespaces_Crash_Course">Namespaces Crash Courses.</a></li>
+   <li>La déclaration du doctype que l'on voit en (X)HTML peut être enlevée, car la validation DTD du SVG provoque plus de problèmes qu'elle n'en résout.</li>
+   <li>Avant SVG 2, pour identifier la version du SVG pour d'autre types de validation, les attributs <code>version</code> et <code>baseProfile</code> devaient toujours être utilisés. Ces deux attributs sont dépréciés en SVG 2.</li>
+   <li>En tant que langage basé sur XML, l'espace de noms du document SVG doit être correct, d'où l'attribut <code>xmlns</code>. Pour plus d'informations, n'hésitez pas à consulter la page <a href="/fr/docs/Web/SVG/Namespaces_Crash_Course">Cours d'introduction aux espaces de noms.</a></li>
   </ul>
  </li>
- <li>L'arrière-plan est défini par un rectangle rouge, déclaré grâce à la balise &lt;rect/&gt; qui recouvre l'intégralité de l'espace.</li>
- <li>Un cercle vert d'un rayon de 80px est dessiné par dessus le centre du rectangle rouge, avec un décalage de 30+120px vers l'intérieur et de 50+50px vers le haut.</li>
+ <li>L'arrière-plan est défini par un rectangle rouge, déclaré grâce à la balise <a href="/fr/docs/Web/SVG/Element/rect"><code>&lt;rect&gt;</code></a> qui recouvre l'intégralité de l'espace.</li>
+ <li>Un cercle (<a href="/fr/docs/Web/SVG/Element/circle"><code>&lt;circle&gt;</code></a>) vert d'un rayon de 80px est dessiné par-dessus le centre du rectangle rouge, avec un décalage de 30+120px vers l'intérieur et de 50+50px vers le haut.</li>
  <li>Le texte "SVG" est dessiné. L'intérieur de chaque lettre est rempli de blanc. Le texte est positionné grâce à une ancre placée là où nous souhaitons qu'elle soit. Dans le cas présent, le centre du texte doit correspondre au milieu du rectangle rouge. De petits ajustements peuvent être apportés à la taille de la police et au positionnement vertical, de manière à assurer un résultat final esthétiquement agréable.</li>
 </ol>
 
-<h3 id="Les_propriétés_basiques_des_fichiers_SVG">Les propriétés basiques des fichiers SVG</h3>
+<h2 id="basic_properties_of_svg_files">Les propriétés basiques des fichiers SVG</h2>
 
 <ul>
- <li>La première chose à retenir est l'ordre de rendu des éléments. La règle qui prévaut pour le SVG est que les éléments déclarés les plus récemment sont ceux qui seront affichés en avant des autres. En gros, l'élément défini en bas du document sera celui qui s'affichera au dessus de tous les autres.</li>
- <li>Les documents SVG peuvent être affichés directement dans un navigateur ou même être incorporés directement dans un fichier HTML, en suivant plusieurs méthodes :
+ <li>La première chose à retenir est l'ordre de rendu des éléments. La règle qui prévaut pour le SVG est que les éléments déclarés les plus récemment sont ceux qui seront affichés par-dessus les autres. En gros, l'élément défini en bas du document sera celui qui s'affichera au-dessus de tous les autres.</li>
+ <li>Les fichiers SVG peuvent être affichés directement dans un navigateur ou même être incorporés directement dans un fichier HTML, en suivant plusieurs méthodes :
   <ul>
-   <li>Si le HTML est du XHTML et est distribué sous forme de <code>application/xhtml+xml</code>, le SVG peut directement être intégré dans la source XML.</li>
+   <li>Si le HTML est du XHTML et est distribué avec le type MIME <code>application/xhtml+xml</code>, le SVG peut directement être intégré dans la source XML.</li>
    <li>SI le HTML est du HTML5 et que le navigateur est conforme HTML5, le SVG peut aussi être intégré directement dans les sources. Toutefois, il peut être nécessaire d'effectuer des modifications de syntaxe pour rendre le document compatible aux spécifications HTML5.</li>
    <li>Le document SVG peut être défini avec un élément <code>object</code> :
-    <pre>&lt;object data="image.svg" type="image/svg+xml" /&gt;</pre>
+    <pre class="brush: html">&lt;object data="image.svg" type="image/svg+xml" /&gt;</pre>
    </li>
    <li>De la même manière, un <code>iframe</code> peut être utilisé :
-    <pre>&lt;iframe src="image.svg"&gt;&lt;/iframe&gt;</pre>
+    <pre class="brush: html">&lt;iframe src="image.svg"&gt;&lt;/iframe&gt;</pre>
    </li>
-   <li>Théoriquement, une balise <code>img</code> peut également être utilisée. Cependant, cette méthode n'est supportée dans Firefox que depuis la version 4.0.</li>
-   <li>Enfin, SVG peut être créé dynamiquement avec du Javascript et injecté dans le DOM HTML. <span id="result_box" lang="fr"><span class="hps">Ceci permet aux</span><span class="hps"> technologies</span> <span class="hps">de remplacement</span> <span class="hps">pour les navigateurs</span><span>, qui</span> <span class="hps">ne peuvent pas traiter</span> <span class="hps">SVG</span><span>, d'être</span> <span class="hps">mises en œuvre</span><span>.</span></span> Pour approfondir cette technique, vous pouvez lire <a href="/en/SVG_In_HTML_Introduction" title="SVG In HTML Introduction">cette page</a>.</li>
+   <li>Une balise <code>img</code> peut également être utilisée.</li>
+   <li>Enfin, SVG peut être créé dynamiquement avec du JavaScript et injecté dans le DOM HTML. Ceci permet aux technologies de remplacement pour les navigateurs, qui ne peuvent pas traiter SVG, d'être mises en œuvre. Pour approfondir cette technique, vous pouvez lire <a href="/fr/docs/Web/SVG/Tutorial/SVG_In_HTML_Introduction">cette page</a>.</li>
   </ul>
  </li>
- <li>La manière dont SVG gère les tailles et les unités sera traitée à <a href="/fr/SVG/Tutoriel/Positionnement" title="fr/SVG/Tutoriel/Positionnement">la page suivante</a>.</li>
+ <li>La manière dont SVG gère les tailles et les unités sera traitée à <a href="/fr/docs/Web/SVG/Tutorial/Positions">la page suivante</a>.</li>
 </ul>
 
-<p> </p>
+<h2 id="svg_file_types">Les types de fichiers SVG</h2>
 
-<h3 id="Un_mots_sur_les_serveurs_Web" name="Un_mots_sur_les_serveurs_Web">Les types de fichiers SVG</h3>
+<p>Les fichiers SVG peuvent exister sous deux formes. La première consiste en des fichiers textes traditionnels, contenant des balises SVG. Il est recommandé de nommer ces fichiers avec l'extension ".svg" (tout en minuscules).</p>
 
-<p>Les documents SVG peuvent être déclarés de deux manières. Normalement, les fichiers SVG sont des fichiers textes traditionnels, contenant des balises SVG. Il est recommandé de nommer ces fichiers avec l'extension ".svg" (tout en minuscules).</p>
+<p>Toutefois, les fichiers SVG peuvent atteindre une taille assez importante, suivant l'utilisation qu'on en fait. Une application géographique utilisera ainsi des fichiers SVG plus volumineux, par exemple. Pour ces cas particuliers, la spécification SVG permet l'utilisation de fichiers compressés avec gzip. Il est conseillé d'utiliser l'extension .svgz (toujours tout en minuscules) pour ce type de fichiers. Par contre, il est assez problématique d'utiliser des fichiers SVG compressés avec gzip avec certains user agents quand les fichiers sont distribués à travers un serveur Microsoft IIS. De plus, Firefox ne peut pas charger les fichiers compressés en local. Évitez donc d'utiliser les fichiers compressés, sauf si vous êtes sûr que le serveur Web que vous utilisez puisse les distribuer correctement (voir ci-après).</p>
 
-<p>Les fichiers SVG peuvent atteindre une taille assez importante, suivant l'utilisation qu'on en fait. Une application géographique utilisera ainsi des fichiers SVG plus volumineux, par exemple. Pour ces cas particuliers, la spécification SVG permet l'utilisation de fichiers compressés avec gzip. Il est conseillé d'utiliser l'extension .svgz (toujours tout en minuscules) pour ce type de fichiers. Par contre, il est assez problématique d'utiliser des fichiers SVG compressés avec gzip avec certains user agents quand les fichiers sont distribués à travers un serveur Microsoft IIS. De plus, Firefox ne peut pas charger les fichiers compressés en local. Évitez donc d'utiliser les fichiers compressés, sauf si vous êtes sûr que le serveur Web que vous utilisez puisse les distribuer correctement (cf plus bas).</p>
+<h2 id="a_word_on_webservers">Un mot sur les serveurs web</h2>
 
-<h3 id="Un_mots_sur_les_serveurs_Web" name="Un_mots_sur_les_serveurs_Web">Un mot sur les serveurs Web</h3>
+<p>Maintenant qu'on sait comment créer des fichiers SVG basiques, la prochaine étape consiste à les envoyer sur un serveur web. À ce stade, il existe quelques précautions à suivre. Pour les fichiers SVG normaux, les serveurs devraient envoyer l'en-tête HTTP :</p>
 
-<p>Maintenant que vous avez une petite idée de la manière de créer des fichiers SVG basiques, la prochaine étape est de les envoyer sur un serveur Web. À ce stade, il existe quelques précautions à suivre. Pour les fichiers SVG normaux, les serveurs devraient envoyer l'en-tête HTTP :</p>
-
-<pre class="eval">Content-Type: image/svg+xml
+<pre>
+Content-Type: image/svg+xml
+Vary: Accept-Encoding
 </pre>
 
-<p>Pour les fichiers SVG compressés, les serveurs devraient envoyer l'en-tête HTTP :</p>
+<p>Pour les fichiers SVG compressés, les serveurs devraient envoyer l'en-tête HTTP :</p>
 
-<pre class="eval">Content-Type: image/svg+xml
+<pre>
+Content-Type: image/svg+xml
 Content-Encoding: gzip
+Vary: Accept-Encoding
 </pre>
 
-<p>Vous pouvez vérifier que votre serveur envoie le bon en-tête HTTP avec vos fichiers SVG en utilisant <a href="fr/docs/Outils/Moniteur_réseau#En-t.C3.AAtes">le Moniteur Réseau</a> ou un site comme <a class="external" href="http://web-sniffer.net/">web-sniffer.net</a>. Donnez l'URL d'un de vos fichiers SVG et regardez les en-têtes HTTP de la réponse. Si vous remarquez que votre serveur n'envoie pas les en-têtes avec les valeurs ci-dessus, vous devriez contacter votre hébergeur. Si vous avez du mal à le convaincre de configurer correctement leurs serveurs pour le SVG, il y a peut-être moyen de le faire vous-même. Regardez <a class="external" href="http://svg-whiz.com/wiki/index.php?title=Server_Configuration">la page de configuration d'un serveur</a> sur le wiki SVG pour quelques solutions simples.</p>
+<p>Vous pouvez vérifier que votre serveur envoie le bon en-tête HTTP avec vos fichiers SVG en utilisant <a href="/fr/docs/Tools/Network_Monitor">le Moniteur réseau</a> ou un site comme <a href="https://websniffer.cc/">websniffer.cc</a>. Fournissez l'URL d'un de vos fichiers SVG et regardez les en-têtes HTTP de la réponse. Si vous remarquez que votre serveur n'envoie pas les en-têtes avec les valeurs ci-dessus, vous devriez contacter votre hébergeur. Si vous avez du mal à le convaincre de configurer correctement leurs serveurs pour le SVG, il y a peut-être moyen de le faire vous-même. Regardez <a href="https://www.w3.org/services/svg-server/">la page de configuration d'un serveur</a> sur le site w3.org pour quelques solutions simples.</p>
 
 <p>La mauvaise configuration du serveur est souvent la cause de l'échec du chargement du SVG, donc assurez-vous bien d'avoir vérifié le vôtre. Si votre serveur n'est pas configuré pour envoyer les bons en-têtes avec les fichiers SVG qu'il fournit, alors Firefox affichera le contenu du fichier comme du texte ou comme du rebut encodé, ou demandera peut-être à l'utilisateur de choisir une application pour l'ouvrir.</p>
 
-<p>{{ PreviousNext("SVG/Tutoriel/Introduction", "SVG/Tutoriel/Positionnement") }}</p>
-
-<p><span class="comment">Interwiki Languages Links</span></p>
-
-<p>{{ languages( { "en": "en/SVG/Tutorial/Getting_Started", "ja": "ja/SVG/Tutorial/Getting_Started" } ) }}</p>
+<p>{{PreviousNext("Web/SVG/Tutorial/Introduction", "Web/SVG/Tutorial/Positions")}}</p>