UPDATE: Fix and refresh the SVG tutorial page - Issue #451 (#453)

* UPDATE: Fix links, remove old KS, update sentences from en-US

* Generate EOL document

1 files changed, 37 insertions, 22 deletions

diff --git a/files/fr/web/svg/tutorial/index.html b/files/fr/web/svg/tutorial/index.html
index 2c99e74f15..eacaeb73c4 100644
--- a/files/fr/web/svg/tutorial/index.html
+++ b/files/fr/web/svg/tutorial/index.html
@@ -2,36 +2,51 @@
 title: Tutoriel SVG
 slug: Web/SVG/Tutorial
 tags:
+  - Intermediate
   - NeedsContent
+  - NeedsHelp
+  - NeedsUpdate
   - SVG
-  - SVG:Tutoriel
+  - SVG:Tutorial
 translation_of: Web/SVG/Tutorial
 original_slug: Web/SVG/Tutoriel
 ---
-<p><a href="/fr/SVG" title="fr/SVG">SVG</a>, pour Scalable Vector Graphics (ou encore Graphismes vectoriels redimensionnables), est un langage basé sur le <a href="/fr/XML" title="fr/XML">XML</a> du W3C qui permet de définir des éléments graphiques avec des balises. Ce langage est plus ou moins implémenté dans Firefox, Opera, les navigateurs à base de Webkit, Internet Explorer et les autres navigateurs Web.</p>
+<p class="summary"><a href="/fr/docs/Web/SVG">SVG</a>, pour Scalable Vector Graphics (ou encore Graphismes vectoriels redimensionnables), est un langage basé sur le <a href="/fr/docs/Web/XML">XML</a> du W3C qui permet de définir des éléments graphiques avec des balises. Ce langage est plus ou moins implémenté dans Firefox, Opera, les navigateurs à base de Webkit, Internet Explorer et les autres navigateurs Web.</p>
 
-<p>Ce tutoriel a pour but d'expliquer les mécanismes internes de SVG et regorge de détails techniques. Si vous souhaitez juste dessiner de belles images, vous trouverez plus facilement votre bonheur sur la <a class="external" href="http://inkscape.org/doc/" title="page de documentation d'Inkscape">page de documentation d'Inkscape</a>. Le W3C fournit également une <a class="external" href="http://www.w3.org/Graphics/SVG/IG/resources/svgprimer.html" title="An SVG Primer">bonne introduction au format SVG</a>, en anglais malheureusement.</p>
+<p>Ce tutoriel a pour but d'expliquer les mécanismes internes de SVG et regorge de détails techniques. Si vous souhaitez juste dessiner de belles images, vous trouverez plus facilement votre bonheur sur la <a href="https://inkscape.org/doc/">page de documentation d'Inkscape</a>. Le W3C fournit également une <a href="https://www.w3.org/Graphics/SVG/IG/resources/svgprimer.html">bonne introduction au format SVG</a>, en anglais.</p>
 
-<div class="note">Ce tutoriel est en cours de développement et de traduction. Si vous le pouvez, n'hésitez pas à y mettre votre grain de sel et écrire / traduire un paragraphe ou deux. Des points supplémentaires sont prévus pour ceux qui écriront des pages entières, à réclamer auprès de <a href="/en-US/profiles/GiulianT" title="https://developer.mozilla.org/en-US/profiles/GiulianT/">Julia</a>. Merci d'avance !</div>
+<div class="notecard note">
+  <p><b>Note :</b></p>
+  <p>Le tutoriel en est encore à un stade précoce de développement. Si vous le pouvez, aidez-nous en rédigeant un paragraphe ou deux. Des points supplémentaires pour l'écriture d'une page entière !</p>
+</div>
+
+<h2 id="Introducing_SVG_from_Scratch">Introduction à « SVG from Scratch »</h2>
 
 <ul>
