From 39f2114f9797eb51994966c6bb8ff1814c9a4da8 Mon Sep 17 00:00:00 2001 From: Florian Merz Date: Thu, 11 Feb 2021 12:36:08 +0100 Subject: unslug fr: move --- .../index.html | 227 ------ .../index.html | 227 ++++++ files/fr/web/svg/compatibility_sources/index.html | 19 + files/fr/web/svg/sources_compatibilite/index.html | 19 - .../web/svg/svg_1.1_support_in_firefox/index.html | 774 +++++++++++++++++++++ files/fr/web/svg/svg_as_an_image/index.html | 74 ++ files/fr/web/svg/svg_en_tant_qu_image/index.html | 74 -- files/fr/web/svg/tutorial/basic_shapes/index.html | 156 +++++ .../svg/tutorial/basic_transformations/index.html | 113 +++ .../svg/tutorial/clipping_and_masking/index.html | 91 +++ .../web/svg/tutorial/fills_and_strokes/index.html | 177 +++++ .../fr/web/svg/tutorial/filter_effects/index.html | 147 ++++ .../fr/web/svg/tutorial/getting_started/index.html | 98 +++ files/fr/web/svg/tutorial/gradients/index.html | 224 ++++++ files/fr/web/svg/tutorial/index.html | 36 + files/fr/web/svg/tutorial/introduction/index.html | 54 ++ .../svg/tutorial/other_content_in_svg/index.html | 36 + files/fr/web/svg/tutorial/paths/index.html | 334 +++++++++ files/fr/web/svg/tutorial/patterns/index.html | 266 +++++++ files/fr/web/svg/tutorial/positions/index.html | 55 ++ files/fr/web/svg/tutorial/svg_and_css/index.html | 198 ++++++ files/fr/web/svg/tutorial/svg_fonts/index.html | 106 +++ files/fr/web/svg/tutorial/svg_image_tag/index.html | 36 + .../tutorial/svg_in_html_introduction/index.html | 87 +++ files/fr/web/svg/tutorial/texts/index.html | 124 ++++ files/fr/web/svg/tutorial/tools_for_svg/index.html | 70 ++ .../svg/tutoriel/contenu_embarque_svg/index.html | 36 - .../d\303\251coupages_et_masquages/index.html" | 91 --- .../web/svg/tutoriel/fills_and_strokes/index.html | 177 ----- files/fr/web/svg/tutoriel/filtres/index.html | 147 ---- .../fr/web/svg/tutoriel/formes_de_base/index.html | 156 ----- files/fr/web/svg/tutoriel/gradients/index.html | 224 ------ files/fr/web/svg/tutoriel/index.html | 36 - files/fr/web/svg/tutoriel/introduction/index.html | 54 -- .../index.html" | 87 --- files/fr/web/svg/tutoriel/motifs/index.html | 266 ------- files/fr/web/svg/tutoriel/paths/index.html | 334 --------- files/fr/web/svg/tutoriel/polices_svg/index.html | 106 --- .../fr/web/svg/tutoriel/positionnement/index.html | 55 -- files/fr/web/svg/tutoriel/premiers_pas/index.html | 98 --- files/fr/web/svg/tutoriel/svg_image_tag/index.html | 36 - files/fr/web/svg/tutoriel/texts/index.html | 124 ---- files/fr/web/svg/tutoriel/tools_for_svg/index.html | 70 -- .../tutoriel/transformations_de_base/index.html | 113 --- 44 files changed, 3502 insertions(+), 2530 deletions(-) delete mode 100644 files/fr/web/svg/application_d_effets_svg_a_du_contenu_html/index.html create mode 100644 files/fr/web/svg/applying_svg_effects_to_html_content/index.html create mode 100644 files/fr/web/svg/compatibility_sources/index.html delete mode 100644 files/fr/web/svg/sources_compatibilite/index.html create mode 100644 files/fr/web/svg/svg_1.1_support_in_firefox/index.html create mode 100644 files/fr/web/svg/svg_as_an_image/index.html delete mode 100644 files/fr/web/svg/svg_en_tant_qu_image/index.html create mode 100644 files/fr/web/svg/tutorial/basic_shapes/index.html create mode 100644 files/fr/web/svg/tutorial/basic_transformations/index.html create mode 100644 files/fr/web/svg/tutorial/clipping_and_masking/index.html create mode 100644 files/fr/web/svg/tutorial/fills_and_strokes/index.html create mode 100644 files/fr/web/svg/tutorial/filter_effects/index.html create mode 100644 files/fr/web/svg/tutorial/getting_started/index.html create mode 100644 files/fr/web/svg/tutorial/gradients/index.html create mode 100644 files/fr/web/svg/tutorial/index.html create mode 100644 files/fr/web/svg/tutorial/introduction/index.html create mode 100644 files/fr/web/svg/tutorial/other_content_in_svg/index.html create mode 100644 files/fr/web/svg/tutorial/paths/index.html create mode 100644 files/fr/web/svg/tutorial/patterns/index.html create mode 100644 files/fr/web/svg/tutorial/positions/index.html create mode 100644 files/fr/web/svg/tutorial/svg_and_css/index.html create mode 100644 files/fr/web/svg/tutorial/svg_fonts/index.html create mode 100644 files/fr/web/svg/tutorial/svg_image_tag/index.html create mode 100644 files/fr/web/svg/tutorial/svg_in_html_introduction/index.html create mode 100644 files/fr/web/svg/tutorial/texts/index.html create mode 100644 files/fr/web/svg/tutorial/tools_for_svg/index.html delete mode 100644 files/fr/web/svg/tutoriel/contenu_embarque_svg/index.html delete mode 100644 "files/fr/web/svg/tutoriel/d\303\251coupages_et_masquages/index.html" delete mode 100644 files/fr/web/svg/tutoriel/fills_and_strokes/index.html delete mode 100644 files/fr/web/svg/tutoriel/filtres/index.html delete mode 100644 files/fr/web/svg/tutoriel/formes_de_base/index.html delete mode 100644 files/fr/web/svg/tutoriel/gradients/index.html delete mode 100644 files/fr/web/svg/tutoriel/index.html delete mode 100644 files/fr/web/svg/tutoriel/introduction/index.html delete mode 100644 "files/fr/web/svg/tutoriel/introduction_\303\240_svg_dans_html/index.html" delete mode 100644 files/fr/web/svg/tutoriel/motifs/index.html delete mode 100644 files/fr/web/svg/tutoriel/paths/index.html delete mode 100644 files/fr/web/svg/tutoriel/polices_svg/index.html delete mode 100644 files/fr/web/svg/tutoriel/positionnement/index.html delete mode 100644 files/fr/web/svg/tutoriel/premiers_pas/index.html delete mode 100644 files/fr/web/svg/tutoriel/svg_image_tag/index.html delete mode 100644 files/fr/web/svg/tutoriel/texts/index.html delete mode 100644 files/fr/web/svg/tutoriel/tools_for_svg/index.html delete mode 100644 files/fr/web/svg/tutoriel/transformations_de_base/index.html (limited to 'files/fr/web/svg') diff --git a/files/fr/web/svg/application_d_effets_svg_a_du_contenu_html/index.html b/files/fr/web/svg/application_d_effets_svg_a_du_contenu_html/index.html deleted file mode 100644 index cb06ea5315..0000000000 --- a/files/fr/web/svg/application_d_effets_svg_a_du_contenu_html/index.html +++ /dev/null @@ -1,227 +0,0 @@ ---- -title: Application d'effets SVG à du contenu HTML -slug: Web/SVG/Application_d_effets_SVG_a_du_contenu_HTML -tags: - - CSS - - Guide - - HTML - - SVG -translation_of: Web/SVG/Applying_SVG_effects_to_HTML_content ---- -

Les navigateurs modernes supportent le format SVG utilisant du 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, clip-path et filter.

- -
Note : Dans des fichiers externes, les références à un SVG doivent être à la même origine que le document de référence.
- -

Utilisation de SVG intégré

- -

Pour appliquer un effet CSS à un SVG, vous devez dans un premier temps créer la feuille CSS qui fait référence au SVG à éditer.

