[FR] Fix: Adding sidebar macro {{SVGRef}} (Fixes #19635) (#19647)

fix: Adding sidebar macro {{SVGRef}}
mdn · May 4, 2024 · 53b606e · 53b606e
1 parent bdb435a
commit 53b606e
Show file tree

Hide file tree

Showing 20 changed files with 43 additions and 1 deletion.
diff --git a/files/fr/web/svg/applying_svg_effects_to_html_content/index.md b/files/fr/web/svg/applying_svg_effects_to_html_content/index.md
@@ -3,6 +3,8 @@ title: Application d'effets SVG à du contenu HTML
 slug: Web/SVG/Applying_SVG_effects_to_HTML_content
 ---
 
+{{SVGRef}}
+
 Les navigateurs modernes supportent le format [SVG](/fr/docs/Web/SVG) utilisant du [CSS](/fr/docs/Web/CSS) pour appliquer des effets graphiques au contenu HTML.
 
 Vous pouvez éditer un SVG avec du CSS, soit directement dans le document, soit dans une feuille de style externe. Il y a 3 propriétés que vous pouvez utiliser : [`mask`](/fr/docs/Web/CSS/mask), [`clip-path`](/fr/docs/Web/CSS/clip-path) et [`filter`](/fr/docs/Web/CSS/filter).

diff --git a/files/fr/web/svg/svg_animation_with_smil/index.md b/files/fr/web/svg/svg_animation_with_smil/index.md
@@ -3,6 +3,8 @@ title: Animation SVG avec SMIL
 slug: Web/SVG/SVG_animation_with_SMIL
 ---
 
+{{SVGRef}}
+
 > **Attention :** Bien que Chrome 45 déprécie SMIL en faveur des animations CSS et des animations Web, les développeurs Chrome ont depuis [suspendu](https://groups.google.com/a/chromium.org/d/msg/blink-dev/5o0yiO440LM/YGEJBsjUAwAJ) cette décision.
 
 Firefox 4 introduit le support pour les animations [SVG](/fr/SVG) en utilisant [Synchronized Multimedia Integration Language](http://www.w3.org/TR/REC-smil) (SMIL). SMIL permet :

diff --git a/files/fr/web/svg/tutorial/basic_shapes/index.md b/files/fr/web/svg/tutorial/basic_shapes/index.md
@@ -3,6 +3,8 @@ title: Formes de base
 slug: Web/SVG/Tutorial/Basic_Shapes
 ---
 
+{{SVGRef}}
+
 {{PreviousNext("Web/SVG/Tutorial/Positions","Web/SVG/Tutorial/Paths")}}
 
 Il existe tout un ensemble de formes de base utilisées pour faire du dessin via SVG. Le but de ces formes s'avère assez transparent si on regarde attentivement les noms de chaque élément. Des attributs permettent de configurer leur position et leur taille, mais vous pourrez retrouver les détails de chaque élément avec tous ses attributs à [la page des références SVG](/fr/docs/Web/SVG/Element). Nous nous contenterons ici de couvrir les fonctions de base qui nous sont nécessaires, car elles sont utilisées dans la plupart des documents SVG.

diff --git a/files/fr/web/svg/tutorial/basic_transformations/index.md b/files/fr/web/svg/tutorial/basic_transformations/index.md
@@ -3,6 +3,8 @@ title: Transformations de base
 slug: Web/SVG/Tutorial/Basic_Transformations
 ---
 
+{{SVGRef}}
+
 {{ PreviousNext("Web/SVG/Tutoriel/Texts", "Web/SVG/Tutoriel/Découpages_et_masquages") }}
 
 Maintenant, nous sommes prêts à tordre nos images dans tous les sens. Mais avant toute chose, il faut vous présenter l'élément `<g>`. Cet assistant va vous permettre d'assigner des attributs à un ensemble d'éléments. En fait, c'est bien son seul rôle. Par exemple :

diff --git a/files/fr/web/svg/tutorial/clipping_and_masking/index.md b/files/fr/web/svg/tutorial/clipping_and_masking/index.md
@@ -3,6 +3,8 @@ title: Découpages et masquages
 slug: Web/SVG/Tutorial/Clipping_and_masking
 ---
 
+{{SVGRef}}
+
 {{ PreviousNext("SVG/Tutoriel/Transformations_de_base", "Web/SVG/Tutoriel/Contenu_embarque_SVG") }}
 
 Effacer une partie de ce que l'on a créé précédemment peut paraître maladroit, voire totalement contradictoire. Mais cela peut se révéler très utile, par exemple quand vous essayez de dessiner un demi-cercle.

diff --git a/files/fr/web/svg/tutorial/fills_and_strokes/index.md b/files/fr/web/svg/tutorial/fills_and_strokes/index.md
@@ -3,6 +3,8 @@ title: Remplissages et contours
 slug: Web/SVG/Tutorial/Fills_and_Strokes
 ---
 
+{{SVGRef}}
+
 {{ PreviousNext("Web/SVG/Tutoriel/Paths", "Web/SVG/Tutoriel/Gradients") }}
 
 Il y a différentes manières de colorer des formes: utiliser différents attributs SVG sur l'objet, utiliser du {{glossary("CSS")}} en ligne, une section CSS ou un fichier CSS externe. La plupart des {{glossary("SVG")}} que vous trouverez sur le Web utilisent du CSS en ligne, mais il y a des avantages et inconvénients pour chaque manière.

diff --git a/files/fr/web/svg/tutorial/filter_effects/index.md b/files/fr/web/svg/tutorial/filter_effects/index.md
@@ -3,6 +3,8 @@ title: Filtres
 slug: Web/SVG/Tutorial/Filter_effects
 ---
 
+{{SVGRef}}
+
 {{ PreviousNext("Web/SVG/Tutoriel/Contenu_embarque_SVG", "Web/SVG/Tutoriel/polices_SVG") }}
 
 Dans certaines situations, les formes de base n'offrent pas la flexibilité nécessaire pour obtenir un certain effet. Par exemple, les ombres portées ne peuvent raisonnablement pas être crées avec des gradients. Les filtres sont des mécanismes SVG qui permettent de créer effets plus sophistiqués.

diff --git a/files/fr/web/svg/tutorial/getting_started/index.md b/files/fr/web/svg/tutorial/getting_started/index.md
@@ -3,6 +3,8 @@ title: Premiers pas
 slug: Web/SVG/Tutorial/Getting_Started
 ---
 
+{{SVGRef}}
+
 {{PreviousNext("Web/SVG/Tutorial/Introduction", "Web/SVG/Tutorial/Positions")}}
 
 ## Un exemple simple

diff --git a/files/fr/web/svg/tutorial/gradients/index.md b/files/fr/web/svg/tutorial/gradients/index.md
@@ -3,6 +3,8 @@ title: Gradients SVG
 slug: Web/SVG/Tutorial/Gradients
 ---
 
+{{SVGRef}}
+
 {{ PreviousNext("Web/SVG/Tutoriel/Fills_and_Strokes", "Web/SVG/Tutoriel/Motifs") }}
 
 Probablement plus excitant qu'un simple remplissage et contour, est le fait de pouvoir créer et appliquer des dégradés comme remplissage ou contour.

diff --git a/files/fr/web/svg/tutorial/index.md b/files/fr/web/svg/tutorial/index.md
@@ -3,6 +3,8 @@ title: Tutoriel SVG
 slug: Web/SVG/Tutorial
 ---
 
+{{SVGRef}}
+
 [SVG](/fr/docs/Web/SVG), pour Scalable Vector Graphics (ou encore Graphismes vectoriels redimensionnables), est un langage basé sur le [XML](/fr/docs/Web/XML) 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.
 
 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 [page de documentation d'Inkscape](https://inkscape.org/doc/). Le W3C fournit également une [bonne introduction au format SVG](https://www.w3.org/Graphics/SVG/IG/resources/svgprimer.html), en anglais.

diff --git a/files/fr/web/svg/tutorial/introduction/index.md b/files/fr/web/svg/tutorial/introduction/index.md
@@ -3,6 +3,8 @@ title: Introduction
 slug: Web/SVG/Tutorial/Introduction
 ---
 
+{{SVGRef}}
+
 {{ PreviousNext("SVG/Tutoriel", "SVG/Tutoriel/Premiers_pas") }}
 
 SVG est un langage [XML](/fr/XML), assez similaire au [XHTML](/fr/XHTML). Ce langage peut être utilisé pour dessiner des choses complexes, comme le petit lion sur la gauche. Je l'ai dit en présentation de ce tutoriel, le SVG est un langage vectoriel. En gros, cela veut dire que l'image peut être transformée, rétrécie, agrandie, bref, manipulée, sans perte de qualité.

diff --git a/files/fr/web/svg/tutorial/other_content_in_svg/index.md b/files/fr/web/svg/tutorial/other_content_in_svg/index.md
@@ -3,6 +3,8 @@ title: Contenu embarqué dans le SVG
 slug: Web/SVG/Tutorial/Other_content_in_SVG
 ---
 
+{{SVGRef}}
+
 {{ PreviousNext("Web/SVG/Tutoriel/Découpages_et_masquages", "Web/SVG/Tutoriel/filtres") }}
 
 En plus des formes graphiques simples comme les rectangles et les cercles, le format SVG permet d'ajouter d'autres types de contenu aux images.

diff --git a/files/fr/web/svg/tutorial/paths/index.md b/files/fr/web/svg/tutorial/paths/index.md
@@ -3,6 +3,8 @@ title: Paths
 slug: Web/SVG/Tutorial/Paths
 ---
 
+{{SVGRef}}
+
 {{ PreviousNext("Web/SVG/Tutoriel/Formes_de_base", "Web/SVG/Tutoriel/Fills_and_Strokes") }}
 
 L'élément [`<path>`](/fr/Web/SVG/Element/path) (_chemin_ en français) est le plus versatile des éléments de la bibliothèque SVG parmi les [formes basiques](/fr/docs/Web/SVG/Tutoriel/Formes_de_base). Vous pouvez l'utiliser pour créer des lignes, des courbes, des arcs et autres.

diff --git a/files/fr/web/svg/tutorial/patterns/index.md b/files/fr/web/svg/tutorial/patterns/index.md
@@ -3,6 +3,8 @@ title: Motifs
 slug: Web/SVG/Tutorial/Patterns
 ---
 
+{{SVGRef}}
+
 {{ PreviousNext("Web/SVG/Tutoriel/Gradients", "Web/SVG/Tutoriel/Texts") }}
 
 Les motifs (_patterns_ en anglais) sont sans aucun doute les types de remplissages les plus complexes à utiliser en SVG. Ce sont également des outils très puissants, ils méritent donc d'être abordés pour que vous en connaissiez les fondamentaux. Comme les dégradés, l'élément {{SVGElement('pattern')}} doit être placé dans la section `<defs>` du fichier SVG.

diff --git a/files/fr/web/svg/tutorial/positions/index.md b/files/fr/web/svg/tutorial/positions/index.md
@@ -3,6 +3,8 @@ title: Positionnement
 slug: Web/SVG/Tutorial/Positions
 ---
 
+{{SVGRef}}
+
 {{ PreviousNext("SVG/Tutoriel/Premiers_pas", "SVG/Tutoriel/Formes_de_base") }}
 
 ### La grille

diff --git a/files/fr/web/svg/tutorial/svg_and_css/index.md b/files/fr/web/svg/tutorial/svg_and_css/index.md
@@ -3,6 +3,10 @@ title: SVG et CSS
 slug: Web/SVG/Tutorial/SVG_and_CSS
 ---
 
+{{SVGRef}}
+
+{{ PreviousNext("Web/SVG/Tutorial/Tools_for_SVG") }}
+
 Cette page illustre l'application de CSS sur des documents [SVG](/fr/docs/Web/SVG), le langage spécialisé dans la création d'éléments graphiques vectoriels.
 
 Nous allons voir par la suite un exemple que vous pourrez copier pour l'exécuter dans votre navigateur (à la condition que celui-ci soit compatible avec SVG).

diff --git a/files/fr/web/svg/tutorial/svg_fonts/index.md b/files/fr/web/svg/tutorial/svg_fonts/index.md
@@ -3,6 +3,8 @@ title: Polices SVG
 slug: Web/SVG/Tutorial/SVG_fonts
 ---
 
+{{SVGRef}}
+
 {{ PreviousNext("Web/SVG/Tutoriel/filtres","Web/SVG/Tutoriel/SVG_Image_Tag") }}
 
 Lorsque SVG a été spécifié, le support des polices d'écriture pour le web n'était pas répandu dans les navigateurs. Comme l'accès au fichier de la police adéquate est cependant crucial pour afficher correctement le texte, une technologie de description des polices a été ajoutée à SVG pour offrir cette capacité. Elle n'a pas été conçue pour la compatibilité avec d'autres formats tels que le PostScript ou OTF, mais plutôt comme un moyen simple d'intégration des informations des glyphes en SVG lors de l'affichage.

diff --git a/files/fr/web/svg/tutorial/svg_image_tag/index.md b/files/fr/web/svg/tutorial/svg_image_tag/index.md
@@ -3,6 +3,8 @@ title: "SVG: Elément image"
 slug: Web/SVG/Tutorial/SVG_Image_Tag
 ---
 
+{{SVGRef}}
+
 {{ PreviousNext("Web/SVG/Tutoriel/polices_SVG", "Web/SVG/Tutoriel/Tools_for_SVG") }}
 
 L'élément SVG {{ SVGElement("image") }} permet d'afficher des images pixélisées au sein d'un objet SVG.

diff --git a/files/fr/web/svg/tutorial/texts/index.md b/files/fr/web/svg/tutorial/texts/index.md
@@ -3,6 +3,8 @@ title: Textes
 slug: Web/SVG/Tutorial/Texts
 ---
 
+{{SVGRef}}
+
 {{PreviousNext("Web/SVG/Tutoriel/Motifs", "Web/SVG/Tutoriel/Transformations_de_base")}}
 
 Lorsqu'on parle de texte en SVG, on doit différencier deux choses pratiquement complètement séparées: 1. l'inclusion et l'affichage de texte dans une image, 2. les polices SVG. Un article séparé sera dédié aux polices SVG, celui-ci se concentrera uniquement sur le fait d'insérer du texte.

diff --git a/files/fr/web/svg/tutorial/tools_for_svg/index.md b/files/fr/web/svg/tutorial/tools_for_svg/index.md
@@ -3,7 +3,9 @@ title: Outils pour SVG
 slug: Web/SVG/Tutorial/Tools_for_SVG
 ---
 
-{{ PreviousNext("Web/SVG/Tutoriel/SVG_Image_Tag") }}
+{{SVGRef}}
+
+{{ PreviousNext("Web/SVG/Tutoriel/SVG_Image_Tag", "Web/SVG/Tutorial/SVG_and_CSS") }}
 
 Maintenant que nous avons vu les notions de base en SVG, nous allons nous intéresser à quelques outils qui permettent d'éditer des fichiers SVG.