- <li><a href="/fr/SVG/Tutoriel/Introduction" title="fr/SVG/Tutoriel/Introduction">Introduction</a></li>
- <li><a href="/fr/SVG/Tutoriel/Premiers_pas" title="fr/SVG/Tutoriel/Premiers_pas">Premiers pas</a></li>
- <li><a href="/fr/SVG/Tutoriel/Positionnement" title="fr/SVG/Tutoriel/Positionnement">Positionnement</a></li>
- <li><a href="/fr/SVG/Tutoriel/Formes_de_base" title="fr/SVG/Tutoriel/Formes_de_base">Formes de base</a></li>
- <li><a href="/fr/docs/Web/SVG/Tutoriel/Paths">Paths</a></li>
- <li><a href="/fr/docs/Web/SVG/Tutoriel/Fills_and_Strokes">Remplissages et contours</a></li>
- <li><a href="/fr/docs/Web/SVG/Tutoriel/Gradients">Gradients</a></li>
- <li><a href="/fr/docs/Web/SVG/Tutoriel/Motifs">Motifs</a></li>
- <li><a href="/fr/docs/Web/SVG/Tutoriel/Texts">Textes</a></li>
- <li><a href="/fr/SVG/Tutoriel/Transformations_de_base" title="fr/SVG/Tutoriel/Transformations_de_base">Transformations de base</a></li>
- <li><a href="/fr/SVG/Tutoriel/Découpages_et_masquages" title="Découpages et masquages">Découpages et masquages</a></li>
- <li><a href="/fr/docs/Web/SVG/Tutoriel/Contenu_embarque_SVG">Contenu embarqué</a></li>
- <li><a href="/fr/docs/Web/SVG/Tutoriel/filtres">Filtres</a></li>
- <li><a href="/fr/docs/Web/SVG/Tutoriel/polices_SVG">Polices SVG</a></li>
- <li><a href="/fr/docs/Web/SVG/Tutoriel/SVG_Image_Tag">Élément image</a></li>
- <li><a href="/fr/docs/Web/SVG/Tutoriel/Tools_for_SVG">Outils pour SVG</a></li>
- <li><a href="/fr/SVG/Tutoriel/Autres_Tutoriels" title="fr/SVG/Tutoriel/Autres_Tutoriels">Autres tutoriels</a></li>
+  <li><a href="/fr/docs/Web/SVG/Tutorial/Introduction">Introduction</a></li>
+  <li><a href="/fr/docs/Web/SVG/Tutorial/Getting_Started">Premiers pas</a></li>
+  <li><a href="/fr/docs/Web/SVG/Tutorial/Positions">Positionnement</a></li>
+  <li><a href="/fr/docs/Web/SVG/Tutorial/Basic_Shapes">Formes de base</a></li>
+  <li><a href="/fr/docs/Web/SVG/Tutorial/Paths">Chemins</a></li>
+  <li><a href="/fr/docs/Web/SVG/Tutorial/Fills_and_Strokes">Remplissages et contours</a></li>
+  <li><a href="/fr/docs/Web/SVG/Tutorial/Gradients">Gradients</a></li>
+  <li><a href="/fr/docs/Web/SVG/Tutorial/Patterns">Motifs</a></li>
+  <li><a href="/fr/docs/Web/SVG/Tutorial/Texts">Textes</a></li>
+  <li><a href="/fr/docs/Web/SVG/Tutorial/Basic_Transformations">Transformations de base</a></li>
+  <li><a href="/fr/docs/Web/SVG/Tutorial/Clipping_and_masking">Découpages et masquages</a></li>
+  <li><a href="/fr/docs/Web/SVG/Tutorial/Other_content_in_SVG">Autre contenu en SVG</a></li>
+  <li><a href="/fr/docs/Web/SVG/Tutorial/Filter_effects">Filtres</a></li>
+  <li><a href="/fr/docs/Web/SVG/Tutorial/SVG_fonts">Polices SVG</a></li>
+  <li><a href="/fr/docs/Web/SVG/Tutorial/SVG_Image_Tag">SVG: Elément image</a></li>
+  <li><a href="/fr/docs/Web/SVG/Tutorial/Tools_for_SVG">Outils pour SVG</a></li>
+  <li><a href="/fr/docs/Web/SVG/Tutorial/SVG_and_CSS">Graphiques SVG</a></li>
 </ul>
 
-<p>{{ languages( { "en": "en/SVG/Tutorial", "ja": "ja/SVG/Tutorial", "pl": "pl/SVG/Przewodnik" } ) }}</p>
+<p>Les sujets suivants sont plus avancés et devraient donc faire l'objet de leurs propres tutoriels.</p>
+
+<h2 id="Scripting_SVG_with_JavaScript">Scripter SVG avec JavaScript</h2>
+
+<div class="notecard draft">
+  <p><b>Brouillon</b></p>
+  <p>Cette section est en cours de création.</p>
+</div>