- -
<style>p { mask: url(#my-mask); }</style>
-
- -

Dans l'exemple ci-dessus, tous les paragraphes utilisent un SVG <mask> avec l'ID de my-mask.

- -

Exemple : Application d'un masque

- -

Par exemple, vous pouvez appliquer un dégradé à du contenu HTML à l'intérieur de votre document en utilisant SVG et du code CSS similaire à celui-ci :

- -
<svg height="0">
-  <mask id="mask-1">
-    <linearGradient id="gradient-1" y2="1">
-      <stop stop-color="white" offset="0"/>
-      <stop stop-opacity="0" offset="1"/>
-    </linearGradient>
-    <circle cx="0.25" cy="0.25" r="0.25" id="circle" fill="white"/>
-    <rect x="0.5" y="0.2" width="300" height="100" fill="url(#gradient-1)"/>
-  </mask>
-</svg>
-
- -
.target {
-  mask: url(#mask-1);
-}
-p {
-  width: 300px;
-  border: 1px solid #000;
-  display: inline-block;
-}
- -

Notez que dans ce code CSS, le masque est spécifié à l'aide d'une URL à l'ID #mask-1, qui est l'ID du masque SVG spécifié précédemment. Tout le reste concerne le dégradé.

- -

L'application d'effet SVG à du (X)HTML est réalisé en affectant la classe cible définie ci-dessus à un élément, comme ceci :

- -
<p class="target" style="background:lime;">
-    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt
-    ut labore et dolore magna aliqua. Ut enim ad minim veniam.
-</p>
-<p>
-    Lorem ipsum dolor sit amet, consectetur adipisicing
-    <b class="target">elit, sed do eiusmod tempor incididunt
-    ut labore et dolore magna aliqua.</b>
-    Ut enim ad minim veniam.
-</p>
-
- -

L'exemple ci-dessus serait rendu avec le masque appliqué.

- -

{{EmbedLiveSample('Exemple_Application_d\'un_masque', 650, 200)}}

- -

Exemple : Rogner

- -

Cet exemple montre comment utiliser un SVG pour rogner du contenu HTML. Remarquez que même les zones cliquables (les liens) sont rognées.

- -
<p class="target" style="background:lime;">
-    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt
-    ut labore et dolore magna aliqua. Ut enim ad minim veniam.
-</p>
-<p>
-    Lorem ipsum dolor sit amet, consectetur adipisicing
-    <b class="target">elit, sed do eiusmod tempor incididunt
-    ut labore et dolore magna aliqua.</b>
-    Ut enim ad minim veniam.
-</p>
-
-<button onclick="toggleRadius()">Toggle radius</button>
-
-<svg height="0">
-  <clipPath id="clipping-path-1" clipPathUnits="objectBoundingBox">
-    <circle cx="0.25" cy="0.25" r="0.25" id="circle"/>
-    <rect x="0.5" y="0.2" width="0.5" height="0.8"/>
-  </clipPath>
-</svg>
-
- -
.target {
-  clip-path: url(#clipping-path-1);
-}
-p {
-  width: 300px;
-  border: 1px solid #000;
-  display: inline-block;
-}
- -

Ce code crée une zone cliquable en forme de cercle et de rectangle associé à l'ID #clipping-path-1 qui est référencé dans le CSS. clip-path peut être associé à n'importe quel élément avec la classe target.

- -

Vous pouvez faire des changements en temps réel et vous rendre compte qu'ils affectent immédiatement le rendu HTML. Par exemple, vous pouvez redimensionner le cercle à l'aide du clip-path établi ci-dessus :

- -
function toggleRadius() {
-  var circle = document.getElementById("circle");
-  circle.r.baseVal.value = 0.40 - circle.r.baseVal.value;
-}
-
- -

{{EmbedLiveSample('Exemple_Rogner', 650, 200)}}

- -

Exemple : Filtres

- -

Cet exemple montre comment utiliser des filtres avec un SVG. À l'aide du CSS, nous appliquons plusieurs filtres à trois éléments à la fois dans leur état normal, que quand ils sont survolés par la souris (hover).

- -
<p class="target" style="background: lime;">
-    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt
-    ut labore et dolore magna aliqua. Ut enim ad minim veniam.
-</p>
-<pre class="target">lorem</pre>
-<p>
-    Lorem ipsum dolor sit amet, consectetur adipisicing
-    <b class="target">elit, sed do eiusmod tempor incididunt
-    ut labore et dolore magna aliqua.</b>
-    Ut enim ad minim veniam.
-</p>
-
- -

N'importe quel filtre SVG peut être appliqué de cette façon. Par exemple, pour appliquer un effet de flou, vous pouvez utiliser :

- -
<svg height="0">
-  <filter id="f1">
-    <feGaussianBlur stdDeviation="3"/>
-  </filter>
-</svg>
- -

Vous pouvez aussi appliquer une matrice de transformation des couleurs :

- -
<svg height="0">
-  <filter id="f2">
-    <feColorMatrix values="0.3333 0.3333 0.3333 0 0
-                           0.3333 0.3333 0.3333 0 0
-                           0.3333 0.3333 0.3333 0 0
-                           0      0      0      1 0"/>
-  </filter>
-</svg>
-
- -

Et encore d'autres filtres :

- -
<svg height="0">
-  <filter id="f3">
-    <feConvolveMatrix filterRes="100 100" style="color-interpolation-filters:sRGB"
-      order="3" kernelMatrix="0 -1 0   -1 4 -1   0 -1 0" preserveAlpha="true"/>
-  </filter>
-  <filter id="f4">
-    <feSpecularLighting surfaceScale="5" specularConstant="1"
-                        specularExponent="10" lighting-color="white">
-      <fePointLight x="-5000" y="-10000" z="20000"/>
-    </feSpecularLighting>
-  </filter>
-  <filter id="f5">
-    <feColorMatrix values="1 0 0 0 0
-                           0 1 0 0 0
-                           0 0 1 0 0
-                           0 1 0 0 0" style="color-interpolation-filters:sRGB"/>
-  </filter>
-</svg>
- -

Les cinq filtres sont appliqués en utilisant le CSS suivant :

- -
p.target { filter:url(#f3); }
-p.target:hover { filter:url(#f5); }
-b.target { filter:url(#f1); }
-b.target:hover { filter:url(#f4); }
-pre.target { filter:url(#f2); }
-pre.target:hover { filter:url(#f3); }
-
- -

{{EmbedLiveSample('Exemple_Filtres', 650, 200)}}

- -

View this example live

- -

Exemple : Texte flouté

- -

Pour flouter le texte, Webkit a un filtre CSS (préfixé) appelé blur (voir aussi CSS filter). Vous pouvez obtenir le même effet en utilisant des filtres SVG.

- -
<p class="blur">Time to clean my glasses</p>
-<svg height="0">
-  <defs>
-    <filter id="wherearemyglasses" x="0" y="0">
-    <feGaussianBlur in="SourceGraphic" stdDeviation="1"/>
-    </filter>
-  </defs>
-</svg>
-
- -

Vous pouvez appliquer le filtre SVG et le filtre CSS à la même classe :

- -
.blur { filter: url(#wherearemyglasses); }
- -

{{ EmbedLiveSample('Exemple_Texte_flouté', 300, 100) }}

- -

Le floutage est un calcul assez lourd alors utilisez le avec précaution et faites particulièrement attention aux éléments scrollables ou animés.

- -

Utilisation de références externes

- -

Vous pouvez utiliser des fichiers externes pour rogner ou pour appliquer des masques et des filtres SVG, tant que cette source vient de la même origine que le document HTML auquel il est appliqué.

- -

Par exemple, si votre CSS est un fichier nommé default.css, il pourrait contenir le code ci-dessous :

- -
.target { clip-path: url(resources.svg#c1); }
- -

Le SVG est alors importé depuis un fichier nommé resources.svg, utilisant clip-path avec l'ID c1.

- -

Voir aussi

- - diff --git a/files/fr/web/svg/applying_svg_effects_to_html_content/index.html b/files/fr/web/svg/applying_svg_effects_to_html_content/index.html new file mode 100644 index 0000000000..cb06ea5315 --- /dev/null +++ b/files/fr/web/svg/applying_svg_effects_to_html_content/index.html @@ -0,0 +1,227 @@ +--- +title: Application d'effets SVG à du contenu HTML +slug: Web/SVG/Application_d_effets_SVG_a_du_contenu_HTML +tags: + - CSS + - Guide + - HTML + - SVG +translation_of: Web/SVG/Applying_SVG_effects_to_HTML_content +--- +

Les navigateurs modernes supportent le format SVG utilisant du 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, clip-path et filter.

+ +
Note : Dans des fichiers externes, les références à un SVG doivent être à la même origine que le document de référence.
+ +

Utilisation de SVG intégré

+ +

Pour appliquer un effet CSS à un SVG, vous devez dans un premier temps créer la feuille CSS qui fait référence au SVG à éditer.

+ +
<style>p { mask: url(#my-mask); }</style>
+
+ +

Dans l'exemple ci-dessus, tous les paragraphes utilisent un SVG <mask> avec l'ID de my-mask.

+ +

Exemple : Application d'un masque

+ +

Par exemple, vous pouvez appliquer un dégradé à du contenu HTML à l'intérieur de votre document en utilisant SVG et du code CSS similaire à celui-ci :

+ +
<svg height="0">
+  <mask id="mask-1">
+    <linearGradient id="gradient-1" y2="1">
+      <stop stop-color="white" offset="0"/>
+      <stop stop-opacity="0" offset="1"/>
+    </linearGradient>
+    <circle cx="0.25" cy="0.25" r="0.25" id="circle" fill="white"/>
+    <rect x="0.5" y="0.2" width="300" height="100" fill="url(#gradient-1)"/>
+  </mask>
+</svg>
+
+ +
.target {
+  mask: url(#mask-1);
+}
+p {
+  width: 300px;
+  border: 1px solid #000;
+  display: inline-block;
+}
+ +

Notez que dans ce code CSS, le masque est spécifié à l'aide d'une URL à l'ID #mask-1, qui est l'ID du masque SVG spécifié précédemment. Tout le reste concerne le dégradé.

+ +

L'application d'effet SVG à du (X)HTML est réalisé en affectant la classe cible définie ci-dessus à un élément, comme ceci :

+ +
<p class="target" style="background:lime;">
+    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt
+    ut labore et dolore magna aliqua. Ut enim ad minim veniam.
+</p>
+<p>
+    Lorem ipsum dolor sit amet, consectetur adipisicing
+    <b class="target">elit, sed do eiusmod tempor incididunt
+    ut labore et dolore magna aliqua.</b>
+    Ut enim ad minim veniam.
+</p>
+
+ +

L'exemple ci-dessus serait rendu avec le masque appliqué.

+ +

{{EmbedLiveSample('Exemple_Application_d\'un_masque', 650, 200)}}

+ +

Exemple : Rogner

+ +

Cet exemple montre comment utiliser un SVG pour rogner du contenu HTML. Remarquez que même les zones cliquables (les liens) sont rognées.

+ +
<p class="target" style="background:lime;">
+    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt
+    ut labore et dolore magna aliqua. Ut enim ad minim veniam.
+</p>
+<p>
+    Lorem ipsum dolor sit amet, consectetur adipisicing
+    <b class="target">elit, sed do eiusmod tempor incididunt
+    ut labore et dolore magna aliqua.</b>
+    Ut enim ad minim veniam.
+</p>
+
+<button onclick="toggleRadius()">Toggle radius</button>
+
+<svg height="0">
+  <clipPath id="clipping-path-1" clipPathUnits="objectBoundingBox">
+    <circle cx="0.25" cy="0.25" r="0.25" id="circle"/>
+    <rect x="0.5" y="0.2" width="0.5" height="0.8"/>
+  </clipPath>
+</svg>
+
+ +
.target {
+  clip-path: url(#clipping-path-1);
+}
+p {
+  width: 300px;
+  border: 1px solid #000;
+  display: inline-block;
+}
+ +

Ce code crée une zone cliquable en forme de cercle et de rectangle associé à l'ID #clipping-path-1 qui est référencé dans le CSS. clip-path peut être associé à n'importe quel élément avec la classe target.

+ +

Vous pouvez faire des changements en temps réel et vous rendre compte qu'ils affectent immédiatement le rendu HTML. Par exemple, vous pouvez redimensionner le cercle à l'aide du clip-path établi ci-dessus :

+ +
function toggleRadius() {
+  var circle = document.getElementById("circle");
+  circle.r.baseVal.value = 0.40 - circle.r.baseVal.value;
+}
+
+ +

{{EmbedLiveSample('Exemple_Rogner', 650, 200)}}

+ +

Exemple : Filtres

+ +

Cet exemple montre comment utiliser des filtres avec un SVG. À l'aide du CSS, nous appliquons plusieurs filtres à trois éléments à la fois dans leur état normal, que quand ils sont survolés par la souris (hover).

+ +
<p class="target" style="background: lime;">
+    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt
+    ut labore et dolore magna aliqua. Ut enim ad minim veniam.
+</p>
+<pre class="target">lorem</pre>
+<p>
+    Lorem ipsum dolor sit amet, consectetur adipisicing
+    <b class="target">elit, sed do eiusmod tempor incididunt
+    ut labore et dolore magna aliqua.</b>
+    Ut enim ad minim veniam.
+</p>
+
+ +

N'importe quel filtre SVG peut être appliqué de cette façon. Par exemple, pour appliquer un effet de flou, vous pouvez utiliser :

+ +
<svg height="0">
+  <filter id="f1">
+    <feGaussianBlur stdDeviation="3"/>
+  </filter>
+</svg>
+ +

Vous pouvez aussi appliquer une matrice de transformation des couleurs :

+ +
<svg height="0">
+  <filter id="f2">
+    <feColorMatrix values="0.3333 0.3333 0.3333 0 0
+                           0.3333 0.3333 0.3333 0 0
+                           0.3333 0.3333 0.3333 0 0
+                           0      0      0      1 0"/>
+  </filter>
+</svg>
+
+ +

Et encore d'autres filtres :

+ +
<svg height="0">
+  <filter id="f3">
+    <feConvolveMatrix filterRes="100 100" style="color-interpolation-filters:sRGB"
+      order="3" kernelMatrix="0 -1 0   -1 4 -1   0 -1 0" preserveAlpha="true"/>
+  </filter>
+  <filter id="f4">
+    <feSpecularLighting surfaceScale="5" specularConstant="1"
+                        specularExponent="10" lighting-color="white">
+      <fePointLight x="-5000" y="-10000" z="20000"/>
+    </feSpecularLighting>
+  </filter>
+  <filter id="f5">
+    <feColorMatrix values="1 0 0 0 0
+                           0 1 0 0 0
+                           0 0 1 0 0
+                           0 1 0 0 0" style="color-interpolation-filters:sRGB"/>
+  </filter>
+</svg>
+ +

Les cinq filtres sont appliqués en utilisant le CSS suivant :

+ +
p.target { filter:url(#f3); }
+p.target:hover { filter:url(#f5); }
+b.target { filter:url(#f1); }
+b.target:hover { filter:url(#f4); }
+pre.target { filter:url(#f2); }
+pre.target:hover { filter:url(#f3); }
+
+ +

{{EmbedLiveSample('Exemple_Filtres', 650, 200)}}

+ +

View this example live

+ +

Exemple : Texte flouté

+ +

Pour flouter le texte, Webkit a un filtre CSS (préfixé) appelé blur (voir aussi CSS filter). Vous pouvez obtenir le même effet en utilisant des filtres SVG.

+ +
<p class="blur">Time to clean my glasses</p>
+<svg height="0">
+  <defs>
+    <filter id="wherearemyglasses" x="0" y="0">
+    <feGaussianBlur in="SourceGraphic" stdDeviation="1"/>
+    </filter>
+  </defs>
+</svg>
+
+ +

Vous pouvez appliquer le filtre SVG et le filtre CSS à la même classe :

+ +
.blur { filter: url(#wherearemyglasses); }
+ +

{{ EmbedLiveSample('Exemple_Texte_flouté', 300, 100) }}

+ +

Le floutage est un calcul assez lourd alors utilisez le avec précaution et faites particulièrement attention aux éléments scrollables ou animés.

+ +

Utilisation de références externes

+ +

Vous pouvez utiliser des fichiers externes pour rogner ou pour appliquer des masques et des filtres SVG, tant que cette source vient de la même origine que le document HTML auquel il est appliqué.

+ +

Par exemple, si votre CSS est un fichier nommé default.css, il pourrait contenir le code ci-dessous :

+ +
.target { clip-path: url(resources.svg#c1); }
+ +

Le SVG est alors importé depuis un fichier nommé resources.svg, utilisant clip-path avec l'ID c1.

+ +

Voir aussi

+ + diff --git a/files/fr/web/svg/compatibility_sources/index.html b/files/fr/web/svg/compatibility_sources/index.html new file mode 100644 index 0000000000..49f69f68a7 --- /dev/null +++ b/files/fr/web/svg/compatibility_sources/index.html @@ -0,0 +1,19 @@ +--- +title: Sources des compatibilités +slug: Web/SVG/Sources_compatibilite +tags: + - Compatibilité + - SVG +translation_of: Web/SVG/Compatibility_sources +--- +

Les sources suivantes sont utilisées pour les tableaux de compatibilités des éléments SVG et de leurs attributs :

+ + diff --git a/files/fr/web/svg/sources_compatibilite/index.html b/files/fr/web/svg/sources_compatibilite/index.html deleted file mode 100644 index 49f69f68a7..0000000000 --- a/files/fr/web/svg/sources_compatibilite/index.html +++ /dev/null @@ -1,19 +0,0 @@ ---- -title: Sources des compatibilités -slug: Web/SVG/Sources_compatibilite -tags: - - Compatibilité - - SVG -translation_of: Web/SVG/Compatibility_sources ---- -

Les sources suivantes sont utilisées pour les tableaux de compatibilités des éléments SVG et de leurs attributs :

- - diff --git a/files/fr/web/svg/svg_1.1_support_in_firefox/index.html b/files/fr/web/svg/svg_1.1_support_in_firefox/index.html new file mode 100644 index 0000000000..36e4340b97 --- /dev/null +++ b/files/fr/web/svg/svg_1.1_support_in_firefox/index.html @@ -0,0 +1,774 @@ +--- +title: SVG dans Firefox +slug: SVG_dans_Firefox +tags: + - SVG +translation_of: Web/SVG/SVG_1.1_Support_in_Firefox +--- +

Vous trouverez des exemples simples de syntaxe et d'utilisation de SVG sur la page W3C SVG test suite.

+ +

Statut d'implémentation des éléments

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
ÉlémentNotes
Structure Module
svg +
    +
  • Implémenté.
    • +
  • Les attributs DOM currentScale et currentTranslate sont implémentés, mais il n'y a pas d'interface utilisateur pour se déplacer et zoomer.
    • +
  • SVGSVGElement +
      +
    • Attributs non implémentés : contentScriptType, contentStyleType, viewport, useCurrentView, currentView
      • +
    • Liaisons non implémentées : pauseAnimations, unpauseAnimations, animationsPaused, getCurrentTime, setCurrentTime, getIntersectionList, getEnclosureList, checkIntersection, checkEnclosure, deselectAll,
      • +
    • createSVGAngle (implémenté dans Firefox 2), getElementById
      • +
    +
    • +
+
g +
    +
  • Implémenté.
    • +
+
defs +
    +
  • Implémenté.
    • +
+
desc +
    +
  • Implémenté.
    • +
  • Uniquement stocké dans le DOM, pas d'interface utilisateur.
    • +
+
title +
    +
  • Implémenté.
    • +
+
metadata +
    +
  • Implémenté.
    • +
  • Uniquement stocké dans le DOM, pas d'interface utilisateur.
    • +
+
symbol +
    +
  • Implémenté.
    • +
+
use +
    +
  • Implémenté.
    • +
  • Fonctionne uniquement pour les références internes au document ({{ Bug(269482) }}).
    • +
  • Ne suit pas entièrement les règles de cascade <svg:use> ({{ Bug(265894) }}).
    • +
  • Ne délivre pas les évènements à un arbre SVGElementInstance ({{ Bug(265895) }}).
    • +
+
Conditional Processing Module
switch +
    +
  • Implémenté.
    • +
+
Image Module
image +
    +
  • Implémenté.
    • +
+
Style Module
style +
    +
  • Implémenté.
    • +
+
Shape Module
path +
    +
  • Implémenté.
    • +
  • SVGPathElement Interface +
      +
    • Attributs non implémentés : pathLength, normalizedPathSegList, animatedPathSegList, animatedNormalizedPathSegList
      • +
    • Liaisons non implémentées : getTotalLength,
      • +
    • getPointAtLength (implémenté dans Firefox 2), getPathSegAtLength
      • +
    +
    • +
+
rect +
    +
  • Implémenté.
    • +
+
circle +
    +
  • Implémenté.
    • +
+
line +
    +
  • Implémenté.
    • +
+
ellipse +
    +
  • Implémenté.
    • +
+
polyline +
    +
  • Implémenté.
    • +
+
polygon +
    +
  • Implémenté.
    • +
+
Text Module
text +
    +
  • Implémenté.
    • +
  • SVGTextElement +
      +
    • Attributs non implémentés : rotate, textLength, lengthAdjust
      • +
    • Liaisons non implémentées : getNumberOfChars, getSubStringLength, getStartPositionOfChar, getEndPositionOfChar, getRotationOfChar, getCharNumAtPosition, selectSubString
      • +
    • Liaisons non fonctionnelles au cours de onload : getExtentOfChar
      • +
    +
    • +
+
tspan +
    +
  • Implémenté.
    • +
  • SVGTSpanElement +
      +
    • Attributs non implémentés : rotate, textLength, lengthAdjust
      • +
    • Liaisons non implémentées : getNumberOfChars,
      • +
    • getComputedTextLength (implémenté dans Firefox 2), getSubStringLength, getStartPositionOfChar, getEndPositionOfChar, getExtentOfChar, getRotationOfChar, getCharNumAtPosition, selectSubString
      • +
    +
    • +
+
tref +
    +
  • Cette fonctionnalité se trouvait dans les premiers projets de spec et a été retirée par la suite, elle n'est donc pas implémentée
    • +
+
textPath +
    +
  • Implémenté dans Firefox 2.
    • +
  • Attributs non implémentés : method, spacing, textLength, lengthAdjust
    • +
+
altGlyph +
    +
  • Non implémenté.
    • +
+
altGlyphDef +
    +
  • Non implémenté.
    • +
+
altGlyphItem +
    +
  • Non implémenté.
    • +
+
glyphRef +
    +
  • Non implémenté.
    • +
+
Marker Module
marker +
    +
  • Implémenté.
    • +
+
Color Profile Module
color-profile +
    +
  • Non implémenté.
    • +
+
Gradient Module
linearGradient +
    +
  • Implémenté.
    • +
+
radialGradient +
    +
  • Implémenté.
    • +
+
stop +
    +
  • Implémenté.
    • +
+
Pattern Module
pattern +
    +
  • Implémenté.
    • +
+
Clip Module
clipPath +
    +
  • Implémenté.
    • +
+
Mask Module
mask +
    +
  • Implémenté.
    • +
+
Filter Module
filter +
    +
  • Implémenté.
    • +
+
feBlend +
    +
  • Implémenté.
    • +
+
feColorMatrix +
    +
  • Implémenté.
    • +
+
feComponentTransfer +
    +
  • Implémenté.
    • +
+
feComposite +
    +
  • Implémenté.
    • +
+
feConvolveMatrix +
    +
  • Implémenté.
    • +
+
feDiffuseLighting +
    +
  • Implémenté.
    • +
+
feDisplacementMap +
    +
  • Implémenté.
    • +
+
feFlood +
    +
  • Implémenté.
    • +
+
feGaussianBlur +
    +
  • Implémenté.
    • +
+
feImage +
    +
  • Non implémenté.
    • +
+
feMerge +
    +
  • Implémenté.
    • +
+
feMergeNode +
    +
  • Implémenté.
    • +
+
feMorphology +
    +
  • Implémenté.
    • +
+
feOffset +
    +
  • Implémenté.
    • +
+
feSpecularLighting +
    +
  • Implémenté.
    • +
+
feTile +
    +
  • Implémenté.
    • +
+
feTurbulence +
    +
  • Implémenté.
    • +
+
feDistantLight +
    +
  • Implémenté.
    • +
+
fePointLight +
    +
  • Implémenté.
    • +
+
feSpotLight +
    +
  • Implémenté.
    • +
+
feFuncR +
    +
  • Implémenté.
    • +
+
feFuncG +
    +
  • Implémenté.
    • +
+
feFuncB +
    +
  • Implémenté.
    • +
+
feFuncA +
    +
  • Implémenté.
    • +
+
Cursor Module
cursor +
    +
  • Non implémenté ({{Bug(177193)}}).
    • +
+
Hyperlinking Module
a +
    +
  • Implémenté comme une liaison XBL - l'objet n'est pas du type SVGAElement.
    • +
  • Seuls les attributs xlink:href et xlink:show sont implémentés.
    • +
  • Pour l'attribut target, voir le {{ Bug(300868) }}
    • +
+
View Module
view +
    +
  • Implémenté dans Gecko 15.0 ({{Bug(512525)}}). {{gecko_minversion_inline("15.0")}}.
    • +
+
Scripting Module
script +
    +
  • Implémenté.
    • +
+
Animation Module
animate +
    +
  • Implémenté.
    • +
+
set +
    +
  • Implémenté.
    • +
+
animateMotion +
    +
  • Implémenté.
    • +
+
animateTransform +
    +
  • Implémenté.
    • +
+
animateColor +
    +
  • Non implémenté ({{Bug(436296)}}).
    • +
+
mpath +
    +
  • Implémenté.
    • +
+
Font Module
font +
    +
  • Non implémenté ({{Bug(119490)}}).
    • +
+
font-face +
    +
  • Non implémenté.
    • +
+
glyph +
    +
  • Non implémenté.
    • +
+
missing-glyph +
    +
  • Non implémenté.
    • +
+
hkern +
    +
  • Non implémenté.
    • +
+
vkern +
    +
  • Non implémenté.
    • +
+
font-face-src +
    +
  • Non implémenté.
    • +
+
font-face-uri +
    +
  • Non implémenté.
    • +
+
font-face-format +
    +
  • Non implémenté.
    • +
+
font-face-name +
    +
  • Non implémenté.
    • +
+
definition-src +
    +
  • Non implémenté.
    • +
+
Extensibility Module
foreignObject +
    +
  • Implémenté.
    • +
+
+ +

 

diff --git a/files/fr/web/svg/svg_as_an_image/index.html b/files/fr/web/svg/svg_as_an_image/index.html new file mode 100644 index 0000000000..e7acc660e0 --- /dev/null +++ b/files/fr/web/svg/svg_as_an_image/index.html @@ -0,0 +1,74 @@ +--- +title: SVG en tant qu'image +slug: Web/SVG/SVG_en_tant_qu_image +tags: + - Images + - SVG +translation_of: Web/SVG/SVG_as_an_Image +--- +
{{SVGRef}}
+

Le format SVG peut être utilisé en tant qu'image dans de nombreux contextes. Beaucoup de navigateurs prennent en charge les images au format SVG avec :

+ + + +

Contexte spécifique à Gecko

+ +

De plus, Gecko 2.0 {{geckoRelease("2.0")}} prend en charge l'usage du format SVG dans ces contextes:

+ + + +

Restrictions

+ +

Pour plusieurs raisons, Gecko fixe quelques restrictions sur le format SVG lorsqu'il est utilisé en tant qu'image :

+ + + +

A noter que les restrictions précédentes sont spécifiques à l'usage de SVG en tant qu'image; elles ne s'appliquent pas lorsque le contenu SVG est vu directement, ou lorsque il est embarqué en tant que document via les éléments {{HTMLElement("iframe")}}, {{HTMLElement("object")}}, ou {{HTMLElement("embed")}}

+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName("HTML5 W3C", "embedded-content-0.html#the-img-element", "SVG within <img> element")}}{{Spec2("HTML5 W3C")}}Définit l'usage de SVG dans les éléments {{HTMLElement("img")}}.
{{SpecName("CSS3 Backgrounds", "#the-background-image", "SVG within 'background-image' CSS property")}}{{Spec2("CSS3 Backgrounds")}}Définit l'usage de SVG dans la propriété {{cssxref("background-image")}}.
+ +

 

+ +

Voir aussi

+ +

 

+ + diff --git a/files/fr/web/svg/svg_en_tant_qu_image/index.html b/files/fr/web/svg/svg_en_tant_qu_image/index.html deleted file mode 100644 index e7acc660e0..0000000000 --- a/files/fr/web/svg/svg_en_tant_qu_image/index.html +++ /dev/null @@ -1,74 +0,0 @@ ---- -title: SVG en tant qu'image -slug: Web/SVG/SVG_en_tant_qu_image -tags: - - Images - - SVG -translation_of: Web/SVG/SVG_as_an_Image ---- -
{{SVGRef}}
-

Le format SVG peut être utilisé en tant qu'image dans de nombreux contextes. Beaucoup de navigateurs prennent en charge les images au format SVG avec :

- - - -

Contexte spécifique à Gecko

- -

De plus, Gecko 2.0 {{geckoRelease("2.0")}} prend en charge l'usage du format SVG dans ces contextes:

- - - -

Restrictions

- -

Pour plusieurs raisons, Gecko fixe quelques restrictions sur le format SVG lorsqu'il est utilisé en tant qu'image :

- - - -

A noter que les restrictions précédentes sont spécifiques à l'usage de SVG en tant qu'image; elles ne s'appliquent pas lorsque le contenu SVG est vu directement, ou lorsque il est embarqué en tant que document via les éléments {{HTMLElement("iframe")}}, {{HTMLElement("object")}}, ou {{HTMLElement("embed")}}

- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - -
SpecificationStatusComment
{{SpecName("HTML5 W3C", "embedded-content-0.html#the-img-element", "SVG within <img> element")}}{{Spec2("HTML5 W3C")}}Définit l'usage de SVG dans les éléments {{HTMLElement("img")}}.
{{SpecName("CSS3 Backgrounds", "#the-background-image", "SVG within 'background-image' CSS property")}}{{Spec2("CSS3 Backgrounds")}}Définit l'usage de SVG dans la propriété {{cssxref("background-image")}}.
- -

 

- -

Voir aussi

- -

 

- - diff --git a/files/fr/web/svg/tutorial/basic_shapes/index.html b/files/fr/web/svg/tutorial/basic_shapes/index.html new file mode 100644 index 0000000000..aa75f0c0ed --- /dev/null +++ b/files/fr/web/svg/tutorial/basic_shapes/index.html @@ -0,0 +1,156 @@ +--- +title: Formes de base +slug: Web/SVG/Tutoriel/Formes_de_base +tags: + - SVG +translation_of: Web/SVG/Tutorial/Basic_Shapes +--- +

{{ PreviousNext("SVG/Tutoriel/Positionnement", "Web/SVG/Tutoriel/Paths") }}

+ +

Il existe tout un ensemble de formes de base utilisées pour faire du dessin via SVG. Le but de ces formes 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. 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.

+ +

Ajout de formes

+ +

Pour insérer une forme, vous devez ajouter un élément dans un document. Des éléments différents  correspondent à des formes différentes et ont des attributs différents pour décrire leur taille et leur position. Certaines déclarations sont très fortement redondantes en ce qu'elles peuvent être créées par d'autres formes, mais elles sont toutes là de manière à faciliter votre vie et à rendre le document SVG aussi court et lisible que possible. Toutes les formes de bases sont affichées sur l'image de gauche. Le code pour générer tout cela ressemble à cela :

+ +

+ +
<?xml version="1.0" standalone="no"?>
+<svg width="200" height="250" version="1.1" xmlns="http://www.w3.org/2000/svg">
+
+  <rect x="10" y="10" width="30" height="30" stroke="black" fill="transparent" stroke-width="5"/>
+  <rect x="60" y="10" rx="10" ry="10" width="30" height="30" stroke="black" fill="transparent" stroke-width="5"/>
+
+  <circle cx="25" cy="75" r="20" stroke="red" fill="transparent" stroke-width="5"/>
+  <ellipse cx="75" cy="75" rx="20" ry="5" stroke="red" fill="transparent" stroke-width="5"/>
+
+  <line x1="10" x2="50" y1="110" y2="150" stroke="orange" fill="transparent" stroke-width="5"/>
+  <polyline points="60 110 65 120 70 115 75 130 80 125 85 140 90 135 95 150 100 145"
+      stroke="orange" fill="transparent" stroke-width="5"/>
+
+  <polygon points="50 160 55 180 70 180 60 190 65 205 50 195 35 205 40 190 30 180 45 180"
+      stroke="green" fill="transparent" stroke-width="5"/>
+
+  <path d="M20,230 Q40,205 50,230 T90,230" fill="none" stroke="blue" stroke-width="5"/>
+</svg>
+
+ +
Note : les attributs stroke, stroke-width et fill sont détaillés plus loin dans ce tutoriel.
+ +

Figures de bases

+ +

Rectangles

+ +

L'élément rect, comme son nom ne l'indique peut-être pas, dessine à l'écran des rectangles. Il existe 6 attributs de base qui contrôlent la position et la forme du rectangle dessiné ici. L'image précédente affichait 2 rectangles, ce qui est un peu répétitif. Celui de droite possède des attributs rx et ry définis, ce qui lui donne des coins arrondis. Si ces attributs ne sont pas définis, leur valeur par défaut est de 0, ce qui a pour résultats d'afficher un rectangle avec des angles droits.

+ +
 <rect x="10" y="10" width="30" height="30"/>
+ <rect x="60" y="10" rx="10" ry="10" width="30" height="30"/>
+
+ +
+
x
+
Position du rectangle sur l'axe horizontal par rapport au coin supérieur gauche.
+
y
+
Position du rectangle sur l'axe vertical par rapport au coin supérieur gauche.
+
width
+
Largeur du rectangle.
+
height
+
Hauteur du rectangle.
+
rx
+
Rayon x des coins du rectangle.
+
ry
+
Rayon y des coins du rectangle.
+
+ +

Cercles

+ +

De la même manière, il est facile de deviner la fonction de l'élément circle. Il dessine à l'écran un cercle. Seuls 3 attributs peuvent être définis pour cet élément.

+ +
 <circle cx="25" cy="75" r="20"/>
+
+ +
+
r
+
Rayon du cercle.
+
cx
+
Position x du centre du cercle.
+
cy
+
Position y du centre du cercle.
+
+ +

Ellipses

+ +

Les ellipses sont juste des sortes de cercles bien particuliers, où l'on peut modifier les rayons x et y séparemment l'un de l'autre (les matheux appellent ces rayons le grand axe et le petit axe).

+ +
 <ellipse cx="75" cy="75" rx="20" ry="5"/>
+
+ +
+
rx
+
Rayon x de l'ellipse.
+
ry
+
Rayon y de l'ellipse.
+
cx
+
Position x du centre de l'ellipse.
+
cy
+
Position y du centre de l'ellipse.
+
+ +

Figures complexes

+ +

Lignes

+ +

Les lignes droites permettent de créer des figures plus complexes, en les additionnant les unes avec les autres. L'élément line en SVG correspond au segment que l'on apprend en géométrie traditionnelle : c'est une portion de droite délimitée par 2 points. Donc pour définir une droite en SVG, il va falloir lui donner pour attribut les coordonnées des deux points qui la définissent.

+ +
 <line x1="10" x2="50" y1="110" y2="150"/>
+
+ +
+
x1
+
Position x du premier point.
+
x2
+
Position x du deuxième point.
+
y1
+
Position y du premier point.
+
y2
+
Position y du deuxième point.
+
+ +

Lignes brisées

+ +

Les lignes brisées, aussi appelées lignes polygonales, sont définies par l'élément polyline en SVG. Elles sont constituées d'un ensemble de lignes droites connectées entre elles, donc d'un ensemble de points se reliant entre eux suivant un ordre défini. Comme ce lot de points peut être assez conséquent à déclarer, un seul attribut est utilisé pour déclarer l'ensemble de points :

+ +
 <polyline points="60 110, 65 120, 70 115, 75 130, 80 125, 85 140, 90 135, 95 150, 100 145"/>
+
+ +
+
points
+
Liste des points, chaque pair de nombres correspondant aux coordonnées x et y de chaque point. Chaque position x est séparée de la position y par un espace. Chaque ensemble de coordonnées est séparé du suivant par une virgule.
+
+ +

Polygones

+ +

Le polygone fonctionne exactement de la même manière que la ligne brisée. Au final, un polygone n'est rien d'autre qu'une ligne brisée qui relie une série de points. Toutefois, pour les polygones, le chemin de cette ligne retourne automatiquement au point de départ, créant ainsi une forme fermée. Il est à noter que le rectangle est un type de polygone particulier. Il est donc possible, pour des besoins de flexibilité, de déclarer un rectangle en utilisant l'élément polygon.

+ +
<polygon points="50 160, 55 180, 70 180, 60 190, 65 205, 50 195, 35 205, 40 190, 30 180, 45 180"/>
+ +
+
points
+
Idem que l'attribut points de l'élément polyline. Liste des points, chaque paire de nombres correspondant aux coordonnées x et y de chaque point. Chaque position x est séparée de la position y par un espace, chaque ensemble de coordonnées est séparé du suivant par une virgule. Une dernière ligne ferme automatiquement la forme en retournant au point de départ.
+
+ +

Chemins

+ +

L'élément pour tracer les chemins, très logiquement nommé path, est sûrement la forme la plus généraliste qui peut être utilisée en SVG. Avec un élément path, vous pouvez dessiner un rectangle (avec ou sans coins arrondis), des cercles, des ellipses, des lignes brisées et des polygones. De manière plus basique, il est aussi possible de dessiner d'autres types de formes, comme des courbes de Bézier, des paraboles, et bien plus encore. Pour cette raison, l'élément path en lui même sera un chapitre entier de ce tutoriel, mais pour le moment, nous allons juste voir comment définir cet élément.

+ +
 <path d="M 20 230 Q 40 205, 50 230 T 90230"/>
+
+ +
+
d
+
Un ensemble d'information définissant le chemin à dessiner. Pour en savoir plus, allez à la page à propos des Chemins.
+
+ +

{{ PreviousNext("SVG/Tutoriel/Positionnement", "Web/SVG/Tutoriel/Paths") }}

+ +

Interwiki Languages Links

diff --git a/files/fr/web/svg/tutorial/basic_transformations/index.html b/files/fr/web/svg/tutorial/basic_transformations/index.html new file mode 100644 index 0000000000..2015cab83c --- /dev/null +++ b/files/fr/web/svg/tutorial/basic_transformations/index.html @@ -0,0 +1,113 @@ +--- +title: Transformations de base +slug: Web/SVG/Tutoriel/Transformations_de_base +tags: + - Intermediate + - SVG + - 'SVG:Tutoriel' +translation_of: Web/SVG/Tutorial/Basic_Transformations +--- +

{{ 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 :

+ +
+
<svg width="30" height="10">
+    <g fill="red">
+        <rect x="0" y="0" width="10" height="10" />
+        <rect x="20" y="0" width="10" height="10" />
+    </g>
+</svg>
+
+ +

{{ EmbedLiveSample('two_blocks', '30', '10') }}

+ +

Toutes les transformations suivantes sont résumées dans l'attribut transform de l'élément. Les transformations peuvent être mises les unes à la suite des autres, tout simplement en les écrivant toutes dans cet attribut, séparées par des espaces.

+ +

Translation

+ +

Il peut être nécessaire de décaler un élément, même s'il est possible de définir sa position dans ses attributs. Pour ce faire, la fonction translate() est parfaite.

+ +
<svg width="40" height="50" style="background-color:#bff;">
+    <rect x="0" y="0" width="10" height="10" transform="translate(30,40)" />
+</svg>
+ +

Cet exemple a pour résultat un rectangle, qui est déplacé du point (0,0) au point (30,40).

+ +

{{ EmbedLiveSample('Translation', '40', '50') }}

+ +

Si la deuxième valeur de translate() n'est pas définie, elle sera pas défaut assignée à 0.

+ +

Rotation

+ +

Appliquer une rotation à un élément est assez simple : il suffit d'utiliser la fonction rotate().

+ +
<svg width="31" height="31">
+    <rect x="12" y="-10" width="20" height="20" transform="rotate(45)" />
+</svg>
+ +

Cet exemple montre un carré pivoté de 45°. La valeur de la rotation doit être définie en degrés.

+ +

{{ EmbedLiveSample('Rotation', '31', '31') }}

+ +

Transformations multiples

+ +

Les transformations peuvent être concaténées, séparées par des espaces. Par exemple, translate() et rotate() sont couramment utilisées ensemble:

+ +
<svg width="40" height="50" style="background-color:#bff;">
+    <rect x="0" y="0" width="10" height="10" transform="translate(30,40) rotate(45)" />
+</svg>
+ +

{{ EmbedLiveSample('Transformations_multiples', '40', '50') }}

+ +

Cet exemple montre un carré déplacé et pivoté de 45 degrés.

+ +

Déformation

+ +

Pour transformer un rectangle en un losange, vous pouvez utiliser les fonctions skewX() et skewY(). Chacun prend pour attribut un angle qui détermine le biais de l'élément transformé.

+ +

Agrandissement et réduction

+ +

scale() modifie la taille d'un élément. Cette fonction prend en paramètre 2 valeurs de transformation, la première pour celle des X et la deuxième pour celle des Y. Ces valeurs sont écrites sous forme de ratio : 0.5 correspond à une réduction à 50%, 1.5 à une augmentation de 50%. Attention, c'est le système de chiffre anglo-saxon qui est ici utilisé, il faut donc déclarer un nombre réel en utilisant un point et non une virgule. Si la deuxième valeur n'est pas déclarée, elle est considérée par défaut comme égale à la première.

+ +

Transformations complexes avec matrice

+ +

Toutes les transformations détaillées ci-dessous peuvent être décrites dans une matrice de passage 3 par 3. Il est alors possible de combiner plusieurs transformations en appliquant directement la matrice de transformation matrix(a, b, c, d, e, f) qui mappe les coordonnées d'un système de coordonnées précédent en un nouveau système de coordonnées par

+ +

{xnewCoordSys=axprevCoordSys+cyprevCoordSys+eynewCoordSys=bxprevCoordSys+dyprevCoordSys+f\left\{ \begin{matrix} x_{\mathrm{prevCoordSys}} = a x_{\mathrm{newCoordSys}} + c y_{\mathrm{newCoordSys}} + e \\ y_{\mathrm{prevCoordSys}} = b x_{\mathrm{newCoordSys}} + d y_{\mathrm{newCoordSys}} + f \end{matrix} \right.

+ +

Voici un exemple concret sur la documentation de transformation SVG. Pour plus de renseignements, veuillez vous référer à la page de recommandation SVG.

+ +

Effets sur les systèmes de coordonnées

+ +

Quand vous utilisez une transformation, vous définissez un nouveau système de coordonnées dans l'élément que vous transformez. Cela signifie que vous appliquez la transformation à tous les attributs de l'élément transformé et donc que cet élément n'est plus dans une carte de pixel d'échelle 1:1. Cette carte est également déplacée, déformée, agrandie ou réduite selon la transformation qui lui est appliquée.

+ +
<svg width="100" height="100">
+  <g transform="scale(2)">
+    <rect width="50" height="50" />
+  </g>
+</svg>
+
+ +

Cet exemple aura pour résultat un rectangle de 100 par 100 pixels. Les effets les plus étonnants apparaissent lorsque vous utilisez des attributs tels que userSpaceOnUse.

+ +

{{ EmbedLiveSample('Effets_sur_les_systèmes_de_coordonnées', '100', '100') }}

+ +

Embarquer du SVG dans SVG

+ +

Par opposition au HTML, le SVG peut embarquer d'autres éléments svg déclarés de manière tout à fait transparente. De cette façon, vous pouvez très simplement créer de nouveaux systèmes de coordonnées en utilisant viewBox, width et height de l'élément svg.

+ +
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
+  <svg width="100" height="100" viewBox="0 0 50 50">
+    <rect width="50" height="50" />
+  </svg>
+</svg>
+
+ +

Cet exemple a le même effet que celui vu précédemment, soit un rectangle deux fois plus grand que ce qu'il est défini.

+ +

{{ EmbedLiveSample('Embarquer_du_SVG_dans_SVG', '100', '100') }}

+ +

{{ PreviousNext("Web/SVG/Tutoriel/Texts", "Web/SVG/Tutoriel/Découpages_et_masquages") }}

+ +

Interwiki Languages Links

diff --git a/files/fr/web/svg/tutorial/clipping_and_masking/index.html b/files/fr/web/svg/tutorial/clipping_and_masking/index.html new file mode 100644 index 0000000000..a4dd82b1dc --- /dev/null +++ b/files/fr/web/svg/tutorial/clipping_and_masking/index.html @@ -0,0 +1,91 @@ +--- +title: Découpages et masquages +slug: Web/SVG/Tutoriel/Découpages_et_masquages +tags: + - SVG + - 'SVG:Tutoriel' +translation_of: Web/SVG/Tutorial/Clipping_and_masking +--- +

{{ 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.

+ +

Le découpage (clipping) correspond au fait d'enlever des morceaux d'élément. Dans ce cas là, les effets de transparence ne sont pas permis, il s'agit d'une approche du tout-ou-rien.

+ +

D'un autre côté, le masquage (masking) permet plus de souplesse en prenant en compte la transparence et les niveaux de gris.

+ +

Découper

+ +

Pour créer un demi-cercle, on définit d'abord un élément circle:

+ +
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+  <defs>
+    <clipPath id="cut-off-bottom">
+      <rect x="0" y="0" width="200" height="100" />
+    </clipPath>
+  </defs>
+
+  <circle cx="100" cy="100" r="100" clip-path="url(#cut-off-bottom)" />
+</svg>
+
+ +

On dessine ici un cercle d'un rayon de 100 pixels, dont le centre est placé au point (100,100). L'attribut clip-path fait référence à l'élément clipPath définit plus haut, qui est généralement placé dans la section defs.

+ +

L'élément clipPath contient un simple rectangle qui, seul, remplirait en noir la moitié supérieur du canvas. Le rectangle ne sera pas dessiné, parce qu'il est définit dans un élément clipPath, il a pour effet de déterminer quels pixels seront affichés ou non dans le dessin final. Le rectangle ne couvrant que la partie supérieure du cercle, la partie inférieure du cercle ne sera pas affichée:

+ +

{{ EmbedLiveSample('Découper','240','240','/files/3224/clipdemo.png') }}

+ +

Nous avons maintenant un demi-cercle, sans avoir à passer par un arc dans un élément path. Pour le découpage, chaque forme à l'intérieur de clipPath est inspecté et évalué avec ses propriétés et ses transformations. Chaque zone transparente dans clipPath aura pour effet de masquer le contenu. La couleur, l'opacité et autres n'ont pas d'effet tant qu'ils ne rendent pas les formes complètement transparentes.

+ +

Masquage

+ +

Le masquage, contrairement au découpage permet de travailler avec des gradients. Si vous voulez qu'un élément disparaisse progressivement, vous y parviendrez en utiilisant des masques.

+ +
<svg width="200" height="200" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+  <defs>
+    <linearGradient id="Gradient">
+      <stop offset="0" stop-color="white" stop-opacity="0" />
+      <stop offset="1" stop-color="white" stop-opacity="1" />
+    </linearGradient>
+    <mask id="Mask">
+      <rect x="0" y="0" width="200" height="200" fill="url(#Gradient)"  />
+    </mask>
+  </defs>
+
+  <rect x="0" y="0" width="200" height="200" fill="green" />
+  <rect x="0" y="0" width="200" height="200" fill="red" mask="url(#Mask)" />
+</svg>
+
+ +

Vous pouvez voir qu'on a définit un rectangle vert en-dessous d'un rectangle rouge. Ce dernier a un attribut mask qui pointe vers le masque situé dans les définitions. Le contenu du masque est un simple élément rect, qui est rempli d'un gradient transparent-vers-blanc. Les pixels du rectangle rouge héritent de la valeur alpha (la transparence) du contenu du masque, si bien que le rectangle rouge est progressivement masqué et laisse voir le rectangle vert en-dessous:

+ +

{{ EmbedLiveSample('Masquage','240','240','/files/3234/maskdemo.png') }}

+ +

Transparence avec opacity

+ +

Pour définir la transparence d'un élément entier, on peut utiliser l'attribut opacity:

+ +
<rect x="0" y="0" width="100" height="100" opacity=".5" />
+
+ +

Le rectangle ci-dessus sera dessiné semi-transparent.

+ +

On peut également utiliser deux attributs distincts pour le remplissage et le contour: fill-opacity et stroke-opacity, pour contrôler l'opacité des propriétés fill et stroke respecitvement. Notez que le contour est dessiné au-dessus du remplissage. Ainsi, si vous rendez le contour semi-transparent et non le remplissage, celui-ci sera visible à travers le contour:

+ +
<svg width="200" height="200" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+  <rect x="0" y="0" width="200" height="200" fill="blue" />
+  <circle cx="100" cy="100" r="50" stroke="yellow" stroke-width="40" stroke-opacity=".5" fill="red" />
+</svg>
+
+ +

{{ EmbedLiveSample('Transparence_avec_opacity','240','240','/files/3231/opacitydemo.png') }}

+ +

Vous pouvez voir dans cet exemple un cercle rouge sur un fond bleu. Le contour jaune a une opacité de 50%, si bien qu'on se retrouve avec une partie du remplissage en orange.

+ +

Utilisation de techniques CSS bien connues

+ +

Un des outils les plus puissants parmis l'arsenal du développeur web est display: none. Il n'est donc pas étonnant qu'il ait été décidé que cette propriété CSS serait également intégrée à SVG, de même que visibility et clip définis en CSS 2. Pour ré-afficher un élément précédemment caché avec display: none il est important de savoir que la valeur initiale des éléments SVG est inline.

+ +

{{ PreviousNext("SVG/Tutoriel/Transformations_de_base", "Web/SVG/Tutoriel/Contenu_embarque_SVG") }}

+ +

{{ languages( { "en": "en/SVG/Tutorial/Clipping_and_masking" } ) }}

diff --git a/files/fr/web/svg/tutorial/fills_and_strokes/index.html b/files/fr/web/svg/tutorial/fills_and_strokes/index.html new file mode 100644 index 0000000000..54e0d792e2 --- /dev/null +++ b/files/fr/web/svg/tutorial/fills_and_strokes/index.html @@ -0,0 +1,177 @@ +--- +title: Remplissages et contours +slug: Web/SVG/Tutoriel/Fills_and_Strokes +tags: + - SVG + - 'SVG:Tutoriel' +translation_of: Web/SVG/Tutorial/Fills_and_Strokes +--- +

{{ 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.

+ +

Attributs Fill et Stroke

+ +

Colorer

+ +

La coloration peut être faite en définissant deux attributs sur l'objet: fill et stroke. Fill définit la couleur de remplissage et stroke définit la couleur de la bordure. Vous pouvez utiliser la même convention de nommage des couleurs que CSS, que ce soit les noms (comme red), les valeurs rgb (comme rgb(255,0,0)), les valeurs hexadécimales, rgba, etc.

+ +
<rect x="10" y="10" width="100" height="100"
+       stroke="blue" fill="purple"
+       stroke-opacity="0.8" fill-opacity="0.5"/>
+
+ +

De plus, vous pouvez spécifier l'opacité de fill et/ou stroke. Celle-ci est contrôlé par les attributs fill-opacity et stroke-opacity respectivement.

+ +
Note: Dans Firefox 3+, les valeurs rgba sont autorisés, ce qui donne le même effet qu'utiliser les attributs d'opacité. En revanche, pour être compatible avec les autres navigateurs, il est souvent préférable de spécifier fill/stoke-opacity séparemment. Si vous spécifiez à la fois une valeur rgba et fill/stoke-opacity, les deux seront appliquées.
+ +

Options du contour

+ +

Outre les propriétés de couleur, il existe quelques attributs additionnels pour contrôler la manière dont le contour est dessiné.

+ +

stroke-width

+ +

La propriété stroke-width définit la taille du contour. La ligne du contour est centrée autour du remplissage (si le contour vaut 10, 5 pixels du contour chevauchent le remplissage).

+ +

stroke-linecap

+ +

Le second attribut affectant le contour est la propriété stroke-linecap. Elle contrôle la forme des fins de ligne. Dans l'image ci-dessous, le chemin est dessiné en rose et le contour en noir.

+ +

+ +
<svg width="160" height="140" xmlns="http://www.w3.org/2000/svg" version="1.1">
+  <line x1="40" x2="120" y1="20" y2="20"
+        stroke-linecap="butt" stroke="black" stroke-width="20"/>
+  <line x1="40" x2="120" y1="60" y2="60"
+        stroke-linecap="square" stroke="black" stroke-width="20"/>
+  <line x1="40" x2="120" y1="100" y2="100"
+        stroke-linecap="round" stroke="black" stroke-width="20"/>
+</svg>
+ +

{{ EmbedLiveSample('stroke-linecap', '220', '150') }}

+ +

Il y a trois valeurs possibles pour stroke-linecap:

+ + + +

stroke-linejoin

+ +

La propriété stroke-linejoin permet de contrôler la manière de dessiner la liaison entre deux segments de ligne.

+ +

+ +
<svg width="160" height="280" xmlns="http://www.w3.org/2000/svg" version="1.1">
+  <polyline points="40 60 80 20 120 60" stroke="black" stroke-width="20"
+      stroke-linecap="butt" fill="none" stroke-linejoin="miter"/>
+
+  <polyline points="40 140 80 100 120 140" stroke="black" stroke-width="20"
+      stroke-linecap="round" fill="none" stroke-linejoin="round"/>
+
+  <polyline points="40 220 80 180 120 220" stroke="black" stroke-width="20"
+      stroke-linecap="square" fill="none" stroke-linejoin="bevel"/>
+</svg>
+ +

{{ EmbedLiveSample('stroke-linejoin', '220', '150') }}

+ +

Chacune des ces polylignes est composée de deux segments de lignes. La liaison entre les deux est contrôlée par l'attribut stroke-linejoin. Il y a trois valeurs possibles pour cet attribut:

+ + + +

stroke-dasharray

+ +

Finalement, vous pouvez également créer des lignes pointillées en spécifiant l'attribut stroke-dasharray.

+ +

+ +
<svg width="200" height="150" xmlns="http://www.w3.org/2000/svg" version="1.1">
+  <path d="M 10 75 Q 50 10 100 75 T 190 75" stroke="black"
+    stroke-linecap="round" stroke-dasharray="5,10,5" fill="none"/>
+  <path d="M 10 75 L 190 75" stroke="red"
+    stroke-linecap="round" stroke-width="1" stroke-dasharray="5,5" fill="none"/>
+</svg>
+ +

{{ EmbedLiveSample('stroke-dasharray', '220', '150') }}

+ +

L'attribut stroke-dasharray prend une série de nombres séparés par une virgule en argument. 

+ +
+

Note: Contrairement aux paths, ces nombres doivent être séparés par des virgules (les espaces sont ignorés).

+
+ +

Le premier nombre spécifie la distance du trait et le second la distance de l'espace. Dans l'exemple précédent, la ligne rouge commence par un trait de 5 suivit d'un espace de 5 (5,5), motif qui se répète sur le reste de la ligne. Vous pouvez spécifier davantage de nombres pour créer un motif de pointillés plus complexe. Pour la ligne noire on a spécifié trois nombres (5,10,5), ce qui a pour effet d'alterner le motif: (5 trait, 10 espace, 5 trait), (5 espace, 10 trait, 5 espace), etc.

+ +

Autres

+ +

Il existe d'autres propriétés disponibles:

+ + + +

Utiliser CSS

+ +

En plus de définir des attributs sur des objets, vous pouvez également utiliser CSS pour styliser les remplissages et les contours. Tous les attributs ne peuvent pas être définis via CSS. Ceux qui traitent le remplissage et le contour le sont généralement, fill, stroke, stroke-dasharray, etc... peuvent donc être définis de cette manière. Les attributs tels que width, height, ou les commandes des paths, ne peuvent pas être définis par CSS. Le plus simple est de tester pour découvrir ce qui est disponible et ce qui ne l'est pas.

+ +
Note: La spécification SVG décide strictement entre les attributs qui sont des propriétés et les autres. Les premiers peuvent être modifiés avec CSS, les derniers non.
+ +

En ligne

+ +

CSS peut être inséré en ligne avec l'élément via l'attribut style:

+ +
 <rect x="10" height="180" y="10" width="180" style="stroke: black; fill: red;"/>
+
+ +

Dans un section style

+ +

Sinon, il peut être déplacé vers une section style. Au lieu de l'insérer dans une section <head> comme vous le feriez en HTML, on la place dans la zone <defs> du SVG. <defs> (abbréviation de definitions) est l'endroit où vous placez les éléments qui n'apparaissent pas dans le SVG directement, mais qui sont utilisés par les autres éléments.

+ +
<?xml version="1.0" standalone="no"?>
+<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg" version="1.1">
+  <defs>
+    <style type="text/css"><![CDATA[
+       #MyRect {
+         stroke: black;
+         fill: red;
+       }
+    ]]></style>
+  </defs>
+  <rect x="10" height="180" y="10" width="180" id="MyRect"/>
+</svg>
+ +

Déplacer les styles dans une zone comme ceci peut rendre les choses plus simples pour ajuster les propriétés d'un grand nombre d'éléments. Vous pouvez également utiliser les pseudo-classes comme hover pour créer des effets:

+ +
 #MyRect:hover {
+   stroke: black;
+   fill: blue;
+ }
+
+ +

Dans un fichier externe

+ +

Ou vous pouvez spécifier une feuille de style externe pour vos règles CSS avec la syntaxe XML pour les stylesheets:

+ +
<?xml version="1.0" standalone="no"?>
+<?xml-stylesheet type="text/css" href="style.css"?>
+
+<svg width="200" height="150" xmlns="http://www.w3.org/2000/svg" version="1.1">
+  <rect height="10" width="10" id="MyRect"/>
+</svg>
+ +

où style.css ressemble à ça:

+ +
#MyRect {
+  fill: red;
+  stroke: black;
+}
+ +

{{ PreviousNext("Web/SVG/Tutoriel/Paths", "Web/SVG/Tutoriel/Gradients") }}

diff --git a/files/fr/web/svg/tutorial/filter_effects/index.html b/files/fr/web/svg/tutorial/filter_effects/index.html new file mode 100644 index 0000000000..b0f988398a --- /dev/null +++ b/files/fr/web/svg/tutorial/filter_effects/index.html @@ -0,0 +1,147 @@ +--- +title: Filtres +slug: Web/SVG/Tutoriel/filtres +tags: + - SVG + - 'SVG:Tutoriel' +translation_of: Web/SVG/Tutorial/Filter_effects +--- +

{{ 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.

+ +

Un exemple de base consiste à ajouter un effet de flou au contenu du SVG. Bien que des effets de flou simples peuvent être obtenus avec les gradients, le filtre est nécessaire pour quelque chose de plus complexe.

+ +

Exemple

+ +

Les filtres sont définis par l'élément {{SVGElement('filter')}}, qui doit ête placé dans la section <defs> de votre fichier SVG. Entre les balises du filtre, se placent une liste de primitives, des opérations basiques qui s'ajoutent aux opérations précédentes (tel que du flou, de la lumière, etc). Pour appliquer le filtre créé sur un élément graphique, on définit l'attribut {{SVGAttr('filter')}}.

+ +
<svg width="250" viewBox="0 0 200 85"
+     xmlns="http://www.w3.org/2000/svg" version="1.1">
+  <defs>
+    <!-- Déclaration du filtre -->
+    <filter id="MyFilter" filterUnits="userSpaceOnUse"
+            x="0" y="0"
+            width="200" height="120">
+
+      <!-- offsetBlur -->
+      <feGaussianBlur in="SourceAlpha" stdDeviation="4" result="blur"/>
+      <feOffset in="blur" dx="4" dy="4" result="offsetBlur"/>
+
+      <!-- litPaint -->
+      <feSpecularLighting in="blur" surfaceScale="5" specularConstant=".75"
+                          specularExponent="20" lighting-color="#bbbbbb"
+                          result="specOut">
+        <fePointLight x="-5000" y="-10000" z="20000"/>
+      </feSpecularLighting>
+      <feComposite in="specOut" in2="SourceAlpha" operator="in" result="specOut"/>
+      <feComposite in="SourceGraphic" in2="specOut" operator="arithmetic"
+                   k1="0" k2="1" k3="1" k4="0" result="litPaint"/>
+
+      <!-- fusionne offsetBlur + litPaint -->
+      <feMerge>
+        <feMergeNode in="offsetBlur"/>
+        <feMergeNode in="litPaint"/>
+      </feMerge>
+    </filter>
+  </defs>
+
+  <!-- Éléments graphiques -->
+  <g filter="url(#MyFilter)">
+      <path fill="none" stroke="#D90000" stroke-width="10"
+            d="M50,66 c-50,0 -50,-60 0,-60 h100 c50,0 50,60 0,60z" />
+      <path fill="#D90000"
+            d="M60,56 c-30,0 -30,-40 0,-40 h80 c30,0 30,40 0,40z" />
+      <g fill="#FFFFFF" stroke="black" font-size="45" font-family="Verdana" >
+        <text x="52" y="52">SVG</text>
+      </g>
+  </g>
+</svg>
+
+ +

{{ EmbedLiveSample('Exemple', '100%', 120) }}

+ +

Étape 1

+ +
<feGaussianBlur in="SourceAlpha"
+                stdDeviation="4"
+                result="blur"/>
+ +

{{SVGElement('feGaussianBlur')}} prend en entrée (in) "SourceAlpha", qui est la couche alpha de l'élément source, applique un flou de 4, et stocke le résultat (result) dans un buffer temporaire nommé "blur".

+ +

Étape 2

+ +
<feOffset in="blur"
+          dx="4" dy="4"
+          result="offsetBlur"/>
+ +

{{SVGElement('feOffset')}} prend en entrée (in) "blur", qu'on a crée précedemment, le décale de 4 vers la droite et 4 vers le bas, et stocke le résultat (result) dans le buffer "offsetBlur". Les deux premières primitives viennent de créer une ombre portée.

+ +

Étape 3

+ +
<feSpecularLighting in="blur"
+                    surfaceScale="5" specularConstant=".75"
+                    specularExponent="20" lighting-color="#bbbbbb"
+                    result="specOut">
+  <fePointLight x="-5000" y="-10000" z="20000"/>
+</feSpecularLighting>
+ +

{{SVGelement('feSpecularLighting')}} prend en entrée (in) "blur", génère un effet d'éclairage, et stocke le résultat (result) dans le buffer "specOut".

+ +

Étape 4

+ +
<feComposite in="specOut" in2="SourceAlpha"
+             operator="in"
+             result="specOut"/>
+ +

Le premier {{SVGElement('feComposite')}} prend en entrée (in, in2) "specOut" et "SourceAlpha", masque le résultat de "specOut" de telle sorte qu'il ne soit pas plus grand que "SourceAlpha" (l'élément graphique d'origine), et remplace le résultat (result) "specOut".

+ +

Étape 5

+ +
<feComposite in="SourceGraphic" in2="specOut"
+             operator="arithmetic"
+             k1="0" k2="1" k3="1" k4="0"
+             result="litPaint"/>
+ +

Le second {{SVGElement('feComposite')}} prend en entrée (in, in2) "SourceAlpha" et "specOut", ajoute le résultat "specOut" au-dessus de "SourceAlpha", et stocke le résultat (result) dans "litPaint".

+ +

Étape 6

+ +
<feMerge>
+  <feMergeNode in="offsetBlur"/>
+  <feMergeNode in="litPaint"/>
+</feMerge>
+ +

Finalement, {{SVGElement('feMerge')}} fusionne ensemble "offsetBlur", qui est l'ombre portée, et "litPaint", qui est l'élément d'origine avec l'effet d'éclairage.

+ +
+
Source graphic +

Élément d'origine

+
+ +
Primitive 1 +

Primitive 1

+
+ +
Primitive 2 +

Primitive 2

+
+ +
Primitive 3 +

Primitive 3

+
+ +
Primitive 4 +

Primitive 4

+
+ +
Primitive 5 +

Primitive 5

+
+ +
Primitive 6 +

Primitive 6

+
+
+ +

{{ PreviousNext("Web/SVG/Tutoriel/Contenu_embarque_SVG", "Web/SVG/Tutoriel/polices_SVG") }}

diff --git a/files/fr/web/svg/tutorial/getting_started/index.html b/files/fr/web/svg/tutorial/getting_started/index.html new file mode 100644 index 0000000000..83dee73b6c --- /dev/null +++ b/files/fr/web/svg/tutorial/getting_started/index.html @@ -0,0 +1,98 @@ +--- +title: Premiers pas +slug: Web/SVG/Tutoriel/Premiers_pas +tags: + - SVG + - 'SVG:Tutoriel' +translation_of: Web/SVG/Tutorial/Getting_Started +--- +

{{ PreviousNext("SVG/Tutoriel/Introduction", "SVG/Tutoriel/Positionnement") }}

+ +

Commençons par un exemple simple

+ +

Jetez un coup d'oeil au morceau de code suivant :

+ +
<svg version="1.1"
+     baseProfile="full"
+     xmlns="http://www.w3.org/2000/svg">
+
+  <rect width="100%" height="100%" fill="red"/>
+
+  <circle cx="150" cy="100" r="80" fill="green"/>
+
+  <text x="150" y="125" font-size="60" text-anchor="middle" fill="white">SVG</text>
+
+</svg>
+
+ +

Copiez le code précédent dans un document texte, puis enregistrez le sous le nom de demo1.svg. Ouvrez le fichier dans Firefox. Vous obtiendrez alors l'image suivante (pour les utilisateurs de Firefox : cliquez ici)

+ +

svgdemo1.png

+ +

Quelques explications s'imposent quant au fonctionnement du rendu :

+ +
    +
  1. Nous commençons avec l'élément svg à la racine : + +
      +
    • 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.
      • +
    • pour identifier la version du SVG pour d'autre types de validation, les attributs version et baseProfile doivent toujours être utilisés.
      • +
    • 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 xmlns. Pour plus d'informations, n'hésitez pas à consulter la page Namespaces Crash Courses.
      • +
    +
    2. +
  2. L'arrière-plan est défini par un rectangle rouge, déclaré grâce à la balise <rect/> qui recouvre l'intégralité de l'espace.
    3. +
  3. 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.
    4. +
  4. 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.
    5. +
+ +

Les propriétés basiques des fichiers SVG

+ + + +

 

+ +

Les types de fichiers SVG

+ +

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).

+ +

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).

+ +

Un mot sur les serveurs Web

+ +

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 :

+ +
Content-Type: image/svg+xml
+
+ +

Pour les fichiers SVG compressés, les serveurs devraient envoyer l'en-tête HTTP :

+ +
Content-Type: image/svg+xml
+Content-Encoding: gzip
+
+ +

Vous pouvez vérifier que votre serveur envoie le bon en-tête HTTP avec vos fichiers SVG en utilisant le Moniteur Réseau ou un site comme web-sniffer.net. 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 la page de configuration d'un serveur sur le wiki SVG pour quelques solutions simples.

+ +

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.

+ +

{{ PreviousNext("SVG/Tutoriel/Introduction", "SVG/Tutoriel/Positionnement") }}

+ +

Interwiki Languages Links

+ +

{{ languages( { "en": "en/SVG/Tutorial/Getting_Started", "ja": "ja/SVG/Tutorial/Getting_Started" } ) }}

diff --git a/files/fr/web/svg/tutorial/gradients/index.html b/files/fr/web/svg/tutorial/gradients/index.html new file mode 100644 index 0000000000..ef9c235318 --- /dev/null +++ b/files/fr/web/svg/tutorial/gradients/index.html @@ -0,0 +1,224 @@ +--- +title: Gradients SVG +slug: Web/SVG/Tutoriel/Gradients +tags: + - SVG + - 'SVG:Tutoriel' +translation_of: Web/SVG/Tutorial/Gradients +--- +

{{ 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.

+ +

Il y a deux types de dégradés: linéaire et radial. Les dégradés sont définis dans la section defs et non sur les formes elles-mêmes — cela favorise leur réusabilité. Vous devez donner au dégradé un attribut id; autrement, il ne pourra pas être utilisé par les autres éléments à l'intérieur du fichier SVG.

+ +

Dégradé Linéaire

+ +

Les dégradés linéaires (linear gradient en anglais) changent de couleur le long d'une ligne droite. Pour en insérer un, on crée un élément {{SVGElement('linearGradient')}} dans la section des définitions du fichier SVG.

+ +

Exemple

+ +

Un exemple de dégradé linéaire appliqué à un élément <rect>:

+ +
<svg width="120" height="240" version="1.1" xmlns="http://www.w3.org/2000/svg">
+  <defs>
+      <linearGradient id="Gradient1" x1="0" x2="0" y1="0" y2="1">
+        <stop offset="0%" stop-color="red"/>
+        <stop offset="50%" stop-color="black" stop-opacity="0"/>
+        <stop offset="100%" stop-color="blue"/>
+      </linearGradient>
+      <linearGradient id="Gradient2">
+        <stop class="stop1" offset="0%"/>
+        <stop class="stop2" offset="50%"/>
+        <stop class="stop3" offset="100%"/>
+      </linearGradient>
+      <style type="text/css"><![CDATA[
+        #rect1 { fill: url(#Gradient2); }
+        .stop1 { stop-color: red; }
+        .stop2 { stop-color: black; stop-opacity: 0; }
+        .stop3 { stop-color: blue; }
+      ]]></style>
+  </defs>
+
+  <rect x="10" y="120" rx="15" ry="15" width="100" height="100" fill="url(#Gradient1)"/>
+  <rect x="10" y="10" rx="15" ry="15" width="100" height="100" id="rect1" />
+</svg>
+ +

{{ EmbedLiveSample('SVGLinearGradient','120','240','/files/722/SVG_Linear_Gradient_Example.png') }}

+ +

Définir le dégradé

+ +

À l'intérieur du dégradé, il y a divers noeuds {{SVGElement('stop')}}. Ces noeuds disent au dégradé quelles couleurs doivent être affichées à quelles positions, en spécifiant les attributs offset pour la position et stop-color pour la couleur. On peut également le définir avec CSS. Les deux méthodes ont été utilisées dans l'exemple pour le démontrer.

+ +

Dans cet exemple, on dit au dégradé de commencer en rouge, de passer au noir transparent au centre et de terminer par la couleur bleue. Vous pouvez ajouter autant de couleurs que vous le souhaitez, pour créer un dégradé aussi beau ou aussi laid que vous le souhaitez, mais les positions (offset) doivent toujours être incrementées de 0% (ou 0) à 100% (ou 1). Si des valeurs sont dupliquées, la couleur définie la plus en bas de la définition sera utilisée.

+ +

Aussi, comme pour le remplissage et le contour, vous pouvez spécifier un attribut stop-opacity pour définir l'opacité de la couleur à cette position (encore une fois, à partir de FF3 vous pouvez utiliser les valeurs rgba pour le même effet).

+ +
 <stop offset="100%" stop-color="yellow" stop-opacity="0.5"/>
+
+ +

Utiliser le dégradé

+ +

Pour utiliser le dégradé, vous devez le référencer avec l'attribut fill ou stroke d'un objet. On référence un élément SVG de la même manière que l'on référence des éléments en CSS, via url(). Dans notre cas, l'url est juste une référence vers le dégradé avec l'ID "Gradient". Pour le référencer, on définit fill="url(#Gradient)", et voilà! Notre objet est maintenant multi-coloré. Vous pouvez faire de même avec stroke.

+ +

Orientation du dégradé

+ +

L'élément <linearGradient> peut également prendre différents attributs pour spécifier la taille et l'apparence du dégradé. L'orientation du dégradé est contrôlé par deux points, désignés par les attributs x1, x2, y1, et y2. Ces attributs définissent la ligne le long de laquelle le dégradé est tracé. Par défaut, le dégradé est horizontal, mais il peut être orienté autrement grâce à ces attributs. "Gradient2" dans l'exemple précédent crée un dégradé vertical.

+ +
 <linearGradient id="Gradient2" x1="0" x2="0" y1="0" y2="1">
+
+ +

xlink:href

+ +

Vous pouvez également utiliser l'attribut xlink:href sur les dégradés. Quand il est utilisé, les attributs et stops d'un dégradé peuvent être réutilisé sur un autre. Ainsi, dans l'exemple précédent, on aurait pu ne pas redéfinir tous les stops dans Gradient2, comme ceci:

+ +
 <linearGradient id="Gradient1">
+   <stop id="stop1" offset="0%"/>
+   <stop id="stop2" offset="50%"/>
+   <stop id="stop3" offset="100%"/>
+ </linearGradient>
+ <linearGradient id="Gradient2" x1="0" x2="0" y1="0" y2="1"
+    xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#Gradient1"/>
+
+ +

Ici, le namespace xlink est inclut directement sur le noeud, bien qu'il soit généralement définit en haut du document, comme dans l'exemple avec les images

+ +

Dégradé Radial

+ +

Les dégradés radiaux (radial gradient en anglais) sont similaires aux dégradés linéaires à la différence près qu'ils irradient autour d'un point. Pour en créer un, on crée un élément {{SVGElement('radialGradient')}} dans la section de définitions du document SVG.

+ +

Exemple

+ +
<svg width="120" height="240" version="1.1" xmlns="http://www.w3.org/2000/svg">
+  <defs>
+      <radialGradient id="RadialGradient1">
+        <stop offset="0%" stop-color="red"/>
+        <stop offset="100%" stop-color="blue"/>
+      </radialGradient>
+      <radialGradient id="RadialGradient2" cx="0.25" cy="0.25" r="0.25">
+        <stop offset="0%" stop-color="red"/>
+        <stop offset="100%" stop-color="blue"/>
+      </radialGradient>
+  </defs>
+
+  <rect x="10" y="10" rx="15" ry="15" width="100" height="100" fill="url(#RadialGradient1)"/>
+  <rect x="10" y="120" rx="15" ry="15" width="100" height="100" fill="url(#RadialGradient2)"/>
+</svg>
+ +

{{ EmbedLiveSample('Exemple_2','120','240','/files/726/SVG_Radial_Gradient_Example.png') }}

+ +

Définir le dégradé

+ +

Les stops utilisés ici sont les mêmes que précédemment, la différence étant que désormais l'objet sera rouge en son centre, et que la couleur changera progressivement vers le bleu en approchant des contours. Comme pour les dégradés linéaires, le noeud <radialGradient> peut prendre différents attributs pour décrire sa position et son orientation. Cependant, la définition est un peu plus complexe. Le dégradé linéaire est défini par deux points, qui déterminent où sont situé le centre et les bords:

+ + + +

Centre et point focal

+ +
<svg width="120" height="120" version="1.1"
+  xmlns="http://www.w3.org/2000/svg">
+  <defs>
+      <radialGradient id="Gradient"
+            cx="0.5" cy="0.5" r="0.5" fx="0.25" fy="0.25">
+        <stop offset="0%" stop-color="red"/>
+        <stop offset="100%" stop-color="blue"/>
+      </radialGradient>
+  </defs>
+
+  <rect x="10" y="10" rx="15" ry="15" width="100" height="100"
+        fill="url(#Gradient)" stroke="black" stroke-width="2"/>
+
+  <circle cx="60" cy="60" r="50" fill="transparent" stroke="white" stroke-width="2"/>
+  <circle cx="35" cy="35" r="2" fill="white" stroke="white"/>
+  <circle cx="60" cy="60" r="2" fill="white" stroke="white"/>
+  <text x="38" y="40" fill="white" font-family="sans-serif" font-size="10pt">(fx,fy)</text>
+  <text x="63" y="63" fill="white" font-family="sans-serif" font-size="10pt">(cx,cy)</text>
+
+</svg>
+ +

{{ EmbedLiveSample('Centre_et_point_focal','120','120','/files/727/SVG_Radial_Grandient_Focus_Example.png') }}

+ +

Si le point focal est déplacé en dehors du cercle décrit précédemment, il est impossible que le dégradé s'affiche correctement, le point focal sera donc supposé être à l'intérieur du bord du cercle. Si le point focal n'est pas du tout indiqué, il sera supposé être au même endroit que le point central.

+ +

Attributs additionnels

+ +

Les dégradés linéaires et radiaux peuvent également prendre quelques autres attributs pour décrire les transformations qu'ils peuvent subir.

+ +

spreadMethod

+ +

Cet attribut contrôle ce qu'il arrive quand le dégradé arrive à sa fin, mais que l'objet n'est pas encore rempli. Trois valeurs sont possibles: "pad", "reflect", ou "repeat".

+ + + +
<svg width="220" height="220" version="1.1" xmlns="http://www.w3.org/2000/svg">
+  <defs>
+      <!-- pad -->
+      <radialGradient id="GradientPad"
+            cx="0.5" cy="0.5" r="0.4" fx="0.75" fy="0.75"
+            spreadMethod="pad">
+        <stop offset="0%" stop-color="red"/>
+        <stop offset="100%" stop-color="blue"/>
+      </radialGradient>
+
+      <!-- repeat -->
+      <radialGradient id="GradientRepeat"
+            cx="0.5" cy="0.5" r="0.4" fx="0.75" fy="0.75"
+            spreadMethod="repeat">
+        <stop offset="0%" stop-color="red"/>
+        <stop offset="100%" stop-color="blue"/>
+      </radialGradient>
+
+      <!-- reflect -->
+      <radialGradient id="GradientReflect"
+            cx="0.5" cy="0.5" r="0.4" fx="0.75" fy="0.75"
+            spreadMethod="reflect">
+        <stop offset="0%" stop-color="red"/>
+        <stop offset="100%" stop-color="blue"/>
+      </radialGradient>
+  </defs>
+
+  <rect x="10" y="10" rx="15" ry="15" width="100" height="100" fill="url(#GradientPad)"/>
+  <rect x="10" y="120" rx="15" ry="15" width="100" height="100" fill="url(#GradientRepeat)"/>
+  <rect x="120" y="120" rx="15" ry="15" width="100" height="100" fill="url(#GradientReflect)"/>
+
+  <text x="15" y="30" fill="white" font-family="sans-serif" font-size="12pt">Pad</text>
+  <text x="15" y="140" fill="white" font-family="sans-serif" font-size="12pt">Repeat</text>
+  <text x="125" y="140" fill="white" font-family="sans-serif" font-size="12pt">Reflect</text>
+
+</svg>
+ +

{{ EmbedLiveSample('spreadMethod','220','220','/files/728/SVG_SpreadMethod_Example.png') }}

+ +

gradientUnits

+ +

Les deux types de dégradés ont également un attribut gradientUnits, qui indique l'unité utilisée pour décrire la taille et l'orientation du dégradé. Deux valeurs sont posibles: userSpaceOnUse ou objectBoundingBox.

+ + + +

Il y a quelques subtilités concernant l'utilisation de gradientUnits="objectBoundingBox" quand les limites de l'objet ne sont pas carrées, mais elles sont assez complexes et nous attendrons quelqu'un de plus au courant pour les expliquer.

+ +

gradientTransform

+ +

Vous pouvez également appliquer une transformation au gradient en utilisant l'attribut gradientTransform, mais puisque nous n'avons pas encore introduit les transformations, nous le laisserons de côté pour l'instant.

+ +

 

+ +

{{ PreviousNext("Web/SVG/Tutoriel/Fills_and_Strokes", "Web/SVG/Tutoriel/Motifs") }}

+ +

 

diff --git a/files/fr/web/svg/tutorial/index.html b/files/fr/web/svg/tutorial/index.html new file mode 100644 index 0000000000..14275fcdd8 --- /dev/null +++ b/files/fr/web/svg/tutorial/index.html @@ -0,0 +1,36 @@ +--- +title: Tutoriel SVG +slug: Web/SVG/Tutoriel +tags: + - NeedsContent + - SVG + - 'SVG:Tutoriel' +translation_of: Web/SVG/Tutorial +--- +

SVG, pour Scalable Vector Graphics (ou encore Graphismes vectoriels redimensionnables), est un langage basé sur le 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. Le W3C fournit également une bonne introduction au format SVG, en anglais malheureusement.

+ +
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 Julia. Merci d'avance !
+ + + +

{{ languages( { "en": "en/SVG/Tutorial", "ja": "ja/SVG/Tutorial", "pl": "pl/SVG/Przewodnik" } ) }}

diff --git a/files/fr/web/svg/tutorial/introduction/index.html b/files/fr/web/svg/tutorial/introduction/index.html new file mode 100644 index 0000000000..7c38618958 --- /dev/null +++ b/files/fr/web/svg/tutorial/introduction/index.html @@ -0,0 +1,54 @@ +--- +title: Introduction +slug: Web/SVG/Tutoriel/Introduction +tags: + - SVG + - 'SVG:Tutoriel' +translation_of: Web/SVG/Tutorial/Introduction +--- +

{{ PreviousNext("SVG/Tutoriel", "SVG/Tutoriel/Premiers_pas") }}

+ +

lion_svg.pngSVG est un langage XML, assez similaire au 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é.

+ +

La seconde particularité est que vous allez pouvoir lire le code. Stop ! Lire une image ? Et oui, cela vient du fait que SVG dérive du XML. Nous verrons dans ce tutoriel que le code SVG reste (la plupart du temps) humainement lisible. C'est aussi sympa car on va pouvoir le transformer en arbre DOM et ainsi le manipuler, avec du CSS et / ou du Javascript.

+ +

SVG est apparu en 1999, après que plusieurs formats concurrents aient été soumis au W3C  sans succès. SVG est pris en charge par tous les principaux navigateurs. Un inconvénient est que le chargement SVG peut être lent. En contrepartie, l'avantage c'est de disposer du DOM et de ne pas nécessiter d'extensions tierces. Choisir d'utiliser ou non SVG dépend souvent des cas d'utilisation.

+ +

Les ingrédients de base

+ +

HTML founit des éléments pour définir des titres, paragraphes, tableaux, etc. De la même manière, SVG fournit des éléments pour dessiner des cercles, des rectangles, des courbes simples ou complexes, etc.

+ +

Un simple document SVG se compose de l'élément racine {{ SVGElement('svg') }}, à l'intérieur de laquelle vont être placées divers éléments. L'élément {{ SVGElement('g') }} permet de regrouper plusieurs éléments ensemble, un peu à la manière d'un div en HTML. À partir de là, l'image SVG peut devenir aussi complexe qu'on le veut.

+ +

SVG prend en charge les dégradés, les rotations, les effets de filtre, les animations, l'interactivité avec JavaScript... Mais toutes ces fonctionnalités reposent sur un petit nombre d'éléments de base.

+ +

Les bons outils

+ +

Il y a un certain nombre de logiciels de dessin disponibles qui utilisent SVG comme format natif. Certains, comme Inkscape, sont libres et gratuits. Néanmoins, ce tutoriel se basera sur le XML et un simple éditeur de texte. Le but est d'enseigner les mécanismes de SVG à ceux qui veulent les comprendre, et la meilleure façon de le faire est de mettre les mains dans le cambouis avec un peu de balisage.

+ +

Tous les visionneurs SVG ne sont pas égaux, il est donc probable que quelque chose écrit pour une application ne s'affiche pas exctement de la même manière dans une autre, simplement parce qu'ils prennent en charge différentes spécifications SVG, CSS ou JavaScript.

+ +

Avant de commencer, vous devez avoir une compréhension basique du XML ou d'un autre langage de balisage comme le HTML. Si vous n'êtes pas à l'aise avec le XML, voici quelques règles à garder en-tête :

+ + + +

La spécification du langage SVG (en) est énorme. Ce tutoriel a pour but d'en traiter juste assez pour pouvoir commencer. Une fois que vous serez à l'aise avec les bases du SVG, vous devriez être capables d'utiliser les références d'éléments et les références d'interfaces pour découvrir tout ce que vous aurez besoin de connaître.

+ +

Les versions SVG

+ +

La version "complète" la plus récente de SVG est la 1.1 (devenue recommendation en 2003). Elle s'appuie sur SVG 1.0 mais ajoute davantage de modularisation pour faciliter l'implémentation. La seconde édition de SVG 1.1, est devenue recommendation en 2011.

+ +

SVG 1.2 devait être la prochaine version majeure de SVG mais celle-ci a été abandonnée pour le prochain SVG 2.0, qui est actuellement en cours de développement. SVG 2.0 suit une approche similaire à CSS3: il divise les composants en plusieurs spécifications librement couplées.

+ +

Outre les recommendations complètes de SVG, le groupe de travail du W3C a introduit SVG Tiny et SVG basic en 2003. Ces deux profils d'adressent principalement aux mobiles. SVG Tiny devrait permettre d'obtenir des graphiques simples pour les périphériques qui ont de faibles capacités. SVG Basic, lui, offre de nombreuses fonctionnalités de SVG, mais n'inclut pas celles qui sont difficiles à implémenter ou lourdes à restituer (comme les animations). En 2008, SVG Tiny 1.2 est devenu une recommendation du W3C.

+ +

Une spécification SVG Print était prévue, qui ajouterait la prise en charge de plusieurs pages et une gestion améliorée des couleurs. Ce travail a été interrompu.

+ +

{{ PreviousNext("SVG/Tutoriel", "SVG/Tutoriel/Premiers_pas") }}

+ +

Interwiki Languages Links

+ +

{{ languages( { "en": "en/SVG/Tutorial/Introduction", "ja": "ja/SVG/Tutorial/Introduction" } ) }}

diff --git a/files/fr/web/svg/tutorial/other_content_in_svg/index.html b/files/fr/web/svg/tutorial/other_content_in_svg/index.html new file mode 100644 index 0000000000..ecaf0e7d60 --- /dev/null +++ b/files/fr/web/svg/tutorial/other_content_in_svg/index.html @@ -0,0 +1,36 @@ +--- +title: Contenu embarqué dans le SVG +slug: Web/SVG/Tutoriel/Contenu_embarque_SVG +translation_of: Web/SVG/Tutorial/Other_content_in_SVG +--- +

{{ 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.

+ +

Embarquer des images

+ +

De la même façon qu'il est possible d'utiliser la balise img en HTML, le format SVG possède un élément image qui a la même utilité. Vous pouvez l'utiliser pour insérer des images bitmap ou vectorielles dans votre image SVG. La spécification définit que les formats PNG, JPEG et SVG au moins doivent être supportés.

+ +

L'image embarquée devient un élément SVG normal. Cela implique que vous pouvez utiliser le découpage, les masques, les filtres, les rotations et toute la panoplie des outils svg sur ce contenu embarqué :

+ +
<svg version="1.1"
+     xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
+     width="200" height="200">
+  <image x="90" y="-65" width="128" height="146" transform="rotate(45)"
+     xlink:href="https://developer.mozilla.org/media/img/mdn-logo.png"/>
+</svg>
+
+ +

imagedemo.png

+ +

Embarquer du contenu XML quelconque

+ +

Étant donné que le SVG est un document XML, il est toujours possible d'adjoindre un contenu XML quelconque n'importe où dans le document. Mais il n'y a évidemment aucun moyen de savoir comment l'élément SVG encadrant votre contenu réagira à ce qui aura été inséré. En fait, un lecteur SVG correct ne réagira d'aucune façon particulière et ignorera purement et simplement ce contenu. Si la spécification ajoute l'élément SVG foreignObject, son utilité est essentiellement d'être une coquille pour d'autres balises et de permettre d'adjoindre des attributs de style (comme par exemple la largeur et la hauteur de l'objet embarqué afin de définir la place que celui-ci occupera).

+ +

L'élément foreignObject est donc la bonne méthode pour embarquer du XHTML dans du SVG. Si le SVG doit contenir du texte de longueur conséquente, la disposition HTML est bien plus pratique et utilisable que l'élément SVG text. Une autre utilisation bien pratique de cet élément est l'adjonction de formules avec MathML. Pour des applications scientifiques utilisant le SVG, c'est un bon moyen de permettre la communication entre ces deux univers.

+ +
Note: Gardez à l'esprit que le contenu du foreignObject doit pouvoir être analysé et pris en compte par votre lecteur SVG. Il y a peu de chances qu'un lecteur SVG autonome soit capable de restituer du contenu HTML or MathML.
+ +

Etant donné que le foreignObject est un élément SVG comme un autre, vous pouvez, comme dans le case de l'élément image, utiliser toute la panoplie des attributs SVG qui pourrait s'appliquer au contenu embarqué.

+ +

{{ PreviousNext("Web/SVG/Tutoriel/Découpages_et_masquages", "Web/SVG/Tutoriel/filtres") }}

diff --git a/files/fr/web/svg/tutorial/paths/index.html b/files/fr/web/svg/tutorial/paths/index.html new file mode 100644 index 0000000000..2b73ee2682 --- /dev/null +++ b/files/fr/web/svg/tutorial/paths/index.html @@ -0,0 +1,334 @@ +--- +title: Paths +slug: Web/SVG/Tutoriel/Paths +tags: + - SVG + - 'SVG:Tutoriel' +translation_of: Web/SVG/Tutorial/Paths +--- +

{{ PreviousNext("Web/SVG/Tutoriel/Formes_de_base", "Web/SVG/Tutoriel/Fills_and_Strokes") }}

+ +

L’élément <path> (chemin en français) est le plus versatile des éléments de la bibliothèque SVG parmi les formes basiques. Vous pouvez l’utiliser pour créer des lignes, des courbes, des arcs et autres.

+ +

Les chemins créent des formes en combinant plusieurs lignes droites ou courbes. Les formes composées uniquement de lignes droites peuvent être crées avec des lignes brisées (polylines). Bien que les lignes brisées et les chemins peuvent tout deux créer des formes d’apparence similaire, les lignes brisées nécessitent un grand nombre de petites lignes pour simuler des courbes, et qui ne s’adaptent pas bien aux grandes tailles. Une bonne compréhension des chemins est importante pour dessiner en SVG. Bien qu’il ne soit pas recommandé d'éditer des chemins complexes avec un éditeur XML ou texte (on utilisera plutôt un éditeur SVG tel que Inkscape ou Adobe Illustrator), comprendre comment un chemin s'écrit vous permettra éventuellement d’identifier et de corriger des erreurs d’affichage dans un SVG.

+ +

La forme d’un élément path est définie par son attribut {{ SVGAttr("d") }}. Celui-ci prend pour valeur une série de commandes suivi de paramètres utilisés par ces commandes.

+ +

Chacune des commandes est instanciée par une lettre spécifique. Par exemple, pour se positionner aux coordonnées (10, 10), on utilise la commande M (pour MoveTo, « aller à ») suivit des coordonées: "M 10 10". Quand l’interpréteur rencontre une lettre, il comprend que vous invoquez une commande, et les nombres qui suivent sont les paramètres de la commande.

+ +

De plus, toutes les commandes se présentent sous deux formes: une lettre majuscule spécifie des coordonnées absolues dans la page, une lettre minuscule spécifie des coordonées relatives (par exemple, « aller à 10px vers le haut et 7px vers la gauche depuis le point précédent »).

+ +

Les coordonnées dans l’attribut d sont toujours sans unité et par conséquent dans le système de coordonnées utilisateur. Par la suite, nous apprendrons comment les chemins peuvent être transformés pour répondre à d’autres besoins.

+ +

Commandes pour les lignes

+ +

Il existe cinq commandes pour tracer des lignes avec un élément <path>. Ces commandes permettent de tracer une ligne droite entre deux points.

+ +

MoveTo

+ +

La première commande, « aller à », invoquée avec M (MoveTo), a été décrite ci-dessus. Elle prend en paramètres les coordonnées x et y où se rendre. Aucun trait n’est dessiné, le curseur est simplement déplacé dans la page. La commande « aller à » apparaît au début d’un chemin pour spécifier à quel endroit le dessin doit commencer. Par exemple :

+ +
M x y
+
+ +

ou

+ +
m dx dy
+ +

Dans l’exemple suivant, on se place au point (10, 10). Notez cependant qu'à ce stade rien n'est dessiné, on a manuellement ajouté un cercle pour indiquer la position:

+ +

+ +
<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
+  <path d="M10 10"/>
+
+  <!-- Indique la position -->
+  <circle cx="10" cy="10" r="2" fill="red"/>
+</svg>
+ +

LineTo, Horizontal LineTo, Vertical LineTo

+ +

Il y a trois commandes qui dessinent des lignes. La plus générique est la commande « ligne vers », invoquée avec L (LineTo). L prend deux paramètres, les coordonnées x et y, et dessine une ligne depuis la position actuelle vers la nouvelle position.

+ +
L x y (ou l dx dy)
+
+ +

Il existe deux formes abrégées pour dessiner des lignes horizontales ou verticales. H (Horizontal LineTo) dessine une ligne horizontale, et V (Vertical LineTo) dessine une ligne verticale. Ces deux commandes ne prennent qu’un seul argument car elles ne se déplacent que le long d’une direction.

+ +
H x (ou h dx)
+V y (ou v dy)
+
+ +

Afin de commencer facilement, nous allons dessiner une forme simple, un rectangle (qu'on aurait aussi pu dessiner avec un élément <rect>). Il est composé uniquement de lignes horizontales et verticales :

+ +

+ +
<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg">
+  <path d="M10 10 H 90 V 90 H 10 L 10 10"/>
+
+  <!-- Indique les points -->
+  <circle cx="10" cy="10" r="2" fill="red"/>
+  <circle cx="90" cy="90" r="2" fill="red"/>
+  <circle cx="90" cy="10" r="2" fill="red"/>
+  <circle cx="10" cy="90" r="2" fill="red"/>
+</svg>
+ +

ClosePath

+ +

On aurait pu raccourcir un peu la déclaration de l'exemple ci-dessus en utilisant la commande « fermer le chemin », invoquée avec Z (ClosePath). Cette commande dessine une ligne droite entre la position actuelle et le premier point du chemin. Elle est souvent placée à la fin du path, mais pas toujours. Il n’y a pas de différence entre la commande en majuscule et en minuscule.

+ +
Z (ou z)
+
+ +

Ainsi, notre chemin précédent peut se raccourcir comme ceci:

+ +
<path d="M10 10 H 90 V 90 H 10 Z" fill="transparent" stroke="black"/>
+
+ +

Commandes relatives

+ +

On aurait également pu utiliser des commandes relatives pour dessiner la même image.

+ +

Les commandes relatives sont invoquées en utilisant des lettres minuscules. Plutôt que de déplacer le curseur vers des coordonnées absolues, elles le déplacent relativement à sa dernière position. Par exemple, puisque notre boîte est de dimension 80x80, l’élement path aurait pu être écrit:

+ +
<path d="M10 10 h 80 v 80 h -80 Z" fill="transparent" stroke="black"/>
+
+ +

Le chemin va se positionner au point (10, 10), se déplacer horizontalement de 80 points vers la droite, puis de 80 points vers le bas, de 80 points vers la gauche, et enfin revenir à son point de départ.

+ +

Dans ces exemples, il serait probablement plus simple d’utiliser un élément <polygon> ou <polyline>. Cependant, les chemins sont si couramment utilisés en dessin SVG qu'un développeur peut se sentir plus à l’aise avec eux. Il n’y a pas de réel avantage ou inconvénient à utiliser l’un ou l’autre.

+ +

Commandes pour les courbes

+ +

Il existe trois commandes différentes pour créer des courbes. Deux d’entre elles sont des courbes de Bézier, et la troisième est un « arc » ou section de cercle. Il se peut que vous ayez déjà acquis une expérience pratique avec les courbes de Bézier en utilisant les outils de chemins avec Inkscape, Illustrator ou Photoshop. Pour une description complète des concepts mathématiques sous-jacents, vous pouvez consulter la page Wikipedia Courbe de Bézier.

+ +

Il existe une infinité de courbes de Bézier, mais seulement deux des plus simples d’entre elles sont disponibles dans les éléments path: l’une cubique, invoquée avec C, et l’autre quadratique, invoquée avec Q.

+ +

CurveTo

+ +

La courbe de Bézier cubique, C (CurveTo), est la forme de courbe Bézier la plus complexe. Ce type de courbe nécessite deux points de contrôle. Ainsi, pour créer une courbe de Bézier cubique, vous devez spécifier trois paires de coordonnées.

+ +
C x1 y1, x2 y2, x y (or c dx1 dy1, dx2 dy2, dx dy)
+
+ +

Les deux premières paires de coordonnées sont les points de contrôle: le point de contrôle pour le début de la courbe est (x1, y1), et (x2, y2) est celui de la fin de la courbe. La dernière paire de coordonnées (x, y) est l’endroit où vous voulez que la ligne se termine.

+ +

Les points de contrôle décrivent, pour faire simple, la pente de la courbe pour le point de départ et pour le point d'arrivée. La fonction Bézier crée ensuite une courbe lisse faisant le lien entre la pente que vous avez établie au début de votre ligne, et celle à l’autre extrémité.

+ +

Cubic Bézier Curves with grid

+ +
<svg width="190" height="160" xmlns="http://www.w3.org/2000/svg">
+  <path d="M10 10 C 20 20, 40 20, 50 10" stroke="black" fill="transparent"/>
+  <path d="M70 10 C 70 20, 120 20, 120 10" stroke="black" fill="transparent"/>
+  <path d="M130 10 C 120 20, 180 20, 170 10" stroke="black" fill="transparent"/>
+  <path d="M10 60 C 20 80, 40 80, 50 60" stroke="black" fill="transparent"/>
+  <path d="M70 60 C 70 80, 110 80, 110 60" stroke="black" fill="transparent"/>
+  <path d="M130 60 C 120 80, 180 80, 170 60" stroke="black" fill="transparent"/>
+  <path d="M10 110 C 20 140, 40 140, 50 110" stroke="black" fill="transparent"/>
+  <path d="M70 110 C 70 140, 110 140, 110 110" stroke="black" fill="transparent"/>
+  <path d="M130 110 C 120 140, 180 140, 170 110" stroke="black" fill="transparent"/>
+</svg>
+
+ +

L’exemple ci-dessus crée neuf courbes de Bézier cubiques. De gauche à droite, les points de contrôle sont de plus en plus espacés horizontalement. De haut en bas, ils sont de plus en plus éloignés des extrémités. La chose à remarquer ici est que la courbe commence dans la direction du premier point de contrôle, puis se courbe de manière à terminer le long de la direction du second point de contrôle.

+ +

Shorthand CurveTo

+ +

Vous pouvez lier ensemble plusieurs courbes de Bézier pour créer des formes harmonieuses étendues. Souvent, le point de contrôle d’un côté d’une extrémité sera une réflexion du point de contrôle utilisé de l’autre côté, afin de garder une pente constante. Dans ce cas, vous pouvez utiliser une version raccourcie de la courbe cubique, désignée par la commande S, ou s (Shorthand CuveTo).

+ +
S x2 y2, x y (ou s dx2 dy2, dx dy)
+
+ +

S dessine une courbe de Bézier cubique entre le point actuel et (x, y).

+ + + +

(x2, y2) est le second point de contrôle.

+ +

Un exemple de cette syntaxe est montré ci-dessous. Dans la figure associée, les points de contrôle spécifiés sont indiqués en rouge, et le point de contrôle inféré, en bleu.

+ +

ShortCut_Cubic_Bezier_with_grid.png

+ +
<svg width="190" height="160" xmlns="http://www.w3.org/2000/svg">
+  <path d="M10 80 C 40 10, 65 10, 95 80 S 150 150, 180 80" stroke="black" fill="transparent"/>
+</svg>
+ +

Quadratic Bezier CurveTo

+ +

L’autre type de courbe, la courbe de Bézier quadratique, est invoquée avec Q (Quadratic Bezier CurveTo). Elle est plus simple que la version cubique puisqu'elle ne nécessite qu'un point de contrôle. Le point de contrôle détermine la pente de la courbe à la fois au point de départ et au point d’arrivée.

+ +
Q x1 y1, x y (ou q dx1 dy1, dx dy)
+
+ +

(x1 y1) est la position du point de contrôle, et (x y) est le point d’arrivée de la courbe.

+ +

Quadratic Bézier with grid

+ +
<svg width="190" height="160" xmlns="http://www.w3.org/2000/svg">
+  <path d="M10 80 Q 95 10 180 80" stroke="black" fill="transparent"/>
+</svg>
+ +

Shorthand Quadratic Bezier CurveTo

+ +

Comme pour la courbe cubique, il existe un raccourci pour lier ensemble plusieurs courbes quadratiques, invoqué avec T (Shorthand Quadratic Bezier CuveTo).

+ +
T x y (ou t dx dy)
+
+ +

Ce raccourci examine le précédent point de contrôle utilisé et en infère un nouveau à partir de celui-ci. Cela signifie qu’après un premier point de contrôle, vous pouvez créer des formes assez complexes en spécifiant seulement les points d’extrémités.

+ +
+

Note: Ce raccourci fonctionne uniquement si la commande précédente est une commande Q ou T. Dans le cas contraire, le point de contrôle est considéré comme le même que le point précédent, et vous ne dessinerez que des lignes.

+
+ +

Shortcut_Quadratic_Bezier_with_grid.png

+ +
<svg width="190" height="160" xmlns="http://www.w3.org/2000/svg">
+  <path d="M10 80 Q 52.5 10, 95 80 T 180 80" stroke="black" fill="transparent"/>
+</svg>
+ +

Les deux courbes produisent des résultats similaires, bien que les courbes cubiques vous offrent une plus grande liberté dans l’apparence exacte que vous voulez donner à votre courbe. Le choix du type de courbe de Bézier à utiliser se fait au cas par cas, et dépend du nombre de symétries que présente votre ligne.

+ +

Elliptical Arc

+ +

Le dernier type de ligne courbe que vous pouvez créer avec SVG est l’arc, invoqué avec A (Elliptical Arc). Les arcs sont des sections de cercles ou d’ellipses.

+ +

L'élément arc part du point actuel vers le point d'arrivée (x, y) en parcourant la ligne le long d'une ellipse définie par rx et ry. Le centre de l'ellipse (cx, cy) est calculé automatiquement pour satisfaire les contraintes imposées par les autres paramètres. Si vous avez besoin d'un rappel sur les ellipses, voyez les formes de base. Ensemble, ces quatre valeurs définissent la structure de base de l’arc.

+ +
A rx ry x-axis-rotation large-arc-flag sweep-flag x y
+a rx ry x-axis-rotation large-arc-flag sweep-flag dx dy
+
+ +

x-axis-rotation

+ +

x-axis-rotation décrit la rotation de l’arc. Il s’explique plus facilement avec un exemple:

+ +

SVGArcs_XAxisRotation_with_grid

+ +
<svg width="320" height="320" xmlns="http://www.w3.org/2000/svg">
+  <line x1="10" y1="315" x2="315" y2="10" stroke="black" stroke-width="2" />
+
+  <path d="M110 215       a 30 50   0 0 1 52.55 -52.45" fill="#7FBF7F" stroke="black" stroke-width="2" />
+  <path d="M172.55 152.45 a 30 50 -45 0 1 42.55 -42.55" fill="#7FBF7F" stroke="black" stroke-width="2" />
+</svg>
+ +

Cet exemple montre deux arcs elliptiques de rayon dx 30 et rayon dy 50.

+ + + +

sweep-flag

+ +

Pour un rayon rx et un rayon ry donnés, il existe deux ellipses pouvant connecter deux points quelconques.

+ +

sweep-flag détermine si l’arc doit commencer son mouvement à un angle négatif ou positif, permettant ainsi de choisir lequel des deux cercles est parcouru.

+ +
<!-- sweep-flag: 0 -->
+<path d="M 125,75 a100,50 0 0,0 100,50"
+      stroke="red" stroke-width="6" fill="none" />
+
+<!-- sweep-flag: 1 -->
+<path d="M 125,75 a100,50 0 0,1 100,50"
+      stroke="blue" stroke-width="6" fill="none" />
+
+ + + +

{{ EmbedLiveSample('Playable_code', '100%', 200) }}

+ +

large-arc-flag

+ +

Pour chacune des deux ellipses, il existe deux chemins possibles, ce qui donne quatre chemins possibles.

+ +

large-arc-flag détermine simplement si l’arc doit être supérieur ou inférieur à 180 degrés ; au final, il détermine dans quelle direction l’arc va parcourir une ellipse donnée.

+ +
<!-- large-arc-flag: 0 -->
+<path d="M 125,75 a100,50 0 0,0 100,50"
+      stroke="red" stroke-width="6" fill="none" />
+
+<!-- large-arc-flag: 1 -->
+<path d="M 125,75 a100,50 0 1,0 100,50"
+      stroke="blue" stroke-width="6" fill="none" />
+
+ + + +

{{ EmbedLiveSample('Playable_code_2', '100%', 200) }}

+ +

L’exemple ci-dessous montre les quatre combinaisons possibles avec sweep-flag et large-arc-flag:

+ +

+ +
<svg width="325" height="325" xmlns="http://www.w3.org/2000/svg">
+  <path d="M80 80
+           A 45 45, 0, 0, 0, 125 125
+           L 125 80 Z" fill="green"/>
+  <path d="M230 80
+           A 45 45, 0, 1, 0, 275 125
+           L 275 80 Z" fill="red"/>
+  <path d="M80 230
+           A 45 45, 0, 0, 1, 125 275
+           L 125 230 Z" fill="purple"/>
+  <path d="M230 230
+           A 45 45, 0, 1, 1, 275 275
+           L 275 230 Z" fill="blue"/>
+</svg>
+ +

Conclusion

+ +

Les arcs sont un moyen facile de créer des portions de cercle ou d’ellipse dans vos dessins. Par exemple pour dessiner un graphique en camembert. Si vous êtes en train de migrer vers SVG depuis Canvas, les arcs peuvent être la partie la plus difficile à appréhender, mais sont également bien plus puissants.

+ +

Comme les points de départ et d’arrivée de tout chemin parcourant un cercle sont confondus, un nombre infini de cercles peuvent être choisis, par conséquent le chemin est indéfini. Il est possible d’en faire une approximation en prenant des points de départ et d’arrivée légèrement décalés, puis de les connecter à l’aide d’un autre segment de chemin. Dans ces conditions, il est souvent plus facile d’utiliser un véritable élément cercle ou ellipse à la place.

+ +

Vous pouvez trouver une démo interactive à l'adresse suivante, pour vous aider à comprendre les concepts derrière les arcs SVG: http://codepen.io/lingtalfi/pen/yaLWJG (testé avec Chrome et Firefox seulement, peut ne pas marcher avec votre navigateur).

+ +

{{ PreviousNext("Web/SVG/Tutoriel/Formes_de_base", "Web/SVG/Tutoriel/Fills_and_Strokes") }}

diff --git a/files/fr/web/svg/tutorial/patterns/index.html b/files/fr/web/svg/tutorial/patterns/index.html new file mode 100644 index 0000000000..29a63e8f60 --- /dev/null +++ b/files/fr/web/svg/tutorial/patterns/index.html @@ -0,0 +1,266 @@ +--- +title: Motifs +slug: Web/SVG/Tutoriel/Motifs +tags: + - SVG + - 'SVG:Tutoriel' +translation_of: Web/SVG/Tutorial/Patterns +--- +

{{ 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.

+ +

Exemple

+ +
<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
+  <defs>
+    <linearGradient id="Gradient1">
+      <stop offset="5%" stop-color="white"/>
+      <stop offset="95%" stop-color="blue"/>
+    </linearGradient>
+    <linearGradient id="Gradient2" x1="0" x2="0" y1="0" y2="1">
+      <stop offset="5%" stop-color="red"/>
+      <stop offset="95%" stop-color="orange"/>
+    </linearGradient>
+
+    <pattern id="Pattern" x="0" y="0" width=".25" height=".25">
+      <rect x="0" y="0" width="50" height="50" fill="skyblue"/>
+      <rect x="0" y="0" width="25" height="25" fill="url(#Gradient2)"/>
+      <circle cx="25" cy="25" r="20" fill="url(#Gradient1)" fill-opacity="0.5"/>
+    </pattern>
+  </defs>
+
+  <rect fill="url(#Pattern)" stroke="black" width="200" height="200"/>
+</svg>
+ +

{{ EmbedLiveSample('Exemple','220','220','/files/725/SVG_Pattern_Example.png') }}

+ +

À l'intérieur de l'élément pattern, vous pouvez inclure toutes les formes de bases de SVG et les styliser de la même manière que d'habitude (remplissage, contour, dégradés, opacité, etc). Dans notre exemple, on a dessiné un cercle et deux rectangles (qui se chevauchent et dont l'un est deux fois plus grand que l'autre pour remplir le motif en entier).

+ +

La partie pouvant apporter le plus de confusion avec les motifs est le système d'unité et la taille des éléments.

+ +

Unités du motif: objectBoundingBox

+ +

Les attributs width et height sur l'élément pattern décrivent jusqu'où le motif doit aller avant de se répéter. Les attributs x et y sont également disponibles si vous souhaitez décaler le point de départ du motif à l'intérieur du dessin.

+ +

Même principe que l'attribut gradientUnits (que nous avons vu précédemment avec les dégradés), les motifs peuvent prendre un attribut patternUnits, pour spécifier l'unité utilisée par le motif. La valeur par défaut est  "objectBoundingBox", ainsi une taille de 1 remplira entièrement la hauteur/largeur de l'objet auquel le motif est appliqué. Puisque dans notre cas, on veut que le motif se répète 4 fois horizontalement et verticalement, on a définit height et width à 0.25. Cela signifie que la hauteur et largeur du pattern sera de 25% celle de l'objet.

+ +

De même, pour que le motif commence à 10 pixels du bord supérieur-gauche de l'objet, il faudrait définir les valeurs de x et y à 0.05 (10/200 = 0.05).

+ +

Unités du contenu: userSpaceOnUse

+ +

Contrairement aux dégradés, les motifs ont un deuxième argument, patternContentUnits, qui lui spécifie l'unité utilisée par les formes à l'intérieur du motif. La valeur par défaut est "userSpaceOnUse", l'opposé de l'attribut patternUnits. Cela signifie qu'à moins de définir ces attributs aurement (patternContentUnits et/ou patternUnits), les formes que vous dessinez à l'intérieur du motif ont un système de coordonnées différent du motif, ce qui peut rendre les choses un peu déroutantes si vous écrivez le code à la main.

+ +

Pour que cela fonctionne dans l'exemple ci-dessus, nous avons dû prendre en compte la taille du rectangle sur lequel est appliqué le motif (200px) et le fait que l'on veut répéter le motif 4 fois horizontalement et verticalement, donc que le motif sera un carré de 50x50. Les deux rectangles et le cercle à l'intérieur du motif ont été dimensionnés pour tenir dans un carré de 50x50. Tout ce qui sortirait en dehors ne serait pas affiché.

+ +

La chose à retenir est que si l'objet change de taille, le motif lui-même sera mis à l'échelle mais les objets à l'intérieur non. Ainsi, alors qu'on aura toujours 4 motifs qui se répètent horizontalement et verticalement, les objets à l'intérieur du motif garderont la même taille, et une zone vide sera affichée.

+ + + +

{{ EmbedLiveSample('Playable_code','220','350') }}

+ +

Unités du contenu: objectBoundingBox

+ +

En changeant l'attribut patternContentUnits, on peut utiliser le même système d'unité pour tous les éléments:

+ +
 <pattern id="Pattern" width=".25" height=".25" patternContentUnits="objectBoundingBox">
+   <rect x="0" y="0" width=".25" height=".25" fill="skyblue"/>
+   <rect x="0" y="0" width=".125" height=".125" fill="url(#Gradient2)"/>
+   <circle cx=".125" cy=".125" r=".1" fill="url(#Gradient1)" fill-opacity="0.5"/>
+ </pattern>
+
+ +

Maintenant, parce le contenu du motif utilise le même système d'unité que le motif, le motif redimensionne automatiquement son contenu. Cela contraste avec le système "userSpaceOnUse" par défaut, où lorsque le motif change le taille, le contenu garde la même taille.

+ + + +

{{ EmbedLiveSample('Playable_code_2','220','350') }}

+ +

Note: Dans Gecko, les cercles semblent avoir du mal à être dessinés si le rayon est inférieur à 0.075 (on ignore s'il s'agit d'un bug de l'élément pattern ou non). Pour contourner ce problème, il est probablement préférable d'éviter de dessiner des cercles dans des unités "objectBoundingBox".

+ +

Unités du motif: userSpaceOnUse

+ +

Aucune des utilisations vu jusqu'ici ne correspond à l'usage habituel des motifs (tel qu'on le ferait en CSS): les motifs ont généralement une taille définie et se répètent indépendamment de la taille de l'objet sur lequel il est appliqué. Pour créer quelque chose comme ça, le motif et le contenu doivent être dessiné en mode "userSpaceOnUse":

+ +
 <pattern id="Pattern" x="10" y="10" width="50" height="50" patternUnits="userSpaceOnUse">
+   <rect x="0" y="0" width="50" height="50" fill="skyblue"/>
+   <rect x="0" y="0" width="25" height="25" fill="url(#Gradient2)"/>
+   <circle cx="25" cy="25" r="20" fill="url(#Gradient1)" fill-opacity="0.5"/>
+ </pattern>
+
+ +

Bien sûr, cela veut dire que le motif ne sera pas mis à l'échelle si vous modifiez la taille de l'objet ultérieurement.

+ + + +

{{ EmbedLiveSample('Playable_code_3','220','350') }}

+ +

Récapitulatif

+ +

Les trois exemples sont illustrés ci-dessous sur un rectangle allongé à une hauteur de 300px:

+ +

Image:SVG_Pattern_Comparison_of_Units.png

+ +

{{ PreviousNext("Web/SVG/Tutoriel/Gradients", "Web/SVG/Tutoriel/Texts") }}

diff --git a/files/fr/web/svg/tutorial/positions/index.html b/files/fr/web/svg/tutorial/positions/index.html new file mode 100644 index 0000000000..7f23bfe123 --- /dev/null +++ b/files/fr/web/svg/tutorial/positions/index.html @@ -0,0 +1,55 @@ +--- +title: Positionnement +slug: Web/SVG/Tutoriel/Positionnement +tags: + - Débutant + - SVG + - 'SVG:Tutoriel' +translation_of: Web/SVG/Tutorial/Positions +--- +

{{ PreviousNext("SVG/Tutoriel/Premiers_pas", "SVG/Tutoriel/Formes_de_base") }}

+ +

La grille

+ +

Pour chaque élément, SVG utilise un ensemble de coordonnées aussi appelé grille assez similaire à ce qui est utilisé dans canvas (et par tout un tas d'autres routines de dessin informatique). Dans le cas présent, le point en haut à gauche est considéré comme le point (0,0) ou point d'origine. Le positionnement est ensuite mesuré en pixel, depuis le coin supérieur gauche. Les valeurs positives de x vont vers la droite, les valeurs positives de y vont vers le bas. Notez que tout ceci est un peu contraire à la géométrie que l'on vous a enseignée. Ici, le positionnement fonctionne de la même manière que pour les éléments HTML.

+ +

Exemple

+ +
<rect x="0" y="0" width="100" height="100" />
+
+ +

L'élément précédent définit un rectangle dans le coin supérieur gauche de l'écran, d'une taille de 100px par 100px.

+ +

Qu'est ce qu'un pixel ?

+ +

Dans le cas le plus basique, un pixel dans un document SVG correspond à un pixel du périphérique de sortie, à savoir l'écran. Mais le SVG ne serait pas "scalable", c'est-à-dire évolutif, s'il n'y avait qu'une seule possibilité de gérer ce comportement. Tout comme les tailles de police absolues et relatives en CSS, SVG peut définir des unités absolues (avec des identifiants dimensionnels comme le "pt" ou encore le "cm") ou encore des unités dites définies par l'utilisateur, qui ne disposent pas de ces identifiants et correspondent à des nombres ordinaires.

+ +

Par défaut, l'unité utilisateur correspond à l'unité de l'écran. Pour modifier ce comportement de manière explicite, il existe plusieurs méthodes en SVG. Commençons par l'élément racine svg :

+ +
<svg width="100" height="100">
+
+ +

La déclaration suivante crée un élément SVG d'une taille de 100px par 100px. Ici, une unité utilisateur correspond à l'unité de l'écran.

+ +
<svg width="200" height="200" viewBox="0 0 100 100">
+
+ +

L'image SVG suivante fait 200px par 200px. Toutefois, l'attribut viewBox définit que cet élément de 200 par 200 commence au point (0,0) et s'étend sur une grille de 100 unités sur 100 unités vers la droite et vers le bas de l'écran. 100 unités représentant 200 pixels, chaque unité vaut deux pixels : cela permet de doubler la taille de l'image.

+ +

La transformation des coordonnées réelles de l'écran en coordonnées personnalisées à l'aide d'un viewport permet de créer un système de coordonnées utilisateur. Celui-ci pourra pivoter, être zoomé, rendu oblique ou encore permettra de retourner une image. Par défaut, le système de coordonnées de l'utilisateur fait correspondre un pixel utilisateur à un pixel écran.

+ +

Cependant, le périphérique peut décider lui-même ce qui correspond à un pixel.

+ +

Les tailles dans le fichier SVG ayant des unités spécifiques, tels que les "in" et les "cm", sont ensuite calculées de manière à les faire apparaître avec une échelle de 1:1 dans l'image résultante.

+ +

Pour illustrer cette explication, rien de tel qu'une petite citation tirée des spécifications SVG 1.1 :

+ +
+

[…] imaginons que le user agent peut déterminer à partir de son environnement que "1px" correspond à "0.2822222mm" (c'est-à-dire 90dpi). Ainsi, pour le traitement de chaque élément SVG : […] "1cm" équivaut à "35.43307px" (et donc à 35.43307 unités utilisateur)

+
+ +

{{ PreviousNext("SVG/Tutoriel/Premiers_pas", "SVG/Tutoriel/Formes_de_base") }}

+ +

Interwiki Languages Links

+ +

{{ languages( { "en": "en/SVG/Tutorial/Positions"} ) }}

diff --git a/files/fr/web/svg/tutorial/svg_and_css/index.html b/files/fr/web/svg/tutorial/svg_and_css/index.html new file mode 100644 index 0000000000..a3c323972f --- /dev/null +++ b/files/fr/web/svg/tutorial/svg_and_css/index.html @@ -0,0 +1,198 @@ +--- +title: Graphiques SVG +slug: CSS/Premiers_pas/Graphiques_SVG +tags: + - CSS + - 'CSS:Premiers_pas' +translation_of: Web/SVG/Tutorial/SVG_and_CSS +--- +

 

+

Cette page illustre le langage spécialisé dans la création d'éléments graphiques : SVG.

+

Vous créerez une démonstration simple visible dans votre navigateur Mozilla avec SVG activé.

+

Information : SVG

+

+ + SVG + (Scalable Vector Graphics) est un langage basé sur XML permettant de créer des éléments graphiques.

+

Il peut être utilisé pour des images statiques, ainsi que pour des animations et des interfaces utilisateur.

+

Comme d'autres langages basés sur XML, SVG permet d'utiliser des feuilles de style CSS afin de séparer le style d'un graphique de son contenu.

+

De plus, les feuilles de style utilisées avec d'autres langages de balisages peuvent spécifier l'URL d'un graphique SVG lorsqu'une image est requise. Par exemple, une feuille de style utilisée avec un document HTML peut spécifier l'URL d'un graphique SVG dans la valeur d'une propriété background.

+ + + + + + + +
+ Plus de détails
Au moment de la rédaction de ce document (courant 2005), seules certains compilations récentes des navigateurs Mozilla ont leur gestion native de SVG activée. +

Vous pouvez ajouter un support SVG à d'autres versions en installant un plugin comme celui fourni par Adobe.

+

Pour plus d'informations à propos de SVG dans Mozilla, consultez la page SVG de ce wiki.

+
+

Action : une démonstration de SVG

+

Créez un nouveau document SVG en tant que fichier texte simple, doc8.svg. Copiez et collez-y le contenu ci-dessous en vous assurant de le faire défiler afin d'en obtenir la totalité :

+
+ 
<?xml version="1.0" standalone="no"?>
+
+<?xml-stylesheet type="text/css" href="style8.css"?>
+
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
+  "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+
+<svg width="600px" height="600px" viewBox="-300 -300 600 600"
+  xmlns="http://www.w3.org/2000/svg" version="1.1"
+  xmlns:xlink="http://www.w3.org/1999/xlink">
+
+<title>SVG demonstration</title>
+<desc>Premiers pas en CSS avec Mozilla - Démonstration de SVG</desc>
+
+<defs>
+  <g id="segment" class="segment">
+    <path class="segment-fill" d="M0,0 v-200 a40,40 0 0,0 -62,10 z"/>
+    <path class="segment-edge" d="M0,-200 a40,40 0 0,0 -62,10"/>
+    </g>
+  <g id="quadrant">
+    <use xlink:href="#segment"/>
+    <use xlink:href="#segment" transform="rotate(18)"/>
+    <use xlink:href="#segment" transform="rotate(36)"/>
+    <use xlink:href="#segment" transform="rotate(54)"/>
+    <use xlink:href="#segment" transform="rotate(72)"/>
+    </g>
+  <g id="petals">
+    <use xlink:href="#quadrant"/>
+    <use xlink:href="#quadrant" transform="rotate(90)"/>
+    <use xlink:href="#quadrant" transform="rotate(180)"/>
+    <use xlink:href="#quadrant" transform="rotate(270)"/>
+    </g>
+  <radialGradient id="fade" cx="0" cy="0" r="200"
+      gradientUnits="userSpaceOnUse">
+    <stop id="fade-stop-1" offset="33%"/>
+    <stop id="fade-stop-2" offset="95%"/>
+    </radialGradient>
+  </defs>
+
+<text id="heading" x="-280" y="-270">
+  SVG demonstration</text>
+<text  id="caption" x="-280" y="-250">
+  Placez le pointeur de la souris au dessus de la fleur.</text>
+
+<g id="flower">
+  <circle id="overlay" cx="0" cy="0" r="200"
+    stroke="none" fill="url(#fade)"/>
+  <use id="outer-petals" xlink:href="#petals"/>
+  <use id="inner-petals" xlink:href="#petals"
+    transform="rotate(9) scale(0.33)"/>
+  </g>
+
+</svg>
+
+
+

Créez un nouveau fichier CSS, style8.css. Copiez et collez-y le contenu ci-dessous, en vous assurant de le faire défiler pour en obtenir la totalité :

+
+ 
/*** Démonstration de SVG ***/
+
+/* page */
+svg {
+  background-color: beige;
+  }
+
+#heading {
+  font-size: 24px;
+  font-weight: bold;
+  }
+
+#caption {
+  font-size: 12px;
+  }
+
+/* flower */
+#flower:hover {
+  cursor: crosshair;
+  }
+
+/* gradient */
+#fade-stop-1 {
+  stop-color: blue;
+  }
+
+#fade-stop-2 {
+  stop-color: white;
+  }
+
+/* outer petals */
+#outer-petals {
+  opacity: .75;
+  }
+
+#outer-petals .segment-fill {
+  fill: azure;
+  stroke: lightsteelblue;
+  stroke-width: 1;
+  }
+
+#outer-petals .segment-edge {
+  fill: none;
+  stroke: deepskyblue;
+  stroke-width: 3;
+  }
+
+#outer-petals .segment:hover > .segment-fill {
+  fill: plum;
+  stroke: none;
+  }
+
+#outer-petals .segment:hover > .segment-edge {
+  stroke: slateblue;
+  }
+
+/* inner petals */
+#inner-petals .segment-fill {
+  fill: yellow;
+  stroke: yellowgreen;
+  stroke-width: 1;
+  }
+
+#inner-petals .segment-edge {
+  fill: none;
+  stroke: yellowgreen;
+  stroke-width: 9;
+  }
+
+#inner-petals .segment:hover > .segment-fill {
+  fill: darkseagreen;
+  stroke: none;
+  }
+
+#inner-petals .segment:hover > .segment-edge {
+  stroke: green;
+  }
+
+
+

Ouvrez le document dans votre navigateur avec SVG activé. Placez le pointeur de la souris au dessus de l'image.

+

Ce wiki ne permet pas d'utiliser SVG dans ses pages, il n'est donc pas possible d'afficher la démonstration ici. L'image ressemble à ceci :

+ + + + + + +
Démonstration de SVG
+

Remarques à propos de cette démonstration :

+ +

 

+ + + + + + + +
+ Challenge
Modifiez la feuille de style pour que les pétales intérieurs deviennent tous roses lorsque le pointeur de la souris survole n'importe lequel d'entre-eux, sans changer la manière dont les pétales extérieurs fonctionnent.
+

 

+

Pour continuer

+

Si vous avez eu des difficultés à comprendre cette page, ou si vous avez d'autres commentaires à son sujet, n'hésitez pas à contribuer à sa page de discussion.

+

Dans cette démonstration, votre navigateur avec SVG activé sait déjà comment afficher les éléments SVG. La feuille de style modifie uniquement l'affichage dans une certaine mesure. C'est également le cas pour les documents HTML et XUL. Mais vous pouvez utiliser CSS pour des documents XML généralistes, où il n'y a aucune manière prédéfinie d'afficher les éléments. La page suivante en fait la démonstration : Données XML.

diff --git a/files/fr/web/svg/tutorial/svg_fonts/index.html b/files/fr/web/svg/tutorial/svg_fonts/index.html new file mode 100644 index 0000000000..4a196a3825 --- /dev/null +++ b/files/fr/web/svg/tutorial/svg_fonts/index.html @@ -0,0 +1,106 @@ +--- +title: Polices SVG +slug: Web/SVG/Tutoriel/polices_SVG +tags: + - Police + - SVG + - font +translation_of: Web/SVG/Tutorial/SVG_fonts +--- +

{{ 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.

+ +
Les Polices d'écritures SVG sont actuellement supportées uniquement sur Safari et le navigateur Android.
+Internet Explorer n'a pas envisagé de les implémenter, la fonctionnalité a été supprimée de Chrome 38 (et Opera 25) et Firefox a reporté sa mise en œuvre indéfiniment pour se concentrer sur WOFF. Cependant, d'autres outils comme le plugin Adobe SVG Viewer, Batik et des modèles de document d'Inkscape supportent l'incorporation des Police d'écriture SVG.
+ +

La base pour définir une police SVG est l'élément {{ SVGElement("font") }}.

+ +

Définir une police

+ +

Quelques ingrédients sont nécessaires pour intégrer une police en SVG. Prenons un exemple de déclaration (celle de la spécification), et expliquons-en les détails.

+ +
<font id="Font1" horiz-adv-x="1000">
+  <font-face font-family="Super Sans" font-weight="bold" font-style="normal"
+      units-per-em="1000" cap-height="600" x-height="400"
+      ascent="700" descent="300"
+      alphabetic="0" mathematical="350" ideographic="400" hanging="500">
+    <font-face-src>
+      <font-face-name name="Super Sans Bold"/>
+    </font-face-src>
+  </font-face>
+  <missing-glyph><path d="M0,0h200v200h-200z"/></missing-glyph>
+  <glyph unicode="!" horiz-adv-x="300"><!-- Outline of exclam. pt. glyph --></glyph>
+  <glyph unicode="@"><!-- Outline of @ glyph --></glyph>
+  <!-- more glyphs -->
+</font>
+ +

Nous commençons avec l'élement {{ SVGElement("font") }}. Il contient un attribut id, ce qui permet de le référencer via une URI (voir plus bas). L'attribut horiz-adv-x définit sa largeur moyenne, comparée aux définitions des autres glyphes individules. La valeur 1000 définit une valeur raisonnable. Plusieurs autres attributs associés précisent l'affichage de la boite qui encapsule le glyphe.

+ +

L'élément  {{ SVGElement("font-face") }} est l'équivalent SVG de la déclaration CSS  @font-face. Il définit les propriétés de base de la police finale, telles que 'weight', 'style', etc. Dans l'exemple ci-dessus, la première et la plus importante est  font-family : Elle pourra alors être référencée via la propriété font-family présente dans les CSS et les SVG. Les attributs font-weight et font-style ont la même fonction que leurs équivalents CSS. Les attributs suivants sont des instructions de rendu, pour le moteur d'affichage des polices ; par exemple : quelle est la taille des jambages supérieurs des glyphes (ascenders).

+ +

Its child, the {{ SVGElement("font-face-src") }} element, corresponds to CSS' src descriptor in @font-face declarations. You can point to external sources for font declarations by means of its children {{ SVGElement("font-face-name") }} and {{ SVGElement("font-face-uri") }}. The above example states that if the renderer has a local font available named "Super Sans Bold", it should use this instead.

+ +

Following {{ SVGElement("font-face-src") }} is a {{ SVGElement("missing-glyph") }} element. This defines what should be displayed if a certain glyph is not found in the font and if there are no fallback mechanisms. It also shows how glyphs are created: By simply adding any graphical SVG content inside. You can use literally any other SVG elements in here, even {{ SVGElement("filter") }}, {{ SVGElement("a") }} or {{ SVGElement("script") }}. For simple glyphs, however, you can simply add a d attribute — this defines a shape for the glyph exactly like how standard SVG paths work.

+ +

The actual glyphs are then defined by {{ SVGElement("glyph") }} elements. The most important attribute is unicode. It defines the unicode codepoint represented by this glyph. If you also specify the {{htmlattrxref("lang")}} attribute on a glyph, you can further restrict it to certain languages (represented by xml:lang on the target) exclusively. Again, you can use arbitrary SVG to define the glyph, which allows for great effects in supporting user agents.

+ +

There are two further elements that can be defined inside font: {{ SVGElement("hkern") }} and {{ SVGElement("vkern") }}. Each carries references to at least two characters (attributes u1 and u2) and an attribute k that determines how much the distance between those characters should be decreased. The below example instructs user agents to place the "A" and "V" characters closer together the standard distance between characters.

+ +
<hkern u1="A" u2="V" k="20" />
+ +

Référencer une police

+ +

Lorsque vous avez mis en place votre déclaration de police comme décrit ci-dessus, vous pouvez utiliser un simple attribut font-family pour réellement appliquer la police à un texte SVG:

+ +
<font>
+  <font-face font-family="Super Sans" />
+  <!-- ... -->
+</font>
+
+<text font-family="Super Sans">My text uses Super Sans</text>
+ +

Cependant, vous êtes libre de combiner plusieurs méthodes pour une plus grande liberté de où et comment définir la police.

+ +

Option: Utiliser le CSS @font-face

+ +

 

+ +

Vous pouvez utiliser @font-face pour les polices externes de référence :

+ +

 

+ +
<font id="Super_Sans">
+  <!-- ... -->
+</font>
+
+<style type="text/css">
+@font-face {
+  font-family: "Super Sans";
+  src: url(#Super_Sans);
+}
+</style>
+
+<text font-family="Super Sans">My text uses Super Sans</text>
+ +

Option: Référencer une police externe

+ +

 

+ +

L'élément mentionné font-face-uri vous permet de référencer une police externe, permettant donc une plus grande réutilisabilité :

+ +

 

+ +
<font>
+  <font-face font-family="Super Sans">
+    <font-face-src>
+      <font-face-uri xlink:href="fonts.svg#Super_Sans" />
+    </font-face-src>
+  </font-face>
+</font>
+ +
+
+

{{ PreviousNext("Web/SVG/Tutoriel/filtres","Web/SVG/Tutoriel/SVG_Image_Tag") }}

+
+
diff --git a/files/fr/web/svg/tutorial/svg_image_tag/index.html b/files/fr/web/svg/tutorial/svg_image_tag/index.html new file mode 100644 index 0000000000..8912c059d0 --- /dev/null +++ b/files/fr/web/svg/tutorial/svg_image_tag/index.html @@ -0,0 +1,36 @@ +--- +title: 'SVG: Elément image' +slug: Web/SVG/Tutoriel/SVG_Image_Tag +tags: + - Débutant + - SVG + - Tutoriel +translation_of: Web/SVG/Tutorial/SVG_Image_Tag +--- +

{{ 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.

+ +

Dans cet exemple basique, une image JPG liée par l'attribut {{ SVGAttr("xlink:href") }} sera rendue à l'intérieur d'un objet SVG.

+ +
<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
+  "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg width="5cm" height="4cm" version="1.1"
+     xmlns="http://www.w3.org/2000/svg" xmlns:xlink= "http://www.w3.org/1999/xlink">
+	<image xlink:href="firefox.jpg" x="0" y="0" height="50px" width="50px"/>
+</svg>
+ +

Il faut prendre note de quelques point essentiels (donnés par les spécifications W3):

+ + + +

{{ PreviousNext("Web/SVG/Tutoriel/polices_SVG", "Web/SVG/Tutoriel/Tools_for_SVG") }}

diff --git a/files/fr/web/svg/tutorial/svg_in_html_introduction/index.html b/files/fr/web/svg/tutorial/svg_in_html_introduction/index.html new file mode 100644 index 0000000000..29db7cb55b --- /dev/null +++ b/files/fr/web/svg/tutorial/svg_in_html_introduction/index.html @@ -0,0 +1,87 @@ +--- +title: Introduction à SVG dans HTML +slug: Web/SVG/Tutoriel/Introduction_à_SVG_dans_HTML +tags: + - SVG +translation_of: Web/SVG/Tutorial/SVG_In_HTML_Introduction +--- +

Aperçu

+ +

Cet article et son exemple associé montrent comment utiliser du SVG en ligne pour fournir une image de fond à un formulaire. Il montre comment JavaScript et CSS peuvent servir à manipuler l'image comme vous le feriez avec le XHTML dans un script. Notez que l'exemple ne fonctionnera que dans des navigateurs supportant XHTML (pas HTML) et l'intégration SVG.

+ +

Source

+ +

Voici le code source de cet exemple :

+ +
<html xmlns="http://www.w3.org/1999/xhtml">
+<head>
+  <title>XTech SVG Demo</title>
+  <style>
+    stop.begin { stop-color:yellow; }
+    stop.end { stop-color:green; }
+    body.invalid stop.end { stop-color:red; }
+    #err { display:none; }
+    body.invalid #err { display:inline; }
+  </style>
+  <script>
+    function signalError() {
+      document.getElementById('body').setAttribute("class", "invalid");
+    }
+  </script>
+</head>
+<body id="body"
+   style="position:absolute; z-index:0; border:1px solid black; left:5%; top:5%; width:90%; height:90%;">
+  <form>
+     <fieldset>
+       <legend>HTML Form</legend>
+       <p><label>Enter something:</label>
+          <input type="text"/>
+          <span id="err">Incorrect value!</span></p>
+       <p><button onclick="signalError();">Activate!</button></p>
+     </fieldset>
+  </form>
+  <svg xmlns="http://www.w3.org/2000/svg" version="1.1"
+    viewBox="0 0 100 100" preserveAspectRatio="xMidYMid slice"
+    style="width:100%; height:100%; position:absolute; top:0; left:0; z-index:-1;">
+    <linearGradient id="gradient">
+      <stop class="begin" offset="0%"/>
+      <stop class="end" offset="100%"/>
+    </linearGradient>
+    <rect x="0" y="0" width="100" height="100" style="fill:url(#gradient)" />
+    <circle cx="50" cy="50" r="30" style="fill:url(#gradient)" />
+  </svg>
+</body>
+</html>
+ +

Discussion

+ +

La page est principalement formée de XHTML, CSS et JavaScript classiques. La seule partie intéressante est le contenu de l'élément <svg>. Cet élément et ses fils sont déclarés comme étant dans l'espace de nommage SVG. L'élément contient un gradient et deux formes remplies avec le gradient. Les bornes de couleurs du gradient sont définies par une classe CSS. Lorsque l'utilisateur saisit quelque chose d'incorrect dans le formulaire, le script affecte l'attribut invalid à la balise <body> et une règle de style modifie la couleur end-stop du gradient en rouge en lui donnant la valeur « red » (Une autre règle de style sert à faire apparaître un message d'erreur).

+ +

Cette approche bénéficie des points suivants en sa faveur :

+ + + +

Détails

+ +

L'attribut viewBox établit un système de coordonnées logiques sur lequel les coordonnées de l'image SVG s'appuient de façon relative. Dans ce cas, notre image s'étend dans un cadre de visualisation de 100 sur 100.

+ +

L'attribut preserveAspectRatio spécifie que le ratio de rendu doit être préservé en centrant l'image dans l'espace disponible, en augmentant la largeur ou la hauteur à leur maximum et en tronquant les débordements.

+ +

L'attribut style ancre l'élément SVG en arrière plan du formulaire.

+ +

Liens sur le sujet

+ + + +

{{ languages( { "en": "en/SVG_In_HTML_Introduction", "ja": "ja/SVG_In_HTML_Introduction", "pl": "pl/SVG_w_XHTML_-_Wprowadzenie" } ) }}

diff --git a/files/fr/web/svg/tutorial/texts/index.html b/files/fr/web/svg/tutorial/texts/index.html new file mode 100644 index 0000000000..97871407d2 --- /dev/null +++ b/files/fr/web/svg/tutorial/texts/index.html @@ -0,0 +1,124 @@ +--- +title: Textes +slug: Web/SVG/Tutoriel/Texts +tags: + - SVG + - 'SVG:Tutoriel' +translation_of: Web/SVG/Tutorial/Texts +--- +
+
{{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.

+ +

Les bases

+ +

Nous avons vu dans l'exemple de l'introduction que l'élément text peut être utilisé pour mettre du texte dans des documents SVG:

+ +
<text x="10" y="10">Hello World!</text>
+
+ +

Les attributs x et y déterminent où le texte apparaîtra dans la fenêtre. L'attribut {{SVGAttr("text-anchor")}} spécifie l'alignement horizontal du texte (si ce point doit être le côté gauche, droit ou le centre du texte) et l'attribut {{SVGAttr("dominant-baseline")}} l'alignement vertical (si ce point est le haut, le bas ou le centre).

+ +

De même que les formes basiques, la couleur des éléments texte peut être modifié avec l'attribut fill pour le remplissage ou stroke pour le contour. Tout deux peuvent également faire référence à un dégradé ou motif, ce qui rend la coloration de texte SVG beaucoup plus puissante que CSS 2.1.

+ +

Définir la police

+ +

Une partie essentielle d'un texte est la police dans laquelle il est affiché. SVG offre un ensemble d'attributs pour spécifier la police, dont beaucoup sont similaires à leurs équivalents CSS. Chacune des propriétés suivantes peut être définie en tant qu'attribut ou via une déclaration CSS: {{SVGAttr("font-family")}}, {{SVGAttr("font-style")}}, {{SVGAttr("font-weight")}}, {{SVGAttr("font-variant")}}, {{SVGAttr("font-stretch")}}, {{SVGAttr("font-size")}}, {{SVGAttr("font-size-adjust")}}, {{SVGAttr("kerning")}}, {{SVGAttr("letter-spacing")}}, {{SVGAttr("word-spacing")}} et {{SVGAttr("text-decoration")}}.

+ +

Autres éléments liés au texte

+ +

tspan

+ +

Cet élément est utilisé pour baliser des sous-parties d'un texte. Il doit s'agit d'un enfant d'un élément text ou d'un autre élément tspan. Un cas typique consiste à écrire un mot d'une phrase en gras:

+
+ +
<text>
+  This is <tspan font-weight="bold" fill="red">bold and red</tspan>
+</text>
+
+ + + +

{{ EmbedLiveSample('Playable_code', '100%', 100) }}

+ +

L'élément tspan peut prendre les attributs personnalisés suivants:

+ +

x
+ Définit une nouvelle coordonnées absolue pour le texte qu'il contient. Cela écrase la position par défaut du texte. Cet attribut peut également contenir une liste de nombres, qui sont appliqués un par un à chaque caractère du tspan.

+ +

dx
+ Définit un décalage horizontal relatif à la position par défaut du texte. Ici aussi, vous pouvez founir une liste de valeurs qui seront appliquées consécutivement à chaque caractère.

+ +

y et dy sont utilisés de la même manière mais pour le déplacement vertical.

+ +

rotate
+ Applique une rotation aux caractères, avec le nombre de degrés donné. Donner une liste de nombres aura pour effet d'appliquer une rotation à chaque caractère respectif, la dernière valeur sera appliquée aux caractères restants.

+ +

textLength
+ Un attribut quelque peu obscur qui donne la longueur calculée de la chaîne. Il est destiné au moteur de rendu pour lui permettre d'affiner la position des glyphes, lorsque la longueur de texte mesurée ne correspond pas à celle qui est indiquée.

+ +

tref

+ +

L'élément tref permet de référencer un texte déjà définit, et recopie le texte à sa place. Vous devez utiliser l'attribut xlink:href pour définir l'élément à copier. Vous pouvez ensuite styliser le texte et modifier son apparence indépendamment de la source.

+ +
<text id="example">This is an example text.</text>
+
+<text>
+    <tref xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#example" />
+</text>
+
+ +

textPath

+ +

Cet élément récupère via son attribut xlink:href un chemin arbitraire et aligne ses caractères le long de ce chemin:

+ +
<path id="my_path" d="M 20,20 C 80,60 100,40 120,20" fill="transparent" />
+<text>
+  <textPath xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#my_path">
+    A curve.
+  </textPath>
+</text>
+ + + +

{{ EmbedLiveSample('Playable_code_2', '100%', 100) }}

+ +
{{PreviousNext("Web/SVG/Tutoriel/Motifs", "Web/SVG/Tutoriel/Transformations_de_base")}}
diff --git a/files/fr/web/svg/tutorial/tools_for_svg/index.html b/files/fr/web/svg/tutorial/tools_for_svg/index.html new file mode 100644 index 0000000000..f60f06c76f --- /dev/null +++ b/files/fr/web/svg/tutorial/tools_for_svg/index.html @@ -0,0 +1,70 @@ +--- +title: Outils pour SVG +slug: Web/SVG/Tutoriel/Tools_for_SVG +translation_of: Web/SVG/Tutorial/Tools_for_SVG +--- +

{{ PreviousNext("Web/SVG/Tutoriel/SVG_Image_Tag") }}

+ +

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.

+ +

Support des navigateurs

+ +

Avec l'arrivée de IE9, on peut enfin dire que les principaux navigateurs -  Internet Explorer 9, Mozilla Firefox, Safari, Google Chrome et Opera - supportent le SVG. Sur mobile c'est aussi le cas des navigateurs basés sur Webkit (principalement iOS et Android). Et il y a en général des chances pour que les appareils plus vieux ou plus petits supportent au moins SVG Tiny.

+ +

Inkscape

+ +

URL: www.inkscape.org

+ +

L'un des outils fondamentaux pour travailler un format graphique est un logiciel de dessin performant. Inkscape permet de faire du dessin vectoriel, il est mis à jour régulièrement, et a le mérite d'être open source.

+ +

Il utilise le SVG comme format natif, et l'étend avec des éléments et attributs définis dans un espace de nommage spécifique. On peut aussi choisir un export au format SVG standard.

+ +

Adobe Illustrator

+ +

URL: www.adobe.com/products/illustrator/

+ +

Avant de racheter Macromedia, Adobe était le plus ardent défenseur de SVG. C'est de cette époque que date le bon support du SVG dans Illustrator. Cependant, le code généré comporte souvent des bizarreries, qui obligent à le retraiter pour pouvoir l'utiliser en dehors d'Illustrator.

+ +

Apache Batik

+ +

URL: xmlgraphics.apache.org/batik/

+ +

Batik est un ensemble d'outils open source proposés par Apache Software Foundation. La boite à outils est codée en Java et assure un support quasi intégral de SVG 1.1, ainsi que certaines des fonctionnalités qui étaient prévues à l'origine pour SVG 1.2.

+ +

En plus d'un outil de visualisation (Squiggle) et d'un moteur d'aplatissement des calques pour l'export en PNG, Batik propose aussi un outil de formatage du code SVG, ainsi qu'un convertisseur de typographie TrueType vers SVG.

+ +

Utilisé avec Apache FOP, il permet également de transformer du SVG en PDF.

+ +

Autres moteurs de rendu

+ +

Il existe plusieurs projets qui permettent d'exporter une image tramée à partie d'une source SVG. ImageMagick est l'un des outils les plus connus de traitement des images en ligne de commande.  Wikipédia utilise la librairie de code Gnome rsvg pour le rendu de ses images SVG.

+ +

Raphael JS

+ +

URL: raphaeljs.com

+ +

Raphaël est un framework javascript, qui propose une couche d'abstraction pour les différentes implémentations des navigateurs. Les vieilles versions d'Internet Explorer sont supportées grace à la génération de code VML, un langage de balisage vectoriel, qui est l'un des ancêtres de SVG et existe depuis IE 5.5.

+ +

Snap.svg

+ +

URL: snapsvg.io

+ +

Une nouvelle couche d'abstraction JavaScript, plus récent, du même auteur que Raphael JS. Snap.svg est conçu pour les navigateurs modernes et prend donc en charge les dernières fonctionnalités SVG telles que la masquage, le découpage, les motifs, gradients et groupes. Il ne supporte pas les anciens navigateurs, contrairement à Raphael.

+ +

Google Docs

+ +

URL: www.google.com/google-d-s/drawings/

+ +

Les dessins réalisés dans Google Docs peuvent être exportés en SVG.

+ +

Science

+ +

Les fameux outils d'analyse de données xfig and gnuplot supportent l'export en SVG. Pour le rendu de graphiques sur le web JSXGraph supporte VML, SVG et canvas, proposant automatiquement l'un ou l'autre en fonction du support des navigateurs.

+ +

SVG est souvent utilisé dans les applications GIS (Geographic Information System) à la fois comme format de stockage et de rendu. Cf carto.net pour davantage de détails.

+ +

Autres outils

+ +

Le W3C propose une liste des programmes qui supportent le SVG.

+ +

{{ PreviousNext("Web/SVG/Tutoriel/SVG_Image_Tag") }}

diff --git a/files/fr/web/svg/tutoriel/contenu_embarque_svg/index.html b/files/fr/web/svg/tutoriel/contenu_embarque_svg/index.html deleted file mode 100644 index ecaf0e7d60..0000000000 --- a/files/fr/web/svg/tutoriel/contenu_embarque_svg/index.html +++ /dev/null @@ -1,36 +0,0 @@ ---- -title: Contenu embarqué dans le SVG -slug: Web/SVG/Tutoriel/Contenu_embarque_SVG -translation_of: Web/SVG/Tutorial/Other_content_in_SVG ---- -

{{ 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.

- -

Embarquer des images

- -

De la même façon qu'il est possible d'utiliser la balise img en HTML, le format SVG possède un élément image qui a la même utilité. Vous pouvez l'utiliser pour insérer des images bitmap ou vectorielles dans votre image SVG. La spécification définit que les formats PNG, JPEG et SVG au moins doivent être supportés.

- -

L'image embarquée devient un élément SVG normal. Cela implique que vous pouvez utiliser le découpage, les masques, les filtres, les rotations et toute la panoplie des outils svg sur ce contenu embarqué :

- -
<svg version="1.1"
-     xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
-     width="200" height="200">
-  <image x="90" y="-65" width="128" height="146" transform="rotate(45)"
-     xlink:href="https://developer.mozilla.org/media/img/mdn-logo.png"/>
-</svg>
-
- -

imagedemo.png

- -

Embarquer du contenu XML quelconque

- -

Étant donné que le SVG est un document XML, il est toujours possible d'adjoindre un contenu XML quelconque n'importe où dans le document. Mais il n'y a évidemment aucun moyen de savoir comment l'élément SVG encadrant votre contenu réagira à ce qui aura été inséré. En fait, un lecteur SVG correct ne réagira d'aucune façon particulière et ignorera purement et simplement ce contenu. Si la spécification ajoute l'élément SVG foreignObject, son utilité est essentiellement d'être une coquille pour d'autres balises et de permettre d'adjoindre des attributs de style (comme par exemple la largeur et la hauteur de l'objet embarqué afin de définir la place que celui-ci occupera).

- -

L'élément foreignObject est donc la bonne méthode pour embarquer du XHTML dans du SVG. Si le SVG doit contenir du texte de longueur conséquente, la disposition HTML est bien plus pratique et utilisable que l'élément SVG text. Une autre utilisation bien pratique de cet élément est l'adjonction de formules avec MathML. Pour des applications scientifiques utilisant le SVG, c'est un bon moyen de permettre la communication entre ces deux univers.

- -
Note: Gardez à l'esprit que le contenu du foreignObject doit pouvoir être analysé et pris en compte par votre lecteur SVG. Il y a peu de chances qu'un lecteur SVG autonome soit capable de restituer du contenu HTML or MathML.
- -

Etant donné que le foreignObject est un élément SVG comme un autre, vous pouvez, comme dans le case de l'élément image, utiliser toute la panoplie des attributs SVG qui pourrait s'appliquer au contenu embarqué.

- -

{{ PreviousNext("Web/SVG/Tutoriel/Découpages_et_masquages", "Web/SVG/Tutoriel/filtres") }}

diff --git "a/files/fr/web/svg/tutoriel/d\303\251coupages_et_masquages/index.html" "b/files/fr/web/svg/tutoriel/d\303\251coupages_et_masquages/index.html" deleted file mode 100644 index a4dd82b1dc..0000000000 --- "a/files/fr/web/svg/tutoriel/d\303\251coupages_et_masquages/index.html" +++ /dev/null @@ -1,91 +0,0 @@ ---- -title: Découpages et masquages -slug: Web/SVG/Tutoriel/Découpages_et_masquages -tags: - - SVG - - 'SVG:Tutoriel' -translation_of: Web/SVG/Tutorial/Clipping_and_masking ---- -

{{ 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.

- -

Le découpage (clipping) correspond au fait d'enlever des morceaux d'élément. Dans ce cas là, les effets de transparence ne sont pas permis, il s'agit d'une approche du tout-ou-rien.

- -

D'un autre côté, le masquage (masking) permet plus de souplesse en prenant en compte la transparence et les niveaux de gris.

- -

Découper

- -

Pour créer un demi-cercle, on définit d'abord un élément circle:

- -
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-  <defs>
-    <clipPath id="cut-off-bottom">
-      <rect x="0" y="0" width="200" height="100" />
-    </clipPath>
-  </defs>
-
-  <circle cx="100" cy="100" r="100" clip-path="url(#cut-off-bottom)" />
-</svg>
-
- -

On dessine ici un cercle d'un rayon de 100 pixels, dont le centre est placé au point (100,100). L'attribut clip-path fait référence à l'élément clipPath définit plus haut, qui est généralement placé dans la section defs.

- -

L'élément clipPath contient un simple rectangle qui, seul, remplirait en noir la moitié supérieur du canvas. Le rectangle ne sera pas dessiné, parce qu'il est définit dans un élément clipPath, il a pour effet de déterminer quels pixels seront affichés ou non dans le dessin final. Le rectangle ne couvrant que la partie supérieure du cercle, la partie inférieure du cercle ne sera pas affichée:

- -

{{ EmbedLiveSample('Découper','240','240','/files/3224/clipdemo.png') }}

- -

Nous avons maintenant un demi-cercle, sans avoir à passer par un arc dans un élément path. Pour le découpage, chaque forme à l'intérieur de clipPath est inspecté et évalué avec ses propriétés et ses transformations. Chaque zone transparente dans clipPath aura pour effet de masquer le contenu. La couleur, l'opacité et autres n'ont pas d'effet tant qu'ils ne rendent pas les formes complètement transparentes.

- -

Masquage

- -

Le masquage, contrairement au découpage permet de travailler avec des gradients. Si vous voulez qu'un élément disparaisse progressivement, vous y parviendrez en utiilisant des masques.

- -
<svg width="200" height="200" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-  <defs>
-    <linearGradient id="Gradient">
-      <stop offset="0" stop-color="white" stop-opacity="0" />
-      <stop offset="1" stop-color="white" stop-opacity="1" />
-    </linearGradient>
-    <mask id="Mask">
-      <rect x="0" y="0" width="200" height="200" fill="url(#Gradient)"  />
-    </mask>
-  </defs>
-
-  <rect x="0" y="0" width="200" height="200" fill="green" />
-  <rect x="0" y="0" width="200" height="200" fill="red" mask="url(#Mask)" />
-</svg>
-
- -

Vous pouvez voir qu'on a définit un rectangle vert en-dessous d'un rectangle rouge. Ce dernier a un attribut mask qui pointe vers le masque situé dans les définitions. Le contenu du masque est un simple élément rect, qui est rempli d'un gradient transparent-vers-blanc. Les pixels du rectangle rouge héritent de la valeur alpha (la transparence) du contenu du masque, si bien que le rectangle rouge est progressivement masqué et laisse voir le rectangle vert en-dessous:

- -

{{ EmbedLiveSample('Masquage','240','240','/files/3234/maskdemo.png') }}

- -

Transparence avec opacity

- -

Pour définir la transparence d'un élément entier, on peut utiliser l'attribut opacity:

- -
<rect x="0" y="0" width="100" height="100" opacity=".5" />
-
- -

Le rectangle ci-dessus sera dessiné semi-transparent.

- -

On peut également utiliser deux attributs distincts pour le remplissage et le contour: fill-opacity et stroke-opacity, pour contrôler l'opacité des propriétés fill et stroke respecitvement. Notez que le contour est dessiné au-dessus du remplissage. Ainsi, si vous rendez le contour semi-transparent et non le remplissage, celui-ci sera visible à travers le contour:

- -
<svg width="200" height="200" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-  <rect x="0" y="0" width="200" height="200" fill="blue" />
-  <circle cx="100" cy="100" r="50" stroke="yellow" stroke-width="40" stroke-opacity=".5" fill="red" />
-</svg>
-
- -

{{ EmbedLiveSample('Transparence_avec_opacity','240','240','/files/3231/opacitydemo.png') }}

- -

Vous pouvez voir dans cet exemple un cercle rouge sur un fond bleu. Le contour jaune a une opacité de 50%, si bien qu'on se retrouve avec une partie du remplissage en orange.

- -

Utilisation de techniques CSS bien connues

- -

Un des outils les plus puissants parmis l'arsenal du développeur web est display: none. Il n'est donc pas étonnant qu'il ait été décidé que cette propriété CSS serait également intégrée à SVG, de même que visibility et clip définis en CSS 2. Pour ré-afficher un élément précédemment caché avec display: none il est important de savoir que la valeur initiale des éléments SVG est inline.

- -

{{ PreviousNext("SVG/Tutoriel/Transformations_de_base", "Web/SVG/Tutoriel/Contenu_embarque_SVG") }}

- -

{{ languages( { "en": "en/SVG/Tutorial/Clipping_and_masking" } ) }}

diff --git a/files/fr/web/svg/tutoriel/fills_and_strokes/index.html b/files/fr/web/svg/tutoriel/fills_and_strokes/index.html deleted file mode 100644 index 54e0d792e2..0000000000 --- a/files/fr/web/svg/tutoriel/fills_and_strokes/index.html +++ /dev/null @@ -1,177 +0,0 @@ ---- -title: Remplissages et contours -slug: Web/SVG/Tutoriel/Fills_and_Strokes -tags: - - SVG - - 'SVG:Tutoriel' -translation_of: Web/SVG/Tutorial/Fills_and_Strokes ---- -

{{ 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.

- -

Attributs Fill et Stroke

- -

Colorer

- -

La coloration peut être faite en définissant deux attributs sur l'objet: fill et stroke. Fill définit la couleur de remplissage et stroke définit la couleur de la bordure. Vous pouvez utiliser la même convention de nommage des couleurs que CSS, que ce soit les noms (comme red), les valeurs rgb (comme rgb(255,0,0)), les valeurs hexadécimales, rgba, etc.

- -
<rect x="10" y="10" width="100" height="100"
-       stroke="blue" fill="purple"
-       stroke-opacity="0.8" fill-opacity="0.5"/>
-
- -

De plus, vous pouvez spécifier l'opacité de fill et/ou stroke. Celle-ci est contrôlé par les attributs fill-opacity et stroke-opacity respectivement.

- -
Note: Dans Firefox 3+, les valeurs rgba sont autorisés, ce qui donne le même effet qu'utiliser les attributs d'opacité. En revanche, pour être compatible avec les autres navigateurs, il est souvent préférable de spécifier fill/stoke-opacity séparemment. Si vous spécifiez à la fois une valeur rgba et fill/stoke-opacity, les deux seront appliquées.
- -

Options du contour

- -

Outre les propriétés de couleur, il existe quelques attributs additionnels pour contrôler la manière dont le contour est dessiné.

- -

stroke-width

- -

La propriété stroke-width définit la taille du contour. La ligne du contour est centrée autour du remplissage (si le contour vaut 10, 5 pixels du contour chevauchent le remplissage).

- -

stroke-linecap

- -

Le second attribut affectant le contour est la propriété stroke-linecap. Elle contrôle la forme des fins de ligne. Dans l'image ci-dessous, le chemin est dessiné en rose et le contour en noir.

- -

- -
<svg width="160" height="140" xmlns="http://www.w3.org/2000/svg" version="1.1">
-  <line x1="40" x2="120" y1="20" y2="20"
-        stroke-linecap="butt" stroke="black" stroke-width="20"/>
-  <line x1="40" x2="120" y1="60" y2="60"
-        stroke-linecap="square" stroke="black" stroke-width="20"/>
-  <line x1="40" x2="120" y1="100" y2="100"
-        stroke-linecap="round" stroke="black" stroke-width="20"/>
-</svg>
- -

{{ EmbedLiveSample('stroke-linecap', '220', '150') }}

- -

Il y a trois valeurs possibles pour stroke-linecap:

- - - -

stroke-linejoin

- -

La propriété stroke-linejoin permet de contrôler la manière de dessiner la liaison entre deux segments de ligne.

- -

- -
<svg width="160" height="280" xmlns="http://www.w3.org/2000/svg" version="1.1">
-  <polyline points="40 60 80 20 120 60" stroke="black" stroke-width="20"
-      stroke-linecap="butt" fill="none" stroke-linejoin="miter"/>
-
-  <polyline points="40 140 80 100 120 140" stroke="black" stroke-width="20"
-      stroke-linecap="round" fill="none" stroke-linejoin="round"/>
-
-  <polyline points="40 220 80 180 120 220" stroke="black" stroke-width="20"
-      stroke-linecap="square" fill="none" stroke-linejoin="bevel"/>
-</svg>
- -

{{ EmbedLiveSample('stroke-linejoin', '220', '150') }}

- -

Chacune des ces polylignes est composée de deux segments de lignes. La liaison entre les deux est contrôlée par l'attribut stroke-linejoin. Il y a trois valeurs possibles pour cet attribut:

- - - -

stroke-dasharray

- -

Finalement, vous pouvez également créer des lignes pointillées en spécifiant l'attribut stroke-dasharray.

- -

- -
<svg width="200" height="150" xmlns="http://www.w3.org/2000/svg" version="1.1">
-  <path d="M 10 75 Q 50 10 100 75 T 190 75" stroke="black"
-    stroke-linecap="round" stroke-dasharray="5,10,5" fill="none"/>
-  <path d="M 10 75 L 190 75" stroke="red"
-    stroke-linecap="round" stroke-width="1" stroke-dasharray="5,5" fill="none"/>
-</svg>
- -

{{ EmbedLiveSample('stroke-dasharray', '220', '150') }}

- -

L'attribut stroke-dasharray prend une série de nombres séparés par une virgule en argument. 

- -
-

Note: Contrairement aux paths, ces nombres doivent être séparés par des virgules (les espaces sont ignorés).

-
- -

Le premier nombre spécifie la distance du trait et le second la distance de l'espace. Dans l'exemple précédent, la ligne rouge commence par un trait de 5 suivit d'un espace de 5 (5,5), motif qui se répète sur le reste de la ligne. Vous pouvez spécifier davantage de nombres pour créer un motif de pointillés plus complexe. Pour la ligne noire on a spécifié trois nombres (5,10,5), ce qui a pour effet d'alterner le motif: (5 trait, 10 espace, 5 trait), (5 espace, 10 trait, 5 espace), etc.

- -

Autres

- -

Il existe d'autres propriétés disponibles:

- - - -

Utiliser CSS

- -

En plus de définir des attributs sur des objets, vous pouvez également utiliser CSS pour styliser les remplissages et les contours. Tous les attributs ne peuvent pas être définis via CSS. Ceux qui traitent le remplissage et le contour le sont généralement, fill, stroke, stroke-dasharray, etc... peuvent donc être définis de cette manière. Les attributs tels que width, height, ou les commandes des paths, ne peuvent pas être définis par CSS. Le plus simple est de tester pour découvrir ce qui est disponible et ce qui ne l'est pas.

- -
Note: La spécification SVG décide strictement entre les attributs qui sont des propriétés et les autres. Les premiers peuvent être modifiés avec CSS, les derniers non.
- -

En ligne

- -

CSS peut être inséré en ligne avec l'élément via l'attribut style:

- -
 <rect x="10" height="180" y="10" width="180" style="stroke: black; fill: red;"/>
-
- -

Dans un section style

- -

Sinon, il peut être déplacé vers une section style. Au lieu de l'insérer dans une section <head> comme vous le feriez en HTML, on la place dans la zone <defs> du SVG. <defs> (abbréviation de definitions) est l'endroit où vous placez les éléments qui n'apparaissent pas dans le SVG directement, mais qui sont utilisés par les autres éléments.

- -
<?xml version="1.0" standalone="no"?>
-<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg" version="1.1">
-  <defs>
-    <style type="text/css"><![CDATA[
-       #MyRect {
-         stroke: black;
-         fill: red;
-       }
-    ]]></style>
-  </defs>
-  <rect x="10" height="180" y="10" width="180" id="MyRect"/>
-</svg>
- -

Déplacer les styles dans une zone comme ceci peut rendre les choses plus simples pour ajuster les propriétés d'un grand nombre d'éléments. Vous pouvez également utiliser les pseudo-classes comme hover pour créer des effets:

- -
 #MyRect:hover {
-   stroke: black;
-   fill: blue;
- }
-
- -

Dans un fichier externe

- -

Ou vous pouvez spécifier une feuille de style externe pour vos règles CSS avec la syntaxe XML pour les stylesheets:

- -
<?xml version="1.0" standalone="no"?>
-<?xml-stylesheet type="text/css" href="style.css"?>
-
-<svg width="200" height="150" xmlns="http://www.w3.org/2000/svg" version="1.1">
-  <rect height="10" width="10" id="MyRect"/>
-</svg>
- -

où style.css ressemble à ça:

- -
#MyRect {
-  fill: red;
-  stroke: black;
-}
- -

{{ PreviousNext("Web/SVG/Tutoriel/Paths", "Web/SVG/Tutoriel/Gradients") }}

diff --git a/files/fr/web/svg/tutoriel/filtres/index.html b/files/fr/web/svg/tutoriel/filtres/index.html deleted file mode 100644 index b0f988398a..0000000000 --- a/files/fr/web/svg/tutoriel/filtres/index.html +++ /dev/null @@ -1,147 +0,0 @@ ---- -title: Filtres -slug: Web/SVG/Tutoriel/filtres -tags: - - SVG - - 'SVG:Tutoriel' -translation_of: Web/SVG/Tutorial/Filter_effects ---- -

{{ 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.

- -

Un exemple de base consiste à ajouter un effet de flou au contenu du SVG. Bien que des effets de flou simples peuvent être obtenus avec les gradients, le filtre est nécessaire pour quelque chose de plus complexe.

- -

Exemple

- -

Les filtres sont définis par l'élément {{SVGElement('filter')}}, qui doit ête placé dans la section <defs> de votre fichier SVG. Entre les balises du filtre, se placent une liste de primitives, des opérations basiques qui s'ajoutent aux opérations précédentes (tel que du flou, de la lumière, etc). Pour appliquer le filtre créé sur un élément graphique, on définit l'attribut {{SVGAttr('filter')}}.

- -
<svg width="250" viewBox="0 0 200 85"
-     xmlns="http://www.w3.org/2000/svg" version="1.1">
-  <defs>
-    <!-- Déclaration du filtre -->
-    <filter id="MyFilter" filterUnits="userSpaceOnUse"
-            x="0" y="0"
-            width="200" height="120">
-
-      <!-- offsetBlur -->
-      <feGaussianBlur in="SourceAlpha" stdDeviation="4" result="blur"/>
-      <feOffset in="blur" dx="4" dy="4" result="offsetBlur"/>
-
-      <!-- litPaint -->
-      <feSpecularLighting in="blur" surfaceScale="5" specularConstant=".75"
-                          specularExponent="20" lighting-color="#bbbbbb"
-                          result="specOut">
-        <fePointLight x="-5000" y="-10000" z="20000"/>
-      </feSpecularLighting>
-      <feComposite in="specOut" in2="SourceAlpha" operator="in" result="specOut"/>
-      <feComposite in="SourceGraphic" in2="specOut" operator="arithmetic"
-                   k1="0" k2="1" k3="1" k4="0" result="litPaint"/>
-
-      <!-- fusionne offsetBlur + litPaint -->
-      <feMerge>
-        <feMergeNode in="offsetBlur"/>
-        <feMergeNode in="litPaint"/>
-      </feMerge>
-    </filter>
-  </defs>
-
-  <!-- Éléments graphiques -->
-  <g filter="url(#MyFilter)">
-      <path fill="none" stroke="#D90000" stroke-width="10"
-            d="M50,66 c-50,0 -50,-60 0,-60 h100 c50,0 50,60 0,60z" />
-      <path fill="#D90000"
-            d="M60,56 c-30,0 -30,-40 0,-40 h80 c30,0 30,40 0,40z" />
-      <g fill="#FFFFFF" stroke="black" font-size="45" font-family="Verdana" >
-        <text x="52" y="52">SVG</text>
-      </g>
-  </g>
-</svg>
-
- -

{{ EmbedLiveSample('Exemple', '100%', 120) }}

- -

Étape 1

- -
<feGaussianBlur in="SourceAlpha"
-                stdDeviation="4"
-                result="blur"/>
- -

{{SVGElement('feGaussianBlur')}} prend en entrée (in) "SourceAlpha", qui est la couche alpha de l'élément source, applique un flou de 4, et stocke le résultat (result) dans un buffer temporaire nommé "blur".

- -

Étape 2

- -
<feOffset in="blur"
-          dx="4" dy="4"
-          result="offsetBlur"/>
- -

{{SVGElement('feOffset')}} prend en entrée (in) "blur", qu'on a crée précedemment, le décale de 4 vers la droite et 4 vers le bas, et stocke le résultat (result) dans le buffer "offsetBlur". Les deux premières primitives viennent de créer une ombre portée.

- -

Étape 3

- -
<feSpecularLighting in="blur"
-                    surfaceScale="5" specularConstant=".75"
-                    specularExponent="20" lighting-color="#bbbbbb"
-                    result="specOut">
-  <fePointLight x="-5000" y="-10000" z="20000"/>
-</feSpecularLighting>
- -

{{SVGelement('feSpecularLighting')}} prend en entrée (in) "blur", génère un effet d'éclairage, et stocke le résultat (result) dans le buffer "specOut".

- -

Étape 4

- -
<feComposite in="specOut" in2="SourceAlpha"
-             operator="in"
-             result="specOut"/>
- -

Le premier {{SVGElement('feComposite')}} prend en entrée (in, in2) "specOut" et "SourceAlpha", masque le résultat de "specOut" de telle sorte qu'il ne soit pas plus grand que "SourceAlpha" (l'élément graphique d'origine), et remplace le résultat (result) "specOut".

- -

Étape 5

- -
<feComposite in="SourceGraphic" in2="specOut"
-             operator="arithmetic"
-             k1="0" k2="1" k3="1" k4="0"
-             result="litPaint"/>
- -

Le second {{SVGElement('feComposite')}} prend en entrée (in, in2) "SourceAlpha" et "specOut", ajoute le résultat "specOut" au-dessus de "SourceAlpha", et stocke le résultat (result) dans "litPaint".

- -

Étape 6

- -
<feMerge>
-  <feMergeNode in="offsetBlur"/>
-  <feMergeNode in="litPaint"/>
-</feMerge>
- -

Finalement, {{SVGElement('feMerge')}} fusionne ensemble "offsetBlur", qui est l'ombre portée, et "litPaint", qui est l'élément d'origine avec l'effet d'éclairage.

- -
-
Source graphic -

Élément d'origine

-
- -
Primitive 1 -

Primitive 1

-
- -
Primitive 2 -

Primitive 2

-
- -
Primitive 3 -

Primitive 3

-
- -
Primitive 4 -

Primitive 4

-
- -
Primitive 5 -

Primitive 5

-
- -
Primitive 6 -

Primitive 6

-
-
- -

{{ PreviousNext("Web/SVG/Tutoriel/Contenu_embarque_SVG", "Web/SVG/Tutoriel/polices_SVG") }}

diff --git a/files/fr/web/svg/tutoriel/formes_de_base/index.html b/files/fr/web/svg/tutoriel/formes_de_base/index.html deleted file mode 100644 index aa75f0c0ed..0000000000 --- a/files/fr/web/svg/tutoriel/formes_de_base/index.html +++ /dev/null @@ -1,156 +0,0 @@ ---- -title: Formes de base -slug: Web/SVG/Tutoriel/Formes_de_base -tags: - - SVG -translation_of: Web/SVG/Tutorial/Basic_Shapes ---- -

{{ PreviousNext("SVG/Tutoriel/Positionnement", "Web/SVG/Tutoriel/Paths") }}

- -

Il existe tout un ensemble de formes de base utilisées pour faire du dessin via SVG. Le but de ces formes 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. 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.

- -

Ajout de formes

- -

Pour insérer une forme, vous devez ajouter un élément dans un document. Des éléments différents  correspondent à des formes différentes et ont des attributs différents pour décrire leur taille et leur position. Certaines déclarations sont très fortement redondantes en ce qu'elles peuvent être créées par d'autres formes, mais elles sont toutes là de manière à faciliter votre vie et à rendre le document SVG aussi court et lisible que possible. Toutes les formes de bases sont affichées sur l'image de gauche. Le code pour générer tout cela ressemble à cela :

- -

- -
<?xml version="1.0" standalone="no"?>
-<svg width="200" height="250" version="1.1" xmlns="http://www.w3.org/2000/svg">
-
-  <rect x="10" y="10" width="30" height="30" stroke="black" fill="transparent" stroke-width="5"/>
-  <rect x="60" y="10" rx="10" ry="10" width="30" height="30" stroke="black" fill="transparent" stroke-width="5"/>
-
-  <circle cx="25" cy="75" r="20" stroke="red" fill="transparent" stroke-width="5"/>
-  <ellipse cx="75" cy="75" rx="20" ry="5" stroke="red" fill="transparent" stroke-width="5"/>
-
-  <line x1="10" x2="50" y1="110" y2="150" stroke="orange" fill="transparent" stroke-width="5"/>
-  <polyline points="60 110 65 120 70 115 75 130 80 125 85 140 90 135 95 150 100 145"
-      stroke="orange" fill="transparent" stroke-width="5"/>
-
-  <polygon points="50 160 55 180 70 180 60 190 65 205 50 195 35 205 40 190 30 180 45 180"
-      stroke="green" fill="transparent" stroke-width="5"/>
-
-  <path d="M20,230 Q40,205 50,230 T90,230" fill="none" stroke="blue" stroke-width="5"/>
-</svg>
-
- -
Note : les attributs stroke, stroke-width et fill sont détaillés plus loin dans ce tutoriel.
- -

Figures de bases

- -

Rectangles

- -

L'élément rect, comme son nom ne l'indique peut-être pas, dessine à l'écran des rectangles. Il existe 6 attributs de base qui contrôlent la position et la forme du rectangle dessiné ici. L'image précédente affichait 2 rectangles, ce qui est un peu répétitif. Celui de droite possède des attributs rx et ry définis, ce qui lui donne des coins arrondis. Si ces attributs ne sont pas définis, leur valeur par défaut est de 0, ce qui a pour résultats d'afficher un rectangle avec des angles droits.

- -
 <rect x="10" y="10" width="30" height="30"/>
- <rect x="60" y="10" rx="10" ry="10" width="30" height="30"/>
-
- -
-
x
-
Position du rectangle sur l'axe horizontal par rapport au coin supérieur gauche.
-
y
-
Position du rectangle sur l'axe vertical par rapport au coin supérieur gauche.
-
width
-
Largeur du rectangle.
-
height
-
Hauteur du rectangle.
-
rx
-
Rayon x des coins du rectangle.
-
ry
-
Rayon y des coins du rectangle.
-
- -

Cercles

- -

De la même manière, il est facile de deviner la fonction de l'élément circle. Il dessine à l'écran un cercle. Seuls 3 attributs peuvent être définis pour cet élément.

- -
 <circle cx="25" cy="75" r="20"/>
-
- -
-
r
-
Rayon du cercle.
-
cx
-
Position x du centre du cercle.
-
cy
-
Position y du centre du cercle.
-
- -

Ellipses

- -

Les ellipses sont juste des sortes de cercles bien particuliers, où l'on peut modifier les rayons x et y séparemment l'un de l'autre (les matheux appellent ces rayons le grand axe et le petit axe).

- -
 <ellipse cx="75" cy="75" rx="20" ry="5"/>
-
- -
-
rx
-
Rayon x de l'ellipse.
-
ry
-
Rayon y de l'ellipse.
-
cx
-
Position x du centre de l'ellipse.
-
cy
-
Position y du centre de l'ellipse.
-
- -

Figures complexes

- -

Lignes

- -

Les lignes droites permettent de créer des figures plus complexes, en les additionnant les unes avec les autres. L'élément line en SVG correspond au segment que l'on apprend en géométrie traditionnelle : c'est une portion de droite délimitée par 2 points. Donc pour définir une droite en SVG, il va falloir lui donner pour attribut les coordonnées des deux points qui la définissent.

- -
 <line x1="10" x2="50" y1="110" y2="150"/>
-
- -
-
x1
-
Position x du premier point.
-
x2
-
Position x du deuxième point.
-
y1
-
Position y du premier point.
-
y2
-
Position y du deuxième point.
-
- -

Lignes brisées

- -

Les lignes brisées, aussi appelées lignes polygonales, sont définies par l'élément polyline en SVG. Elles sont constituées d'un ensemble de lignes droites connectées entre elles, donc d'un ensemble de points se reliant entre eux suivant un ordre défini. Comme ce lot de points peut être assez conséquent à déclarer, un seul attribut est utilisé pour déclarer l'ensemble de points :

- -
 <polyline points="60 110, 65 120, 70 115, 75 130, 80 125, 85 140, 90 135, 95 150, 100 145"/>
-
- -
-
points
-
Liste des points, chaque pair de nombres correspondant aux coordonnées x et y de chaque point. Chaque position x est séparée de la position y par un espace. Chaque ensemble de coordonnées est séparé du suivant par une virgule.
-
- -

Polygones

- -

Le polygone fonctionne exactement de la même manière que la ligne brisée. Au final, un polygone n'est rien d'autre qu'une ligne brisée qui relie une série de points. Toutefois, pour les polygones, le chemin de cette ligne retourne automatiquement au point de départ, créant ainsi une forme fermée. Il est à noter que le rectangle est un type de polygone particulier. Il est donc possible, pour des besoins de flexibilité, de déclarer un rectangle en utilisant l'élément polygon.

- -
<polygon points="50 160, 55 180, 70 180, 60 190, 65 205, 50 195, 35 205, 40 190, 30 180, 45 180"/>
- -
-
points
-
Idem que l'attribut points de l'élément polyline. Liste des points, chaque paire de nombres correspondant aux coordonnées x et y de chaque point. Chaque position x est séparée de la position y par un espace, chaque ensemble de coordonnées est séparé du suivant par une virgule. Une dernière ligne ferme automatiquement la forme en retournant au point de départ.
-
- -

Chemins

- -

L'élément pour tracer les chemins, très logiquement nommé path, est sûrement la forme la plus généraliste qui peut être utilisée en SVG. Avec un élément path, vous pouvez dessiner un rectangle (avec ou sans coins arrondis), des cercles, des ellipses, des lignes brisées et des polygones. De manière plus basique, il est aussi possible de dessiner d'autres types de formes, comme des courbes de Bézier, des paraboles, et bien plus encore. Pour cette raison, l'élément path en lui même sera un chapitre entier de ce tutoriel, mais pour le moment, nous allons juste voir comment définir cet élément.

- -
 <path d="M 20 230 Q 40 205, 50 230 T 90230"/>
-
- -
-
d
-
Un ensemble d'information définissant le chemin à dessiner. Pour en savoir plus, allez à la page à propos des Chemins.
-
- -

{{ PreviousNext("SVG/Tutoriel/Positionnement", "Web/SVG/Tutoriel/Paths") }}

- -

Interwiki Languages Links

diff --git a/files/fr/web/svg/tutoriel/gradients/index.html b/files/fr/web/svg/tutoriel/gradients/index.html deleted file mode 100644 index ef9c235318..0000000000 --- a/files/fr/web/svg/tutoriel/gradients/index.html +++ /dev/null @@ -1,224 +0,0 @@ ---- -title: Gradients SVG -slug: Web/SVG/Tutoriel/Gradients -tags: - - SVG - - 'SVG:Tutoriel' -translation_of: Web/SVG/Tutorial/Gradients ---- -

{{ 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.

- -

Il y a deux types de dégradés: linéaire et radial. Les dégradés sont définis dans la section defs et non sur les formes elles-mêmes — cela favorise leur réusabilité. Vous devez donner au dégradé un attribut id; autrement, il ne pourra pas être utilisé par les autres éléments à l'intérieur du fichier SVG.

- -

Dégradé Linéaire

- -

Les dégradés linéaires (linear gradient en anglais) changent de couleur le long d'une ligne droite. Pour en insérer un, on crée un élément {{SVGElement('linearGradient')}} dans la section des définitions du fichier SVG.

- -

Exemple

- -

Un exemple de dégradé linéaire appliqué à un élément <rect>:

- -
<svg width="120" height="240" version="1.1" xmlns="http://www.w3.org/2000/svg">
-  <defs>
-      <linearGradient id="Gradient1" x1="0" x2="0" y1="0" y2="1">
-        <stop offset="0%" stop-color="red"/>
-        <stop offset="50%" stop-color="black" stop-opacity="0"/>
-        <stop offset="100%" stop-color="blue"/>
-      </linearGradient>
-      <linearGradient id="Gradient2">
-        <stop class="stop1" offset="0%"/>
-        <stop class="stop2" offset="50%"/>
-        <stop class="stop3" offset="100%"/>
-      </linearGradient>
-      <style type="text/css"><![CDATA[
-        #rect1 { fill: url(#Gradient2); }
-        .stop1 { stop-color: red; }
-        .stop2 { stop-color: black; stop-opacity: 0; }
-        .stop3 { stop-color: blue; }
-      ]]></style>
-  </defs>
-
-  <rect x="10" y="120" rx="15" ry="15" width="100" height="100" fill="url(#Gradient1)"/>
-  <rect x="10" y="10" rx="15" ry="15" width="100" height="100" id="rect1" />
-</svg>
- -

{{ EmbedLiveSample('SVGLinearGradient','120','240','/files/722/SVG_Linear_Gradient_Example.png') }}

- -

Définir le dégradé

- -

À l'intérieur du dégradé, il y a divers noeuds {{SVGElement('stop')}}. Ces noeuds disent au dégradé quelles couleurs doivent être affichées à quelles positions, en spécifiant les attributs offset pour la position et stop-color pour la couleur. On peut également le définir avec CSS. Les deux méthodes ont été utilisées dans l'exemple pour le démontrer.

- -

Dans cet exemple, on dit au dégradé de commencer en rouge, de passer au noir transparent au centre et de terminer par la couleur bleue. Vous pouvez ajouter autant de couleurs que vous le souhaitez, pour créer un dégradé aussi beau ou aussi laid que vous le souhaitez, mais les positions (offset) doivent toujours être incrementées de 0% (ou 0) à 100% (ou 1). Si des valeurs sont dupliquées, la couleur définie la plus en bas de la définition sera utilisée.

- -

Aussi, comme pour le remplissage et le contour, vous pouvez spécifier un attribut stop-opacity pour définir l'opacité de la couleur à cette position (encore une fois, à partir de FF3 vous pouvez utiliser les valeurs rgba pour le même effet).

- -
 <stop offset="100%" stop-color="yellow" stop-opacity="0.5"/>
-
- -

Utiliser le dégradé

- -

Pour utiliser le dégradé, vous devez le référencer avec l'attribut fill ou stroke d'un objet. On référence un élément SVG de la même manière que l'on référence des éléments en CSS, via url(). Dans notre cas, l'url est juste une référence vers le dégradé avec l'ID "Gradient". Pour le référencer, on définit fill="url(#Gradient)", et voilà! Notre objet est maintenant multi-coloré. Vous pouvez faire de même avec stroke.

- -

Orientation du dégradé

- -

L'élément <linearGradient> peut également prendre différents attributs pour spécifier la taille et l'apparence du dégradé. L'orientation du dégradé est contrôlé par deux points, désignés par les attributs x1, x2, y1, et y2. Ces attributs définissent la ligne le long de laquelle le dégradé est tracé. Par défaut, le dégradé est horizontal, mais il peut être orienté autrement grâce à ces attributs. "Gradient2" dans l'exemple précédent crée un dégradé vertical.

- -
 <linearGradient id="Gradient2" x1="0" x2="0" y1="0" y2="1">
-
- -

xlink:href

- -

Vous pouvez également utiliser l'attribut xlink:href sur les dégradés. Quand il est utilisé, les attributs et stops d'un dégradé peuvent être réutilisé sur un autre. Ainsi, dans l'exemple précédent, on aurait pu ne pas redéfinir tous les stops dans Gradient2, comme ceci:

- -
 <linearGradient id="Gradient1">
-   <stop id="stop1" offset="0%"/>
-   <stop id="stop2" offset="50%"/>
-   <stop id="stop3" offset="100%"/>
- </linearGradient>
- <linearGradient id="Gradient2" x1="0" x2="0" y1="0" y2="1"
-    xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#Gradient1"/>
-
- -

Ici, le namespace xlink est inclut directement sur le noeud, bien qu'il soit généralement définit en haut du document, comme dans l'exemple avec les images

- -

Dégradé Radial

- -

Les dégradés radiaux (radial gradient en anglais) sont similaires aux dégradés linéaires à la différence près qu'ils irradient autour d'un point. Pour en créer un, on crée un élément {{SVGElement('radialGradient')}} dans la section de définitions du document SVG.

- -

Exemple

- -
<svg width="120" height="240" version="1.1" xmlns="http://www.w3.org/2000/svg">
-  <defs>
-      <radialGradient id="RadialGradient1">
-        <stop offset="0%" stop-color="red"/>
-        <stop offset="100%" stop-color="blue"/>
-      </radialGradient>
-      <radialGradient id="RadialGradient2" cx="0.25" cy="0.25" r="0.25">
-        <stop offset="0%" stop-color="red"/>
-        <stop offset="100%" stop-color="blue"/>
-      </radialGradient>
-  </defs>
-
-  <rect x="10" y="10" rx="15" ry="15" width="100" height="100" fill="url(#RadialGradient1)"/>
-  <rect x="10" y="120" rx="15" ry="15" width="100" height="100" fill="url(#RadialGradient2)"/>
-</svg>
- -

{{ EmbedLiveSample('Exemple_2','120','240','/files/726/SVG_Radial_Gradient_Example.png') }}

- -

Définir le dégradé

- -

Les stops utilisés ici sont les mêmes que précédemment, la différence étant que désormais l'objet sera rouge en son centre, et que la couleur changera progressivement vers le bleu en approchant des contours. Comme pour les dégradés linéaires, le noeud <radialGradient> peut prendre différents attributs pour décrire sa position et son orientation. Cependant, la définition est un peu plus complexe. Le dégradé linéaire est défini par deux points, qui déterminent où sont situé le centre et les bords:

- - - -

Centre et point focal

- -
<svg width="120" height="120" version="1.1"
-  xmlns="http://www.w3.org/2000/svg">
-  <defs>
-      <radialGradient id="Gradient"
-            cx="0.5" cy="0.5" r="0.5" fx="0.25" fy="0.25">
-        <stop offset="0%" stop-color="red"/>
-        <stop offset="100%" stop-color="blue"/>
-      </radialGradient>
-  </defs>
-
-  <rect x="10" y="10" rx="15" ry="15" width="100" height="100"
-        fill="url(#Gradient)" stroke="black" stroke-width="2"/>
-
-  <circle cx="60" cy="60" r="50" fill="transparent" stroke="white" stroke-width="2"/>
-  <circle cx="35" cy="35" r="2" fill="white" stroke="white"/>
-  <circle cx="60" cy="60" r="2" fill="white" stroke="white"/>
-  <text x="38" y="40" fill="white" font-family="sans-serif" font-size="10pt">(fx,fy)</text>
-  <text x="63" y="63" fill="white" font-family="sans-serif" font-size="10pt">(cx,cy)</text>
-
-</svg>
- -

{{ EmbedLiveSample('Centre_et_point_focal','120','120','/files/727/SVG_Radial_Grandient_Focus_Example.png') }}

- -

Si le point focal est déplacé en dehors du cercle décrit précédemment, il est impossible que le dégradé s'affiche correctement, le point focal sera donc supposé être à l'intérieur du bord du cercle. Si le point focal n'est pas du tout indiqué, il sera supposé être au même endroit que le point central.

- -

Attributs additionnels

- -

Les dégradés linéaires et radiaux peuvent également prendre quelques autres attributs pour décrire les transformations qu'ils peuvent subir.

- -

spreadMethod

- -

Cet attribut contrôle ce qu'il arrive quand le dégradé arrive à sa fin, mais que l'objet n'est pas encore rempli. Trois valeurs sont possibles: "pad", "reflect", ou "repeat".

- - - -
<svg width="220" height="220" version="1.1" xmlns="http://www.w3.org/2000/svg">
-  <defs>
-      <!-- pad -->
-      <radialGradient id="GradientPad"
-            cx="0.5" cy="0.5" r="0.4" fx="0.75" fy="0.75"
-            spreadMethod="pad">
-        <stop offset="0%" stop-color="red"/>
-        <stop offset="100%" stop-color="blue"/>
-      </radialGradient>
-
-      <!-- repeat -->
-      <radialGradient id="GradientRepeat"
-            cx="0.5" cy="0.5" r="0.4" fx="0.75" fy="0.75"
-            spreadMethod="repeat">
-        <stop offset="0%" stop-color="red"/>
-        <stop offset="100%" stop-color="blue"/>
-      </radialGradient>
-
-      <!-- reflect -->
-      <radialGradient id="GradientReflect"
-            cx="0.5" cy="0.5" r="0.4" fx="0.75" fy="0.75"
-            spreadMethod="reflect">
-        <stop offset="0%" stop-color="red"/>
-        <stop offset="100%" stop-color="blue"/>
-      </radialGradient>
-  </defs>
-
-  <rect x="10" y="10" rx="15" ry="15" width="100" height="100" fill="url(#GradientPad)"/>
-  <rect x="10" y="120" rx="15" ry="15" width="100" height="100" fill="url(#GradientRepeat)"/>
-  <rect x="120" y="120" rx="15" ry="15" width="100" height="100" fill="url(#GradientReflect)"/>
-
-  <text x="15" y="30" fill="white" font-family="sans-serif" font-size="12pt">Pad</text>
-  <text x="15" y="140" fill="white" font-family="sans-serif" font-size="12pt">Repeat</text>
-  <text x="125" y="140" fill="white" font-family="sans-serif" font-size="12pt">Reflect</text>
-
-</svg>
- -

{{ EmbedLiveSample('spreadMethod','220','220','/files/728/SVG_SpreadMethod_Example.png') }}

- -

gradientUnits

- -

Les deux types de dégradés ont également un attribut gradientUnits, qui indique l'unité utilisée pour décrire la taille et l'orientation du dégradé. Deux valeurs sont posibles: userSpaceOnUse ou objectBoundingBox.

- - - -

Il y a quelques subtilités concernant l'utilisation de gradientUnits="objectBoundingBox" quand les limites de l'objet ne sont pas carrées, mais elles sont assez complexes et nous attendrons quelqu'un de plus au courant pour les expliquer.

- -

gradientTransform

- -

Vous pouvez également appliquer une transformation au gradient en utilisant l'attribut gradientTransform, mais puisque nous n'avons pas encore introduit les transformations, nous le laisserons de côté pour l'instant.

- -

 

- -

{{ PreviousNext("Web/SVG/Tutoriel/Fills_and_Strokes", "Web/SVG/Tutoriel/Motifs") }}

- -

 

diff --git a/files/fr/web/svg/tutoriel/index.html b/files/fr/web/svg/tutoriel/index.html deleted file mode 100644 index 14275fcdd8..0000000000 --- a/files/fr/web/svg/tutoriel/index.html +++ /dev/null @@ -1,36 +0,0 @@ ---- -title: Tutoriel SVG -slug: Web/SVG/Tutoriel -tags: - - NeedsContent - - SVG - - 'SVG:Tutoriel' -translation_of: Web/SVG/Tutorial ---- -

SVG, pour Scalable Vector Graphics (ou encore Graphismes vectoriels redimensionnables), est un langage basé sur le 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. Le W3C fournit également une bonne introduction au format SVG, en anglais malheureusement.

- -
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 Julia. Merci d'avance !
- - - -

{{ languages( { "en": "en/SVG/Tutorial", "ja": "ja/SVG/Tutorial", "pl": "pl/SVG/Przewodnik" } ) }}

diff --git a/files/fr/web/svg/tutoriel/introduction/index.html b/files/fr/web/svg/tutoriel/introduction/index.html deleted file mode 100644 index 7c38618958..0000000000 --- a/files/fr/web/svg/tutoriel/introduction/index.html +++ /dev/null @@ -1,54 +0,0 @@ ---- -title: Introduction -slug: Web/SVG/Tutoriel/Introduction -tags: - - SVG - - 'SVG:Tutoriel' -translation_of: Web/SVG/Tutorial/Introduction ---- -

{{ PreviousNext("SVG/Tutoriel", "SVG/Tutoriel/Premiers_pas") }}

- -

lion_svg.pngSVG est un langage XML, assez similaire au 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é.

- -

La seconde particularité est que vous allez pouvoir lire le code. Stop ! Lire une image ? Et oui, cela vient du fait que SVG dérive du XML. Nous verrons dans ce tutoriel que le code SVG reste (la plupart du temps) humainement lisible. C'est aussi sympa car on va pouvoir le transformer en arbre DOM et ainsi le manipuler, avec du CSS et / ou du Javascript.

- -

SVG est apparu en 1999, après que plusieurs formats concurrents aient été soumis au W3C  sans succès. SVG est pris en charge par tous les principaux navigateurs. Un inconvénient est que le chargement SVG peut être lent. En contrepartie, l'avantage c'est de disposer du DOM et de ne pas nécessiter d'extensions tierces. Choisir d'utiliser ou non SVG dépend souvent des cas d'utilisation.

- -

Les ingrédients de base

- -

HTML founit des éléments pour définir des titres, paragraphes, tableaux, etc. De la même manière, SVG fournit des éléments pour dessiner des cercles, des rectangles, des courbes simples ou complexes, etc.

- -

Un simple document SVG se compose de l'élément racine {{ SVGElement('svg') }}, à l'intérieur de laquelle vont être placées divers éléments. L'élément {{ SVGElement('g') }} permet de regrouper plusieurs éléments ensemble, un peu à la manière d'un div en HTML. À partir de là, l'image SVG peut devenir aussi complexe qu'on le veut.

- -

SVG prend en charge les dégradés, les rotations, les effets de filtre, les animations, l'interactivité avec JavaScript... Mais toutes ces fonctionnalités reposent sur un petit nombre d'éléments de base.

- -

Les bons outils

- -

Il y a un certain nombre de logiciels de dessin disponibles qui utilisent SVG comme format natif. Certains, comme Inkscape, sont libres et gratuits. Néanmoins, ce tutoriel se basera sur le XML et un simple éditeur de texte. Le but est d'enseigner les mécanismes de SVG à ceux qui veulent les comprendre, et la meilleure façon de le faire est de mettre les mains dans le cambouis avec un peu de balisage.

- -

Tous les visionneurs SVG ne sont pas égaux, il est donc probable que quelque chose écrit pour une application ne s'affiche pas exctement de la même manière dans une autre, simplement parce qu'ils prennent en charge différentes spécifications SVG, CSS ou JavaScript.

- -

Avant de commencer, vous devez avoir une compréhension basique du XML ou d'un autre langage de balisage comme le HTML. Si vous n'êtes pas à l'aise avec le XML, voici quelques règles à garder en-tête :

- - - -

La spécification du langage SVG (en) est énorme. Ce tutoriel a pour but d'en traiter juste assez pour pouvoir commencer. Une fois que vous serez à l'aise avec les bases du SVG, vous devriez être capables d'utiliser les références d'éléments et les références d'interfaces pour découvrir tout ce que vous aurez besoin de connaître.

- -

Les versions SVG

- -

La version "complète" la plus récente de SVG est la 1.1 (devenue recommendation en 2003). Elle s'appuie sur SVG 1.0 mais ajoute davantage de modularisation pour faciliter l'implémentation. La seconde édition de SVG 1.1, est devenue recommendation en 2011.

- -

SVG 1.2 devait être la prochaine version majeure de SVG mais celle-ci a été abandonnée pour le prochain SVG 2.0, qui est actuellement en cours de développement. SVG 2.0 suit une approche similaire à CSS3: il divise les composants en plusieurs spécifications librement couplées.

- -

Outre les recommendations complètes de SVG, le groupe de travail du W3C a introduit SVG Tiny et SVG basic en 2003. Ces deux profils d'adressent principalement aux mobiles. SVG Tiny devrait permettre d'obtenir des graphiques simples pour les périphériques qui ont de faibles capacités. SVG Basic, lui, offre de nombreuses fonctionnalités de SVG, mais n'inclut pas celles qui sont difficiles à implémenter ou lourdes à restituer (comme les animations). En 2008, SVG Tiny 1.2 est devenu une recommendation du W3C.

- -

Une spécification SVG Print était prévue, qui ajouterait la prise en charge de plusieurs pages et une gestion améliorée des couleurs. Ce travail a été interrompu.

- -

{{ PreviousNext("SVG/Tutoriel", "SVG/Tutoriel/Premiers_pas") }}

- -

Interwiki Languages Links

- -

{{ languages( { "en": "en/SVG/Tutorial/Introduction", "ja": "ja/SVG/Tutorial/Introduction" } ) }}

diff --git "a/files/fr/web/svg/tutoriel/introduction_\303\240_svg_dans_html/index.html" "b/files/fr/web/svg/tutoriel/introduction_\303\240_svg_dans_html/index.html" deleted file mode 100644 index 29db7cb55b..0000000000 --- "a/files/fr/web/svg/tutoriel/introduction_\303\240_svg_dans_html/index.html" +++ /dev/null @@ -1,87 +0,0 @@ ---- -title: Introduction à SVG dans HTML -slug: Web/SVG/Tutoriel/Introduction_à_SVG_dans_HTML -tags: - - SVG -translation_of: Web/SVG/Tutorial/SVG_In_HTML_Introduction ---- -

Aperçu

- -

Cet article et son exemple associé montrent comment utiliser du SVG en ligne pour fournir une image de fond à un formulaire. Il montre comment JavaScript et CSS peuvent servir à manipuler l'image comme vous le feriez avec le XHTML dans un script. Notez que l'exemple ne fonctionnera que dans des navigateurs supportant XHTML (pas HTML) et l'intégration SVG.

- -

Source

- -

Voici le code source de cet exemple :

- -
<html xmlns="http://www.w3.org/1999/xhtml">
-<head>
-  <title>XTech SVG Demo</title>
-  <style>
-    stop.begin { stop-color:yellow; }
-    stop.end { stop-color:green; }
-    body.invalid stop.end { stop-color:red; }
-    #err { display:none; }
-    body.invalid #err { display:inline; }
-  </style>
-  <script>
-    function signalError() {
-      document.getElementById('body').setAttribute("class", "invalid");
-    }
-  </script>
-</head>
-<body id="body"
-   style="position:absolute; z-index:0; border:1px solid black; left:5%; top:5%; width:90%; height:90%;">
-  <form>
-     <fieldset>
-       <legend>HTML Form</legend>
-       <p><label>Enter something:</label>
-          <input type="text"/>
-          <span id="err">Incorrect value!</span></p>
-       <p><button onclick="signalError();">Activate!</button></p>
-     </fieldset>
-  </form>
-  <svg xmlns="http://www.w3.org/2000/svg" version="1.1"
-    viewBox="0 0 100 100" preserveAspectRatio="xMidYMid slice"
-    style="width:100%; height:100%; position:absolute; top:0; left:0; z-index:-1;">
-    <linearGradient id="gradient">
-      <stop class="begin" offset="0%"/>
-      <stop class="end" offset="100%"/>
-    </linearGradient>
-    <rect x="0" y="0" width="100" height="100" style="fill:url(#gradient)" />
-    <circle cx="50" cy="50" r="30" style="fill:url(#gradient)" />
-  </svg>
-</body>
-</html>
- -

Discussion

- -

La page est principalement formée de XHTML, CSS et JavaScript classiques. La seule partie intéressante est le contenu de l'élément <svg>. Cet élément et ses fils sont déclarés comme étant dans l'espace de nommage SVG. L'élément contient un gradient et deux formes remplies avec le gradient. Les bornes de couleurs du gradient sont définies par une classe CSS. Lorsque l'utilisateur saisit quelque chose d'incorrect dans le formulaire, le script affecte l'attribut invalid à la balise <body> et une règle de style modifie la couleur end-stop du gradient en rouge en lui donnant la valeur « red » (Une autre règle de style sert à faire apparaître un message d'erreur).

- -

Cette approche bénéficie des points suivants en sa faveur :

- - - -

Détails

- -

L'attribut viewBox établit un système de coordonnées logiques sur lequel les coordonnées de l'image SVG s'appuient de façon relative. Dans ce cas, notre image s'étend dans un cadre de visualisation de 100 sur 100.

- -

L'attribut preserveAspectRatio spécifie que le ratio de rendu doit être préservé en centrant l'image dans l'espace disponible, en augmentant la largeur ou la hauteur à leur maximum et en tronquant les débordements.

- -

L'attribut style ancre l'élément SVG en arrière plan du formulaire.

- -

Liens sur le sujet

- - - -

{{ languages( { "en": "en/SVG_In_HTML_Introduction", "ja": "ja/SVG_In_HTML_Introduction", "pl": "pl/SVG_w_XHTML_-_Wprowadzenie" } ) }}

diff --git a/files/fr/web/svg/tutoriel/motifs/index.html b/files/fr/web/svg/tutoriel/motifs/index.html deleted file mode 100644 index 29a63e8f60..0000000000 --- a/files/fr/web/svg/tutoriel/motifs/index.html +++ /dev/null @@ -1,266 +0,0 @@ ---- -title: Motifs -slug: Web/SVG/Tutoriel/Motifs -tags: - - SVG - - 'SVG:Tutoriel' -translation_of: Web/SVG/Tutorial/Patterns ---- -

{{ 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.

- -

Exemple

- -
<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
-  <defs>
-    <linearGradient id="Gradient1">
-      <stop offset="5%" stop-color="white"/>
-      <stop offset="95%" stop-color="blue"/>
-    </linearGradient>
-    <linearGradient id="Gradient2" x1="0" x2="0" y1="0" y2="1">
-      <stop offset="5%" stop-color="red"/>
-      <stop offset="95%" stop-color="orange"/>
-    </linearGradient>
-
-    <pattern id="Pattern" x="0" y="0" width=".25" height=".25">
-      <rect x="0" y="0" width="50" height="50" fill="skyblue"/>
-      <rect x="0" y="0" width="25" height="25" fill="url(#Gradient2)"/>
-      <circle cx="25" cy="25" r="20" fill="url(#Gradient1)" fill-opacity="0.5"/>
-    </pattern>
-  </defs>
-
-  <rect fill="url(#Pattern)" stroke="black" width="200" height="200"/>
-</svg>
- -

{{ EmbedLiveSample('Exemple','220','220','/files/725/SVG_Pattern_Example.png') }}

- -

À l'intérieur de l'élément pattern, vous pouvez inclure toutes les formes de bases de SVG et les styliser de la même manière que d'habitude (remplissage, contour, dégradés, opacité, etc). Dans notre exemple, on a dessiné un cercle et deux rectangles (qui se chevauchent et dont l'un est deux fois plus grand que l'autre pour remplir le motif en entier).

- -

La partie pouvant apporter le plus de confusion avec les motifs est le système d'unité et la taille des éléments.

- -

Unités du motif: objectBoundingBox

- -

Les attributs width et height sur l'élément pattern décrivent jusqu'où le motif doit aller avant de se répéter. Les attributs x et y sont également disponibles si vous souhaitez décaler le point de départ du motif à l'intérieur du dessin.

- -

Même principe que l'attribut gradientUnits (que nous avons vu précédemment avec les dégradés), les motifs peuvent prendre un attribut patternUnits, pour spécifier l'unité utilisée par le motif. La valeur par défaut est  "objectBoundingBox", ainsi une taille de 1 remplira entièrement la hauteur/largeur de l'objet auquel le motif est appliqué. Puisque dans notre cas, on veut que le motif se répète 4 fois horizontalement et verticalement, on a définit height et width à 0.25. Cela signifie que la hauteur et largeur du pattern sera de 25% celle de l'objet.

- -

De même, pour que le motif commence à 10 pixels du bord supérieur-gauche de l'objet, il faudrait définir les valeurs de x et y à 0.05 (10/200 = 0.05).

- -

Unités du contenu: userSpaceOnUse

- -

Contrairement aux dégradés, les motifs ont un deuxième argument, patternContentUnits, qui lui spécifie l'unité utilisée par les formes à l'intérieur du motif. La valeur par défaut est "userSpaceOnUse", l'opposé de l'attribut patternUnits. Cela signifie qu'à moins de définir ces attributs aurement (patternContentUnits et/ou patternUnits), les formes que vous dessinez à l'intérieur du motif ont un système de coordonnées différent du motif, ce qui peut rendre les choses un peu déroutantes si vous écrivez le code à la main.

- -

Pour que cela fonctionne dans l'exemple ci-dessus, nous avons dû prendre en compte la taille du rectangle sur lequel est appliqué le motif (200px) et le fait que l'on veut répéter le motif 4 fois horizontalement et verticalement, donc que le motif sera un carré de 50x50. Les deux rectangles et le cercle à l'intérieur du motif ont été dimensionnés pour tenir dans un carré de 50x50. Tout ce qui sortirait en dehors ne serait pas affiché.

- -

La chose à retenir est que si l'objet change de taille, le motif lui-même sera mis à l'échelle mais les objets à l'intérieur non. Ainsi, alors qu'on aura toujours 4 motifs qui se répètent horizontalement et verticalement, les objets à l'intérieur du motif garderont la même taille, et une zone vide sera affichée.

- - - -

{{ EmbedLiveSample('Playable_code','220','350') }}

- -

Unités du contenu: objectBoundingBox

- -

En changeant l'attribut patternContentUnits, on peut utiliser le même système d'unité pour tous les éléments:

- -
 <pattern id="Pattern" width=".25" height=".25" patternContentUnits="objectBoundingBox">
-   <rect x="0" y="0" width=".25" height=".25" fill="skyblue"/>
-   <rect x="0" y="0" width=".125" height=".125" fill="url(#Gradient2)"/>
-   <circle cx=".125" cy=".125" r=".1" fill="url(#Gradient1)" fill-opacity="0.5"/>
- </pattern>
-
- -

Maintenant, parce le contenu du motif utilise le même système d'unité que le motif, le motif redimensionne automatiquement son contenu. Cela contraste avec le système "userSpaceOnUse" par défaut, où lorsque le motif change le taille, le contenu garde la même taille.

- - - -

{{ EmbedLiveSample('Playable_code_2','220','350') }}

- -

Note: Dans Gecko, les cercles semblent avoir du mal à être dessinés si le rayon est inférieur à 0.075 (on ignore s'il s'agit d'un bug de l'élément pattern ou non). Pour contourner ce problème, il est probablement préférable d'éviter de dessiner des cercles dans des unités "objectBoundingBox".

- -

Unités du motif: userSpaceOnUse

- -

Aucune des utilisations vu jusqu'ici ne correspond à l'usage habituel des motifs (tel qu'on le ferait en CSS): les motifs ont généralement une taille définie et se répètent indépendamment de la taille de l'objet sur lequel il est appliqué. Pour créer quelque chose comme ça, le motif et le contenu doivent être dessiné en mode "userSpaceOnUse":

- -
 <pattern id="Pattern" x="10" y="10" width="50" height="50" patternUnits="userSpaceOnUse">
-   <rect x="0" y="0" width="50" height="50" fill="skyblue"/>
-   <rect x="0" y="0" width="25" height="25" fill="url(#Gradient2)"/>
-   <circle cx="25" cy="25" r="20" fill="url(#Gradient1)" fill-opacity="0.5"/>
- </pattern>
-
- -

Bien sûr, cela veut dire que le motif ne sera pas mis à l'échelle si vous modifiez la taille de l'objet ultérieurement.

- - - -

{{ EmbedLiveSample('Playable_code_3','220','350') }}

- -

Récapitulatif

- -

Les trois exemples sont illustrés ci-dessous sur un rectangle allongé à une hauteur de 300px:

- -

Image:SVG_Pattern_Comparison_of_Units.png

- -

{{ PreviousNext("Web/SVG/Tutoriel/Gradients", "Web/SVG/Tutoriel/Texts") }}

diff --git a/files/fr/web/svg/tutoriel/paths/index.html b/files/fr/web/svg/tutoriel/paths/index.html deleted file mode 100644 index 2b73ee2682..0000000000 --- a/files/fr/web/svg/tutoriel/paths/index.html +++ /dev/null @@ -1,334 +0,0 @@ ---- -title: Paths -slug: Web/SVG/Tutoriel/Paths -tags: - - SVG - - 'SVG:Tutoriel' -translation_of: Web/SVG/Tutorial/Paths ---- -

{{ PreviousNext("Web/SVG/Tutoriel/Formes_de_base", "Web/SVG/Tutoriel/Fills_and_Strokes") }}

- -

L’élément <path> (chemin en français) est le plus versatile des éléments de la bibliothèque SVG parmi les formes basiques. Vous pouvez l’utiliser pour créer des lignes, des courbes, des arcs et autres.

- -

Les chemins créent des formes en combinant plusieurs lignes droites ou courbes. Les formes composées uniquement de lignes droites peuvent être crées avec des lignes brisées (polylines). Bien que les lignes brisées et les chemins peuvent tout deux créer des formes d’apparence similaire, les lignes brisées nécessitent un grand nombre de petites lignes pour simuler des courbes, et qui ne s’adaptent pas bien aux grandes tailles. Une bonne compréhension des chemins est importante pour dessiner en SVG. Bien qu’il ne soit pas recommandé d'éditer des chemins complexes avec un éditeur XML ou texte (on utilisera plutôt un éditeur SVG tel que Inkscape ou Adobe Illustrator), comprendre comment un chemin s'écrit vous permettra éventuellement d’identifier et de corriger des erreurs d’affichage dans un SVG.

- -

La forme d’un élément path est définie par son attribut {{ SVGAttr("d") }}. Celui-ci prend pour valeur une série de commandes suivi de paramètres utilisés par ces commandes.

- -

Chacune des commandes est instanciée par une lettre spécifique. Par exemple, pour se positionner aux coordonnées (10, 10), on utilise la commande M (pour MoveTo, « aller à ») suivit des coordonées: "M 10 10". Quand l’interpréteur rencontre une lettre, il comprend que vous invoquez une commande, et les nombres qui suivent sont les paramètres de la commande.

- -

De plus, toutes les commandes se présentent sous deux formes: une lettre majuscule spécifie des coordonnées absolues dans la page, une lettre minuscule spécifie des coordonées relatives (par exemple, « aller à 10px vers le haut et 7px vers la gauche depuis le point précédent »).

- -

Les coordonnées dans l’attribut d sont toujours sans unité et par conséquent dans le système de coordonnées utilisateur. Par la suite, nous apprendrons comment les chemins peuvent être transformés pour répondre à d’autres besoins.

- -

Commandes pour les lignes

- -

Il existe cinq commandes pour tracer des lignes avec un élément <path>. Ces commandes permettent de tracer une ligne droite entre deux points.

- -

MoveTo

- -

La première commande, « aller à », invoquée avec M (MoveTo), a été décrite ci-dessus. Elle prend en paramètres les coordonnées x et y où se rendre. Aucun trait n’est dessiné, le curseur est simplement déplacé dans la page. La commande « aller à » apparaît au début d’un chemin pour spécifier à quel endroit le dessin doit commencer. Par exemple :

- -
M x y
-
- -

ou

- -
m dx dy
- -

Dans l’exemple suivant, on se place au point (10, 10). Notez cependant qu'à ce stade rien n'est dessiné, on a manuellement ajouté un cercle pour indiquer la position:

- -

- -
<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
-  <path d="M10 10"/>
-
-  <!-- Indique la position -->
-  <circle cx="10" cy="10" r="2" fill="red"/>
-</svg>
- -

LineTo, Horizontal LineTo, Vertical LineTo

- -

Il y a trois commandes qui dessinent des lignes. La plus générique est la commande « ligne vers », invoquée avec L (LineTo). L prend deux paramètres, les coordonnées x et y, et dessine une ligne depuis la position actuelle vers la nouvelle position.

- -
L x y (ou l dx dy)
-
- -

Il existe deux formes abrégées pour dessiner des lignes horizontales ou verticales. H (Horizontal LineTo) dessine une ligne horizontale, et V (Vertical LineTo) dessine une ligne verticale. Ces deux commandes ne prennent qu’un seul argument car elles ne se déplacent que le long d’une direction.

- -
H x (ou h dx)
-V y (ou v dy)
-
- -

Afin de commencer facilement, nous allons dessiner une forme simple, un rectangle (qu'on aurait aussi pu dessiner avec un élément <rect>). Il est composé uniquement de lignes horizontales et verticales :

- -

- -
<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg">
-  <path d="M10 10 H 90 V 90 H 10 L 10 10"/>
-
-  <!-- Indique les points -->
-  <circle cx="10" cy="10" r="2" fill="red"/>
-  <circle cx="90" cy="90" r="2" fill="red"/>
-  <circle cx="90" cy="10" r="2" fill="red"/>
-  <circle cx="10" cy="90" r="2" fill="red"/>
-</svg>
- -

ClosePath

- -

On aurait pu raccourcir un peu la déclaration de l'exemple ci-dessus en utilisant la commande « fermer le chemin », invoquée avec Z (ClosePath). Cette commande dessine une ligne droite entre la position actuelle et le premier point du chemin. Elle est souvent placée à la fin du path, mais pas toujours. Il n’y a pas de différence entre la commande en majuscule et en minuscule.

- -
Z (ou z)
-
- -

Ainsi, notre chemin précédent peut se raccourcir comme ceci:

- -
<path d="M10 10 H 90 V 90 H 10 Z" fill="transparent" stroke="black"/>
-
- -

Commandes relatives

- -

On aurait également pu utiliser des commandes relatives pour dessiner la même image.

- -

Les commandes relatives sont invoquées en utilisant des lettres minuscules. Plutôt que de déplacer le curseur vers des coordonnées absolues, elles le déplacent relativement à sa dernière position. Par exemple, puisque notre boîte est de dimension 80x80, l’élement path aurait pu être écrit:

- -
<path d="M10 10 h 80 v 80 h -80 Z" fill="transparent" stroke="black"/>
-
- -

Le chemin va se positionner au point (10, 10), se déplacer horizontalement de 80 points vers la droite, puis de 80 points vers le bas, de 80 points vers la gauche, et enfin revenir à son point de départ.

- -

Dans ces exemples, il serait probablement plus simple d’utiliser un élément <polygon> ou <polyline>. Cependant, les chemins sont si couramment utilisés en dessin SVG qu'un développeur peut se sentir plus à l’aise avec eux. Il n’y a pas de réel avantage ou inconvénient à utiliser l’un ou l’autre.

- -

Commandes pour les courbes

- -

Il existe trois commandes différentes pour créer des courbes. Deux d’entre elles sont des courbes de Bézier, et la troisième est un « arc » ou section de cercle. Il se peut que vous ayez déjà acquis une expérience pratique avec les courbes de Bézier en utilisant les outils de chemins avec Inkscape, Illustrator ou Photoshop. Pour une description complète des concepts mathématiques sous-jacents, vous pouvez consulter la page Wikipedia Courbe de Bézier.

- -

Il existe une infinité de courbes de Bézier, mais seulement deux des plus simples d’entre elles sont disponibles dans les éléments path: l’une cubique, invoquée avec C, et l’autre quadratique, invoquée avec Q.

- -

CurveTo

- -

La courbe de Bézier cubique, C (CurveTo), est la forme de courbe Bézier la plus complexe. Ce type de courbe nécessite deux points de contrôle. Ainsi, pour créer une courbe de Bézier cubique, vous devez spécifier trois paires de coordonnées.

- -
C x1 y1, x2 y2, x y (or c dx1 dy1, dx2 dy2, dx dy)
-
- -

Les deux premières paires de coordonnées sont les points de contrôle: le point de contrôle pour le début de la courbe est (x1, y1), et (x2, y2) est celui de la fin de la courbe. La dernière paire de coordonnées (x, y) est l’endroit où vous voulez que la ligne se termine.

- -

Les points de contrôle décrivent, pour faire simple, la pente de la courbe pour le point de départ et pour le point d'arrivée. La fonction Bézier crée ensuite une courbe lisse faisant le lien entre la pente que vous avez établie au début de votre ligne, et celle à l’autre extrémité.

- -

Cubic Bézier Curves with grid

- -
<svg width="190" height="160" xmlns="http://www.w3.org/2000/svg">
-  <path d="M10 10 C 20 20, 40 20, 50 10" stroke="black" fill="transparent"/>
-  <path d="M70 10 C 70 20, 120 20, 120 10" stroke="black" fill="transparent"/>
-  <path d="M130 10 C 120 20, 180 20, 170 10" stroke="black" fill="transparent"/>
-  <path d="M10 60 C 20 80, 40 80, 50 60" stroke="black" fill="transparent"/>
-  <path d="M70 60 C 70 80, 110 80, 110 60" stroke="black" fill="transparent"/>
-  <path d="M130 60 C 120 80, 180 80, 170 60" stroke="black" fill="transparent"/>
-  <path d="M10 110 C 20 140, 40 140, 50 110" stroke="black" fill="transparent"/>
-  <path d="M70 110 C 70 140, 110 140, 110 110" stroke="black" fill="transparent"/>
-  <path d="M130 110 C 120 140, 180 140, 170 110" stroke="black" fill="transparent"/>
-</svg>
-
- -

L’exemple ci-dessus crée neuf courbes de Bézier cubiques. De gauche à droite, les points de contrôle sont de plus en plus espacés horizontalement. De haut en bas, ils sont de plus en plus éloignés des extrémités. La chose à remarquer ici est que la courbe commence dans la direction du premier point de contrôle, puis se courbe de manière à terminer le long de la direction du second point de contrôle.

- -

Shorthand CurveTo

- -

Vous pouvez lier ensemble plusieurs courbes de Bézier pour créer des formes harmonieuses étendues. Souvent, le point de contrôle d’un côté d’une extrémité sera une réflexion du point de contrôle utilisé de l’autre côté, afin de garder une pente constante. Dans ce cas, vous pouvez utiliser une version raccourcie de la courbe cubique, désignée par la commande S, ou s (Shorthand CuveTo).

- -
S x2 y2, x y (ou s dx2 dy2, dx dy)
-
- -

S dessine une courbe de Bézier cubique entre le point actuel et (x, y).

- - - -

(x2, y2) est le second point de contrôle.

- -

Un exemple de cette syntaxe est montré ci-dessous. Dans la figure associée, les points de contrôle spécifiés sont indiqués en rouge, et le point de contrôle inféré, en bleu.

- -

ShortCut_Cubic_Bezier_with_grid.png

- -
<svg width="190" height="160" xmlns="http://www.w3.org/2000/svg">
-  <path d="M10 80 C 40 10, 65 10, 95 80 S 150 150, 180 80" stroke="black" fill="transparent"/>
-</svg>
- -

Quadratic Bezier CurveTo

- -

L’autre type de courbe, la courbe de Bézier quadratique, est invoquée avec Q (Quadratic Bezier CurveTo). Elle est plus simple que la version cubique puisqu'elle ne nécessite qu'un point de contrôle. Le point de contrôle détermine la pente de la courbe à la fois au point de départ et au point d’arrivée.

- -
Q x1 y1, x y (ou q dx1 dy1, dx dy)
-
- -

(x1 y1) est la position du point de contrôle, et (x y) est le point d’arrivée de la courbe.

- -

Quadratic Bézier with grid

- -
<svg width="190" height="160" xmlns="http://www.w3.org/2000/svg">
-  <path d="M10 80 Q 95 10 180 80" stroke="black" fill="transparent"/>
-</svg>
- -

Shorthand Quadratic Bezier CurveTo

- -

Comme pour la courbe cubique, il existe un raccourci pour lier ensemble plusieurs courbes quadratiques, invoqué avec T (Shorthand Quadratic Bezier CuveTo).

- -
T x y (ou t dx dy)
-
- -

Ce raccourci examine le précédent point de contrôle utilisé et en infère un nouveau à partir de celui-ci. Cela signifie qu’après un premier point de contrôle, vous pouvez créer des formes assez complexes en spécifiant seulement les points d’extrémités.

- -
-

Note: Ce raccourci fonctionne uniquement si la commande précédente est une commande Q ou T. Dans le cas contraire, le point de contrôle est considéré comme le même que le point précédent, et vous ne dessinerez que des lignes.

-
- -

Shortcut_Quadratic_Bezier_with_grid.png

- -
<svg width="190" height="160" xmlns="http://www.w3.org/2000/svg">
-  <path d="M10 80 Q 52.5 10, 95 80 T 180 80" stroke="black" fill="transparent"/>
-</svg>
- -

Les deux courbes produisent des résultats similaires, bien que les courbes cubiques vous offrent une plus grande liberté dans l’apparence exacte que vous voulez donner à votre courbe. Le choix du type de courbe de Bézier à utiliser se fait au cas par cas, et dépend du nombre de symétries que présente votre ligne.

- -

Elliptical Arc

- -

Le dernier type de ligne courbe que vous pouvez créer avec SVG est l’arc, invoqué avec A (Elliptical Arc). Les arcs sont des sections de cercles ou d’ellipses.

- -

L'élément arc part du point actuel vers le point d'arrivée (x, y) en parcourant la ligne le long d'une ellipse définie par rx et ry. Le centre de l'ellipse (cx, cy) est calculé automatiquement pour satisfaire les contraintes imposées par les autres paramètres. Si vous avez besoin d'un rappel sur les ellipses, voyez les formes de base. Ensemble, ces quatre valeurs définissent la structure de base de l’arc.

- -
A rx ry x-axis-rotation large-arc-flag sweep-flag x y
-a rx ry x-axis-rotation large-arc-flag sweep-flag dx dy
-
- -

x-axis-rotation

- -

x-axis-rotation décrit la rotation de l’arc. Il s’explique plus facilement avec un exemple:

- -

SVGArcs_XAxisRotation_with_grid

- -
<svg width="320" height="320" xmlns="http://www.w3.org/2000/svg">
-  <line x1="10" y1="315" x2="315" y2="10" stroke="black" stroke-width="2" />
-
-  <path d="M110 215       a 30 50   0 0 1 52.55 -52.45" fill="#7FBF7F" stroke="black" stroke-width="2" />
-  <path d="M172.55 152.45 a 30 50 -45 0 1 42.55 -42.55" fill="#7FBF7F" stroke="black" stroke-width="2" />
-</svg>
- -

Cet exemple montre deux arcs elliptiques de rayon dx 30 et rayon dy 50.

- - - -

sweep-flag

- -

Pour un rayon rx et un rayon ry donnés, il existe deux ellipses pouvant connecter deux points quelconques.

- -

sweep-flag détermine si l’arc doit commencer son mouvement à un angle négatif ou positif, permettant ainsi de choisir lequel des deux cercles est parcouru.

- -
<!-- sweep-flag: 0 -->
-<path d="M 125,75 a100,50 0 0,0 100,50"
-      stroke="red" stroke-width="6" fill="none" />
-
-<!-- sweep-flag: 1 -->
-<path d="M 125,75 a100,50 0 0,1 100,50"
-      stroke="blue" stroke-width="6" fill="none" />
-
- - - -

{{ EmbedLiveSample('Playable_code', '100%', 200) }}

- -

large-arc-flag

- -

Pour chacune des deux ellipses, il existe deux chemins possibles, ce qui donne quatre chemins possibles.

- -

large-arc-flag détermine simplement si l’arc doit être supérieur ou inférieur à 180 degrés ; au final, il détermine dans quelle direction l’arc va parcourir une ellipse donnée.

- -
<!-- large-arc-flag: 0 -->
-<path d="M 125,75 a100,50 0 0,0 100,50"
-      stroke="red" stroke-width="6" fill="none" />
-
-<!-- large-arc-flag: 1 -->
-<path d="M 125,75 a100,50 0 1,0 100,50"
-      stroke="blue" stroke-width="6" fill="none" />
-
- - - -

{{ EmbedLiveSample('Playable_code_2', '100%', 200) }}

- -

L’exemple ci-dessous montre les quatre combinaisons possibles avec sweep-flag et large-arc-flag:

- -

- -
<svg width="325" height="325" xmlns="http://www.w3.org/2000/svg">
-  <path d="M80 80
-           A 45 45, 0, 0, 0, 125 125
-           L 125 80 Z" fill="green"/>
-  <path d="M230 80
-           A 45 45, 0, 1, 0, 275 125
-           L 275 80 Z" fill="red"/>
-  <path d="M80 230
-           A 45 45, 0, 0, 1, 125 275
-           L 125 230 Z" fill="purple"/>
-  <path d="M230 230
-           A 45 45, 0, 1, 1, 275 275
-           L 275 230 Z" fill="blue"/>
-</svg>
- -

Conclusion

- -

Les arcs sont un moyen facile de créer des portions de cercle ou d’ellipse dans vos dessins. Par exemple pour dessiner un graphique en camembert. Si vous êtes en train de migrer vers SVG depuis Canvas, les arcs peuvent être la partie la plus difficile à appréhender, mais sont également bien plus puissants.

- -

Comme les points de départ et d’arrivée de tout chemin parcourant un cercle sont confondus, un nombre infini de cercles peuvent être choisis, par conséquent le chemin est indéfini. Il est possible d’en faire une approximation en prenant des points de départ et d’arrivée légèrement décalés, puis de les connecter à l’aide d’un autre segment de chemin. Dans ces conditions, il est souvent plus facile d’utiliser un véritable élément cercle ou ellipse à la place.

- -

Vous pouvez trouver une démo interactive à l'adresse suivante, pour vous aider à comprendre les concepts derrière les arcs SVG: http://codepen.io/lingtalfi/pen/yaLWJG (testé avec Chrome et Firefox seulement, peut ne pas marcher avec votre navigateur).

- -

{{ PreviousNext("Web/SVG/Tutoriel/Formes_de_base", "Web/SVG/Tutoriel/Fills_and_Strokes") }}

diff --git a/files/fr/web/svg/tutoriel/polices_svg/index.html b/files/fr/web/svg/tutoriel/polices_svg/index.html deleted file mode 100644 index 4a196a3825..0000000000 --- a/files/fr/web/svg/tutoriel/polices_svg/index.html +++ /dev/null @@ -1,106 +0,0 @@ ---- -title: Polices SVG -slug: Web/SVG/Tutoriel/polices_SVG -tags: - - Police - - SVG - - font -translation_of: Web/SVG/Tutorial/SVG_fonts ---- -

{{ 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.

- -
Les Polices d'écritures SVG sont actuellement supportées uniquement sur Safari et le navigateur Android.
-Internet Explorer n'a pas envisagé de les implémenter, la fonctionnalité a été supprimée de Chrome 38 (et Opera 25) et Firefox a reporté sa mise en œuvre indéfiniment pour se concentrer sur WOFF. Cependant, d'autres outils comme le plugin Adobe SVG Viewer, Batik et des modèles de document d'Inkscape supportent l'incorporation des Police d'écriture SVG.
- -

La base pour définir une police SVG est l'élément {{ SVGElement("font") }}.

- -

Définir une police

- -

Quelques ingrédients sont nécessaires pour intégrer une police en SVG. Prenons un exemple de déclaration (celle de la spécification), et expliquons-en les détails.

- -
<font id="Font1" horiz-adv-x="1000">
-  <font-face font-family="Super Sans" font-weight="bold" font-style="normal"
-      units-per-em="1000" cap-height="600" x-height="400"
-      ascent="700" descent="300"
-      alphabetic="0" mathematical="350" ideographic="400" hanging="500">
-    <font-face-src>
-      <font-face-name name="Super Sans Bold"/>
-    </font-face-src>
-  </font-face>
-  <missing-glyph><path d="M0,0h200v200h-200z"/></missing-glyph>
-  <glyph unicode="!" horiz-adv-x="300"><!-- Outline of exclam. pt. glyph --></glyph>
-  <glyph unicode="@"><!-- Outline of @ glyph --></glyph>
-  <!-- more glyphs -->
-</font>
- -

Nous commençons avec l'élement {{ SVGElement("font") }}. Il contient un attribut id, ce qui permet de le référencer via une URI (voir plus bas). L'attribut horiz-adv-x définit sa largeur moyenne, comparée aux définitions des autres glyphes individules. La valeur 1000 définit une valeur raisonnable. Plusieurs autres attributs associés précisent l'affichage de la boite qui encapsule le glyphe.

- -

L'élément  {{ SVGElement("font-face") }} est l'équivalent SVG de la déclaration CSS  @font-face. Il définit les propriétés de base de la police finale, telles que 'weight', 'style', etc. Dans l'exemple ci-dessus, la première et la plus importante est  font-family : Elle pourra alors être référencée via la propriété font-family présente dans les CSS et les SVG. Les attributs font-weight et font-style ont la même fonction que leurs équivalents CSS. Les attributs suivants sont des instructions de rendu, pour le moteur d'affichage des polices ; par exemple : quelle est la taille des jambages supérieurs des glyphes (ascenders).

- -

Its child, the {{ SVGElement("font-face-src") }} element, corresponds to CSS' src descriptor in @font-face declarations. You can point to external sources for font declarations by means of its children {{ SVGElement("font-face-name") }} and {{ SVGElement("font-face-uri") }}. The above example states that if the renderer has a local font available named "Super Sans Bold", it should use this instead.

- -

Following {{ SVGElement("font-face-src") }} is a {{ SVGElement("missing-glyph") }} element. This defines what should be displayed if a certain glyph is not found in the font and if there are no fallback mechanisms. It also shows how glyphs are created: By simply adding any graphical SVG content inside. You can use literally any other SVG elements in here, even {{ SVGElement("filter") }}, {{ SVGElement("a") }} or {{ SVGElement("script") }}. For simple glyphs, however, you can simply add a d attribute — this defines a shape for the glyph exactly like how standard SVG paths work.

- -

The actual glyphs are then defined by {{ SVGElement("glyph") }} elements. The most important attribute is unicode. It defines the unicode codepoint represented by this glyph. If you also specify the {{htmlattrxref("lang")}} attribute on a glyph, you can further restrict it to certain languages (represented by xml:lang on the target) exclusively. Again, you can use arbitrary SVG to define the glyph, which allows for great effects in supporting user agents.

- -

There are two further elements that can be defined inside font: {{ SVGElement("hkern") }} and {{ SVGElement("vkern") }}. Each carries references to at least two characters (attributes u1 and u2) and an attribute k that determines how much the distance between those characters should be decreased. The below example instructs user agents to place the "A" and "V" characters closer together the standard distance between characters.

- -
<hkern u1="A" u2="V" k="20" />
- -

Référencer une police

- -

Lorsque vous avez mis en place votre déclaration de police comme décrit ci-dessus, vous pouvez utiliser un simple attribut font-family pour réellement appliquer la police à un texte SVG:

- -
<font>
-  <font-face font-family="Super Sans" />
-  <!-- ... -->
-</font>
-
-<text font-family="Super Sans">My text uses Super Sans</text>
- -

Cependant, vous êtes libre de combiner plusieurs méthodes pour une plus grande liberté de où et comment définir la police.

- -

Option: Utiliser le CSS @font-face

- -

 

- -

Vous pouvez utiliser @font-face pour les polices externes de référence :

- -

 

- -
<font id="Super_Sans">
-  <!-- ... -->
-</font>
-
-<style type="text/css">
-@font-face {
-  font-family: "Super Sans";
-  src: url(#Super_Sans);
-}
-</style>
-
-<text font-family="Super Sans">My text uses Super Sans</text>
- -

Option: Référencer une police externe

- -

 

- -

L'élément mentionné font-face-uri vous permet de référencer une police externe, permettant donc une plus grande réutilisabilité :

- -

 

- -
<font>
-  <font-face font-family="Super Sans">
-    <font-face-src>
-      <font-face-uri xlink:href="fonts.svg#Super_Sans" />
-    </font-face-src>
-  </font-face>
-</font>
- -
-
-

{{ PreviousNext("Web/SVG/Tutoriel/filtres","Web/SVG/Tutoriel/SVG_Image_Tag") }}

-
-
diff --git a/files/fr/web/svg/tutoriel/positionnement/index.html b/files/fr/web/svg/tutoriel/positionnement/index.html deleted file mode 100644 index 7f23bfe123..0000000000 --- a/files/fr/web/svg/tutoriel/positionnement/index.html +++ /dev/null @@ -1,55 +0,0 @@ ---- -title: Positionnement -slug: Web/SVG/Tutoriel/Positionnement -tags: - - Débutant - - SVG - - 'SVG:Tutoriel' -translation_of: Web/SVG/Tutorial/Positions ---- -

{{ PreviousNext("SVG/Tutoriel/Premiers_pas", "SVG/Tutoriel/Formes_de_base") }}

- -

La grille

- -

Pour chaque élément, SVG utilise un ensemble de coordonnées aussi appelé grille assez similaire à ce qui est utilisé dans canvas (et par tout un tas d'autres routines de dessin informatique). Dans le cas présent, le point en haut à gauche est considéré comme le point (0,0) ou point d'origine. Le positionnement est ensuite mesuré en pixel, depuis le coin supérieur gauche. Les valeurs positives de x vont vers la droite, les valeurs positives de y vont vers le bas. Notez que tout ceci est un peu contraire à la géométrie que l'on vous a enseignée. Ici, le positionnement fonctionne de la même manière que pour les éléments HTML.

- -

Exemple

- -
<rect x="0" y="0" width="100" height="100" />
-
- -

L'élément précédent définit un rectangle dans le coin supérieur gauche de l'écran, d'une taille de 100px par 100px.

- -

Qu'est ce qu'un pixel ?

- -

Dans le cas le plus basique, un pixel dans un document SVG correspond à un pixel du périphérique de sortie, à savoir l'écran. Mais le SVG ne serait pas "scalable", c'est-à-dire évolutif, s'il n'y avait qu'une seule possibilité de gérer ce comportement. Tout comme les tailles de police absolues et relatives en CSS, SVG peut définir des unités absolues (avec des identifiants dimensionnels comme le "pt" ou encore le "cm") ou encore des unités dites définies par l'utilisateur, qui ne disposent pas de ces identifiants et correspondent à des nombres ordinaires.

- -

Par défaut, l'unité utilisateur correspond à l'unité de l'écran. Pour modifier ce comportement de manière explicite, il existe plusieurs méthodes en SVG. Commençons par l'élément racine svg :

- -
<svg width="100" height="100">
-
- -

La déclaration suivante crée un élément SVG d'une taille de 100px par 100px. Ici, une unité utilisateur correspond à l'unité de l'écran.

- -
<svg width="200" height="200" viewBox="0 0 100 100">
-
- -

L'image SVG suivante fait 200px par 200px. Toutefois, l'attribut viewBox définit que cet élément de 200 par 200 commence au point (0,0) et s'étend sur une grille de 100 unités sur 100 unités vers la droite et vers le bas de l'écran. 100 unités représentant 200 pixels, chaque unité vaut deux pixels : cela permet de doubler la taille de l'image.

- -

La transformation des coordonnées réelles de l'écran en coordonnées personnalisées à l'aide d'un viewport permet de créer un système de coordonnées utilisateur. Celui-ci pourra pivoter, être zoomé, rendu oblique ou encore permettra de retourner une image. Par défaut, le système de coordonnées de l'utilisateur fait correspondre un pixel utilisateur à un pixel écran.

- -

Cependant, le périphérique peut décider lui-même ce qui correspond à un pixel.

- -

Les tailles dans le fichier SVG ayant des unités spécifiques, tels que les "in" et les "cm", sont ensuite calculées de manière à les faire apparaître avec une échelle de 1:1 dans l'image résultante.

- -

Pour illustrer cette explication, rien de tel qu'une petite citation tirée des spécifications SVG 1.1 :

- -
-

[…] imaginons que le user agent peut déterminer à partir de son environnement que "1px" correspond à "0.2822222mm" (c'est-à-dire 90dpi). Ainsi, pour le traitement de chaque élément SVG : […] "1cm" équivaut à "35.43307px" (et donc à 35.43307 unités utilisateur)

-
- -

{{ PreviousNext("SVG/Tutoriel/Premiers_pas", "SVG/Tutoriel/Formes_de_base") }}

- -

Interwiki Languages Links

- -

{{ languages( { "en": "en/SVG/Tutorial/Positions"} ) }}

diff --git a/files/fr/web/svg/tutoriel/premiers_pas/index.html b/files/fr/web/svg/tutoriel/premiers_pas/index.html deleted file mode 100644 index 83dee73b6c..0000000000 --- a/files/fr/web/svg/tutoriel/premiers_pas/index.html +++ /dev/null @@ -1,98 +0,0 @@ ---- -title: Premiers pas -slug: Web/SVG/Tutoriel/Premiers_pas -tags: - - SVG - - 'SVG:Tutoriel' -translation_of: Web/SVG/Tutorial/Getting_Started ---- -

{{ PreviousNext("SVG/Tutoriel/Introduction", "SVG/Tutoriel/Positionnement") }}

- -

Commençons par un exemple simple

- -

Jetez un coup d'oeil au morceau de code suivant :

- -
<svg version="1.1"
-     baseProfile="full"
-     xmlns="http://www.w3.org/2000/svg">
-
-  <rect width="100%" height="100%" fill="red"/>
-
-  <circle cx="150" cy="100" r="80" fill="green"/>
-
-  <text x="150" y="125" font-size="60" text-anchor="middle" fill="white">SVG</text>
-
-</svg>
-
- -

Copiez le code précédent dans un document texte, puis enregistrez le sous le nom de demo1.svg. Ouvrez le fichier dans Firefox. Vous obtiendrez alors l'image suivante (pour les utilisateurs de Firefox : cliquez ici)

- -

svgdemo1.png

- -

Quelques explications s'imposent quant au fonctionnement du rendu :

- -
    -
  1. Nous commençons avec l'élément svg à la racine : - -
      -
    • 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.
      • -
    • pour identifier la version du SVG pour d'autre types de validation, les attributs version et baseProfile doivent toujours être utilisés.
      • -
    • 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 xmlns. Pour plus d'informations, n'hésitez pas à consulter la page Namespaces Crash Courses.
      • -
    -
    2. -
  2. L'arrière-plan est défini par un rectangle rouge, déclaré grâce à la balise <rect/> qui recouvre l'intégralité de l'espace.
    3. -
  3. 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.
    4. -
  4. 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.
    5. -
- -

Les propriétés basiques des fichiers SVG

- - - -

 

- -

Les types de fichiers SVG

- -

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).

- -

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).

- -

Un mot sur les serveurs Web

- -

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 :

- -
Content-Type: image/svg+xml
-
- -

Pour les fichiers SVG compressés, les serveurs devraient envoyer l'en-tête HTTP :

- -
Content-Type: image/svg+xml
-Content-Encoding: gzip
-
- -

Vous pouvez vérifier que votre serveur envoie le bon en-tête HTTP avec vos fichiers SVG en utilisant le Moniteur Réseau ou un site comme web-sniffer.net. 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 la page de configuration d'un serveur sur le wiki SVG pour quelques solutions simples.

- -

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.

- -

{{ PreviousNext("SVG/Tutoriel/Introduction", "SVG/Tutoriel/Positionnement") }}

- -

Interwiki Languages Links

- -

{{ languages( { "en": "en/SVG/Tutorial/Getting_Started", "ja": "ja/SVG/Tutorial/Getting_Started" } ) }}

diff --git a/files/fr/web/svg/tutoriel/svg_image_tag/index.html b/files/fr/web/svg/tutoriel/svg_image_tag/index.html deleted file mode 100644 index 8912c059d0..0000000000 --- a/files/fr/web/svg/tutoriel/svg_image_tag/index.html +++ /dev/null @@ -1,36 +0,0 @@ ---- -title: 'SVG: Elément image' -slug: Web/SVG/Tutoriel/SVG_Image_Tag -tags: - - Débutant - - SVG - - Tutoriel -translation_of: Web/SVG/Tutorial/SVG_Image_Tag ---- -

{{ 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.

- -

Dans cet exemple basique, une image JPG liée par l'attribut {{ SVGAttr("xlink:href") }} sera rendue à l'intérieur d'un objet SVG.

- -
<?xml version="1.0" standalone="no"?>
-<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
-  "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
-<svg width="5cm" height="4cm" version="1.1"
-     xmlns="http://www.w3.org/2000/svg" xmlns:xlink= "http://www.w3.org/1999/xlink">
-	<image xlink:href="firefox.jpg" x="0" y="0" height="50px" width="50px"/>
-</svg>
- -

Il faut prendre note de quelques point essentiels (donnés par les spécifications W3):

- - - -

{{ PreviousNext("Web/SVG/Tutoriel/polices_SVG", "Web/SVG/Tutoriel/Tools_for_SVG") }}

diff --git a/files/fr/web/svg/tutoriel/texts/index.html b/files/fr/web/svg/tutoriel/texts/index.html deleted file mode 100644 index 97871407d2..0000000000 --- a/files/fr/web/svg/tutoriel/texts/index.html +++ /dev/null @@ -1,124 +0,0 @@ ---- -title: Textes -slug: Web/SVG/Tutoriel/Texts -tags: - - SVG - - 'SVG:Tutoriel' -translation_of: Web/SVG/Tutorial/Texts ---- -
-
{{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.

- -

Les bases

- -

Nous avons vu dans l'exemple de l'introduction que l'élément text peut être utilisé pour mettre du texte dans des documents SVG:

- -
<text x="10" y="10">Hello World!</text>
-
- -

Les attributs x et y déterminent où le texte apparaîtra dans la fenêtre. L'attribut {{SVGAttr("text-anchor")}} spécifie l'alignement horizontal du texte (si ce point doit être le côté gauche, droit ou le centre du texte) et l'attribut {{SVGAttr("dominant-baseline")}} l'alignement vertical (si ce point est le haut, le bas ou le centre).

- -

De même que les formes basiques, la couleur des éléments texte peut être modifié avec l'attribut fill pour le remplissage ou stroke pour le contour. Tout deux peuvent également faire référence à un dégradé ou motif, ce qui rend la coloration de texte SVG beaucoup plus puissante que CSS 2.1.

- -

Définir la police

- -

Une partie essentielle d'un texte est la police dans laquelle il est affiché. SVG offre un ensemble d'attributs pour spécifier la police, dont beaucoup sont similaires à leurs équivalents CSS. Chacune des propriétés suivantes peut être définie en tant qu'attribut ou via une déclaration CSS: {{SVGAttr("font-family")}}, {{SVGAttr("font-style")}}, {{SVGAttr("font-weight")}}, {{SVGAttr("font-variant")}}, {{SVGAttr("font-stretch")}}, {{SVGAttr("font-size")}}, {{SVGAttr("font-size-adjust")}}, {{SVGAttr("kerning")}}, {{SVGAttr("letter-spacing")}}, {{SVGAttr("word-spacing")}} et {{SVGAttr("text-decoration")}}.

- -

Autres éléments liés au texte

- -

tspan

- -

Cet élément est utilisé pour baliser des sous-parties d'un texte. Il doit s'agit d'un enfant d'un élément text ou d'un autre élément tspan. Un cas typique consiste à écrire un mot d'une phrase en gras:

-
- -
<text>
-  This is <tspan font-weight="bold" fill="red">bold and red</tspan>
-</text>
-
- - - -

{{ EmbedLiveSample('Playable_code', '100%', 100) }}

- -

L'élément tspan peut prendre les attributs personnalisés suivants:

- -

x
- Définit une nouvelle coordonnées absolue pour le texte qu'il contient. Cela écrase la position par défaut du texte. Cet attribut peut également contenir une liste de nombres, qui sont appliqués un par un à chaque caractère du tspan.

- -

dx
- Définit un décalage horizontal relatif à la position par défaut du texte. Ici aussi, vous pouvez founir une liste de valeurs qui seront appliquées consécutivement à chaque caractère.

- -

y et dy sont utilisés de la même manière mais pour le déplacement vertical.

- -

rotate
- Applique une rotation aux caractères, avec le nombre de degrés donné. Donner une liste de nombres aura pour effet d'appliquer une rotation à chaque caractère respectif, la dernière valeur sera appliquée aux caractères restants.

- -

textLength
- Un attribut quelque peu obscur qui donne la longueur calculée de la chaîne. Il est destiné au moteur de rendu pour lui permettre d'affiner la position des glyphes, lorsque la longueur de texte mesurée ne correspond pas à celle qui est indiquée.

- -

tref

- -

L'élément tref permet de référencer un texte déjà définit, et recopie le texte à sa place. Vous devez utiliser l'attribut xlink:href pour définir l'élément à copier. Vous pouvez ensuite styliser le texte et modifier son apparence indépendamment de la source.

- -
<text id="example">This is an example text.</text>
-
-<text>
-    <tref xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#example" />
-</text>
-
- -

textPath

- -

Cet élément récupère via son attribut xlink:href un chemin arbitraire et aligne ses caractères le long de ce chemin:

- -
<path id="my_path" d="M 20,20 C 80,60 100,40 120,20" fill="transparent" />
-<text>
-  <textPath xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#my_path">
-    A curve.
-  </textPath>
-</text>
- - - -

{{ EmbedLiveSample('Playable_code_2', '100%', 100) }}

- -
{{PreviousNext("Web/SVG/Tutoriel/Motifs", "Web/SVG/Tutoriel/Transformations_de_base")}}
diff --git a/files/fr/web/svg/tutoriel/tools_for_svg/index.html b/files/fr/web/svg/tutoriel/tools_for_svg/index.html deleted file mode 100644 index f60f06c76f..0000000000 --- a/files/fr/web/svg/tutoriel/tools_for_svg/index.html +++ /dev/null @@ -1,70 +0,0 @@ ---- -title: Outils pour SVG -slug: Web/SVG/Tutoriel/Tools_for_SVG -translation_of: Web/SVG/Tutorial/Tools_for_SVG ---- -

{{ PreviousNext("Web/SVG/Tutoriel/SVG_Image_Tag") }}

- -

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.

- -

Support des navigateurs

- -

Avec l'arrivée de IE9, on peut enfin dire que les principaux navigateurs -  Internet Explorer 9, Mozilla Firefox, Safari, Google Chrome et Opera - supportent le SVG. Sur mobile c'est aussi le cas des navigateurs basés sur Webkit (principalement iOS et Android). Et il y a en général des chances pour que les appareils plus vieux ou plus petits supportent au moins SVG Tiny.

- -

Inkscape

- -

URL: www.inkscape.org

- -

L'un des outils fondamentaux pour travailler un format graphique est un logiciel de dessin performant. Inkscape permet de faire du dessin vectoriel, il est mis à jour régulièrement, et a le mérite d'être open source.

- -

Il utilise le SVG comme format natif, et l'étend avec des éléments et attributs définis dans un espace de nommage spécifique. On peut aussi choisir un export au format SVG standard.

- -

Adobe Illustrator

- -

URL: www.adobe.com/products/illustrator/

- -

Avant de racheter Macromedia, Adobe était le plus ardent défenseur de SVG. C'est de cette époque que date le bon support du SVG dans Illustrator. Cependant, le code généré comporte souvent des bizarreries, qui obligent à le retraiter pour pouvoir l'utiliser en dehors d'Illustrator.

- -

Apache Batik

- -

URL: xmlgraphics.apache.org/batik/

- -

Batik est un ensemble d'outils open source proposés par Apache Software Foundation. La boite à outils est codée en Java et assure un support quasi intégral de SVG 1.1, ainsi que certaines des fonctionnalités qui étaient prévues à l'origine pour SVG 1.2.

- -

En plus d'un outil de visualisation (Squiggle) et d'un moteur d'aplatissement des calques pour l'export en PNG, Batik propose aussi un outil de formatage du code SVG, ainsi qu'un convertisseur de typographie TrueType vers SVG.

- -

Utilisé avec Apache FOP, il permet également de transformer du SVG en PDF.

- -

Autres moteurs de rendu

- -

Il existe plusieurs projets qui permettent d'exporter une image tramée à partie d'une source SVG. ImageMagick est l'un des outils les plus connus de traitement des images en ligne de commande.  Wikipédia utilise la librairie de code Gnome rsvg pour le rendu de ses images SVG.

- -

Raphael JS

- -

URL: raphaeljs.com

- -

Raphaël est un framework javascript, qui propose une couche d'abstraction pour les différentes implémentations des navigateurs. Les vieilles versions d'Internet Explorer sont supportées grace à la génération de code VML, un langage de balisage vectoriel, qui est l'un des ancêtres de SVG et existe depuis IE 5.5.

- -

Snap.svg

- -

URL: snapsvg.io

- -

Une nouvelle couche d'abstraction JavaScript, plus récent, du même auteur que Raphael JS. Snap.svg est conçu pour les navigateurs modernes et prend donc en charge les dernières fonctionnalités SVG telles que la masquage, le découpage, les motifs, gradients et groupes. Il ne supporte pas les anciens navigateurs, contrairement à Raphael.

- -

Google Docs

- -

URL: www.google.com/google-d-s/drawings/

- -

Les dessins réalisés dans Google Docs peuvent être exportés en SVG.

- -

Science

- -

Les fameux outils d'analyse de données xfig and gnuplot supportent l'export en SVG. Pour le rendu de graphiques sur le web JSXGraph supporte VML, SVG et canvas, proposant automatiquement l'un ou l'autre en fonction du support des navigateurs.

- -

SVG est souvent utilisé dans les applications GIS (Geographic Information System) à la fois comme format de stockage et de rendu. Cf carto.net pour davantage de détails.

- -

Autres outils

- -

Le W3C propose une liste des programmes qui supportent le SVG.

- -

{{ PreviousNext("Web/SVG/Tutoriel/SVG_Image_Tag") }}

diff --git a/files/fr/web/svg/tutoriel/transformations_de_base/index.html b/files/fr/web/svg/tutoriel/transformations_de_base/index.html deleted file mode 100644 index 2015cab83c..0000000000 --- a/files/fr/web/svg/tutoriel/transformations_de_base/index.html +++ /dev/null @@ -1,113 +0,0 @@ ---- -title: Transformations de base -slug: Web/SVG/Tutoriel/Transformations_de_base -tags: - - Intermediate - - SVG - - 'SVG:Tutoriel' -translation_of: Web/SVG/Tutorial/Basic_Transformations ---- -

{{ 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 :

- -
-
<svg width="30" height="10">
-    <g fill="red">
-        <rect x="0" y="0" width="10" height="10" />
-        <rect x="20" y="0" width="10" height="10" />
-    </g>
-</svg>
-
- -

{{ EmbedLiveSample('two_blocks', '30', '10') }}

- -

Toutes les transformations suivantes sont résumées dans l'attribut transform de l'élément. Les transformations peuvent être mises les unes à la suite des autres, tout simplement en les écrivant toutes dans cet attribut, séparées par des espaces.

- -

Translation

- -

Il peut être nécessaire de décaler un élément, même s'il est possible de définir sa position dans ses attributs. Pour ce faire, la fonction translate() est parfaite.

- -
<svg width="40" height="50" style="background-color:#bff;">
-    <rect x="0" y="0" width="10" height="10" transform="translate(30,40)" />
-</svg>
- -

Cet exemple a pour résultat un rectangle, qui est déplacé du point (0,0) au point (30,40).

- -

{{ EmbedLiveSample('Translation', '40', '50') }}

- -

Si la deuxième valeur de translate() n'est pas définie, elle sera pas défaut assignée à 0.

- -

Rotation

- -

Appliquer une rotation à un élément est assez simple : il suffit d'utiliser la fonction rotate().

- -
<svg width="31" height="31">
-    <rect x="12" y="-10" width="20" height="20" transform="rotate(45)" />
-</svg>
- -

Cet exemple montre un carré pivoté de 45°. La valeur de la rotation doit être définie en degrés.

- -

{{ EmbedLiveSample('Rotation', '31', '31') }}

- -

Transformations multiples

- -

Les transformations peuvent être concaténées, séparées par des espaces. Par exemple, translate() et rotate() sont couramment utilisées ensemble:

- -
<svg width="40" height="50" style="background-color:#bff;">
-    <rect x="0" y="0" width="10" height="10" transform="translate(30,40) rotate(45)" />
-</svg>
- -

{{ EmbedLiveSample('Transformations_multiples', '40', '50') }}

- -

Cet exemple montre un carré déplacé et pivoté de 45 degrés.

- -

Déformation

- -

Pour transformer un rectangle en un losange, vous pouvez utiliser les fonctions skewX() et skewY(). Chacun prend pour attribut un angle qui détermine le biais de l'élément transformé.

- -

Agrandissement et réduction

- -

scale() modifie la taille d'un élément. Cette fonction prend en paramètre 2 valeurs de transformation, la première pour celle des X et la deuxième pour celle des Y. Ces valeurs sont écrites sous forme de ratio : 0.5 correspond à une réduction à 50%, 1.5 à une augmentation de 50%. Attention, c'est le système de chiffre anglo-saxon qui est ici utilisé, il faut donc déclarer un nombre réel en utilisant un point et non une virgule. Si la deuxième valeur n'est pas déclarée, elle est considérée par défaut comme égale à la première.

- -

Transformations complexes avec matrice

- -

Toutes les transformations détaillées ci-dessous peuvent être décrites dans une matrice de passage 3 par 3. Il est alors possible de combiner plusieurs transformations en appliquant directement la matrice de transformation matrix(a, b, c, d, e, f) qui mappe les coordonnées d'un système de coordonnées précédent en un nouveau système de coordonnées par

- -

{xnewCoordSys=axprevCoordSys+cyprevCoordSys+eynewCoordSys=bxprevCoordSys+dyprevCoordSys+f\left\{ \begin{matrix} x_{\mathrm{prevCoordSys}} = a x_{\mathrm{newCoordSys}} + c y_{\mathrm{newCoordSys}} + e \\ y_{\mathrm{prevCoordSys}} = b x_{\mathrm{newCoordSys}} + d y_{\mathrm{newCoordSys}} + f \end{matrix} \right.

- -

Voici un exemple concret sur la documentation de transformation SVG. Pour plus de renseignements, veuillez vous référer à la page de recommandation SVG.

- -

Effets sur les systèmes de coordonnées

- -

Quand vous utilisez une transformation, vous définissez un nouveau système de coordonnées dans l'élément que vous transformez. Cela signifie que vous appliquez la transformation à tous les attributs de l'élément transformé et donc que cet élément n'est plus dans une carte de pixel d'échelle 1:1. Cette carte est également déplacée, déformée, agrandie ou réduite selon la transformation qui lui est appliquée.

- -
<svg width="100" height="100">
-  <g transform="scale(2)">
-    <rect width="50" height="50" />
-  </g>
-</svg>
-
- -

Cet exemple aura pour résultat un rectangle de 100 par 100 pixels. Les effets les plus étonnants apparaissent lorsque vous utilisez des attributs tels que userSpaceOnUse.

- -

{{ EmbedLiveSample('Effets_sur_les_systèmes_de_coordonnées', '100', '100') }}

- -

Embarquer du SVG dans SVG

- -

Par opposition au HTML, le SVG peut embarquer d'autres éléments svg déclarés de manière tout à fait transparente. De cette façon, vous pouvez très simplement créer de nouveaux systèmes de coordonnées en utilisant viewBox, width et height de l'élément svg.

- -
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
-  <svg width="100" height="100" viewBox="0 0 50 50">
-    <rect width="50" height="50" />
-  </svg>
-</svg>
-
- -

Cet exemple a le même effet que celui vu précédemment, soit un rectangle deux fois plus grand que ce qu'il est défini.

- -

{{ EmbedLiveSample('Embarquer_du_SVG_dans_SVG', '100', '100') }}

- -

{{ PreviousNext("Web/SVG/Tutoriel/Texts", "Web/SVG/Tutoriel/Découpages_et_masquages") }}

- -

Interwiki Languages Links

-- cgit v1.2.3-54-g00ecf