diff options
Diffstat (limited to 'files/fr/web/svg/tutorial')
| -rw-r--r-- | files/fr/web/svg/tutorial/basic_transformations/index.md | 2 | ||||
| -rw-r--r-- | files/fr/web/svg/tutorial/clipping_and_masking/index.md | 2 | ||||
| -rw-r--r-- | files/fr/web/svg/tutorial/gradients/index.md | 66 | ||||
| -rw-r--r-- | files/fr/web/svg/tutorial/introduction/index.md | 4 | ||||
| -rw-r--r-- | files/fr/web/svg/tutorial/paths/index.md | 24 | ||||
| -rw-r--r-- | files/fr/web/svg/tutorial/patterns/index.md | 158 | ||||
| -rw-r--r-- | files/fr/web/svg/tutorial/svg_and_css/index.md | 4 | ||||
| -rw-r--r-- | files/fr/web/svg/tutorial/svg_fonts/index.md | 2 | ||||
| -rw-r--r-- | files/fr/web/svg/tutorial/svg_image_tag/index.md | 4 | ||||
| -rw-r--r-- | files/fr/web/svg/tutorial/svg_in_html_introduction/index.md | 6 | ||||
| -rw-r--r-- | files/fr/web/svg/tutorial/texts/index.md | 12 | ||||
| -rw-r--r-- | files/fr/web/svg/tutorial/tools_for_svg/index.md | 28 |
12 files changed, 156 insertions, 156 deletions
diff --git a/files/fr/web/svg/tutorial/basic_transformations/index.md b/files/fr/web/svg/tutorial/basic_transformations/index.md index de9f5fa712..ae936d5c72 100644 --- a/files/fr/web/svg/tutorial/basic_transformations/index.md +++ b/files/fr/web/svg/tutorial/basic_transformations/index.md @@ -53,7 +53,7 @@ Appliquer une rotation à un élément est assez simple : il suffit d'utiliser l </svg> ``` -Cet exemple montre un carré pivoté de 45°. La valeur de la rotation doit être définie en degrés. +Cet exemple montre un carré pivoté de 45°. La valeur de la rotation doit être définie en degrés. {{ EmbedLiveSample('Rotation', '31', '31') }} diff --git a/files/fr/web/svg/tutorial/clipping_and_masking/index.md b/files/fr/web/svg/tutorial/clipping_and_masking/index.md index 905c2c5eaf..00dd9920c5 100644 --- a/files/fr/web/svg/tutorial/clipping_and_masking/index.md +++ b/files/fr/web/svg/tutorial/clipping_and_masking/index.md @@ -9,7 +9,7 @@ original_slug: Web/SVG/Tutoriel/Découpages_et_masquages --- {{ 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. +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. diff --git a/files/fr/web/svg/tutorial/gradients/index.md b/files/fr/web/svg/tutorial/gradients/index.md index c1159e92aa..662d5036bb 100644 --- a/files/fr/web/svg/tutorial/gradients/index.md +++ b/files/fr/web/svg/tutorial/gradients/index.md @@ -159,39 +159,39 @@ Cet attribut contrôle ce qu'il arrive quand le dégradé arrive à sa fin, mais ```html <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> + <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="Gradient + cx="0.5" cy= + spreadMethod + <stop offset="0% + <stop offset="10 + </radialGradient + + <!-- reflect --> + <radialGradient id="GradientR + cx="0.5" cy="0.5" r="0.4" fx="0. + 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> ``` diff --git a/files/fr/web/svg/tutorial/introduction/index.md b/files/fr/web/svg/tutorial/introduction/index.md index 35d706917c..dec87d20bd 100644 --- a/files/fr/web/svg/tutorial/introduction/index.md +++ b/files/fr/web/svg/tutorial/introduction/index.md @@ -13,7 +13,7 @@ SVG est un langage [XML](/fr/XML "XML"), assez similaire au [XHTML](/fr/XHTML "f 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](http://www.w3.org "en-US/W3C") sans succès. SVG est pris en charge par tous les [principaux navigateurs](https://caniuse.com/#search=svg). 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. +SVG est apparu en 1999, après que plusieurs formats concurrents aient été soumis au [W3C](http://www.w3.org "en-US/W3C") sans succès. SVG est pris en charge par tous les [principaux navigateurs](https://caniuse.com/#search=svg). 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 @@ -29,7 +29,7 @@ Il y a un certain nombre de logiciels de dessin disponibles qui utilisent SVG co > **Note :** 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](/fr/HTML "fr/HTML"). Si vous n'êtes pas à l'aise avec le XML, voici quelques règles à garder en-tête : +Avant de commencer, vous devez avoir une compréhension basique du XML ou d'un autre langage de balisage comme le [HTML](/fr/HTML "fr/HTML"). Si vous n'êtes pas à l'aise avec le XML, voici quelques règles à garder en-tête : - Les éléments et attributs SVG sont sensibles à la casse (contrairement au HTML et doivent donc tous être entrés avec la casse indiquée ici). - Les valeurs des attributs en SVG doivent être placées entre guillemets même si ce sont des nombres. diff --git a/files/fr/web/svg/tutorial/paths/index.md b/files/fr/web/svg/tutorial/paths/index.md index 996b502a0e..13529ed237 100644 --- a/files/fr/web/svg/tutorial/paths/index.md +++ b/files/fr/web/svg/tutorial/paths/index.md @@ -13,11 +13,11 @@ L’élément [`<path>`](/fr/Web/SVG/Element/path) (_chemin_ en français) est l 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](/fr/docs/Web/SVG/Tutoriel/Formes_de_base#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. +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. +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 »). +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. @@ -27,7 +27,7 @@ Il existe cinq commandes pour tracer des lignes avec un élément `<path>`. Ces ### 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 : +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 @@ -50,7 +50,7 @@ Dans l’exemple suivant, on se place au point (10, 10). Notez cependant qu'à c ### 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. +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) @@ -59,7 +59,7 @@ Il existe deux formes abrégées pour dessiner des lignes horizontales ou vertic 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 : +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 :  @@ -77,11 +77,11 @@ Afin de commencer facilement, nous allons dessiner une forme simple, un rectangl ### 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. +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: +Ainsi, notre chemin précédent peut se raccourcir comme ceci: ```xml <path d="M10 10 H 90 V 90 H 10 Z" fill="transparent" stroke="black"/> @@ -103,7 +103,7 @@ Dans ces exemples, il serait probablement plus simple d’utiliser un élément ## 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](https://fr.wikipedia.org/wiki/Courbe_de_B%C3%A9zier). +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](https://fr.wikipedia.org/wiki/Courbe_de_B%C3%A9zier). 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`. @@ -205,7 +205,7 @@ L'élément arc part du point actuel vers le point d'arrivée (x, y) en parcoura #### x-axis-rotation -`x-axis-rotation` décrit la rotation de l’arc. Il s’explique plus facilement avec un exemple: +`x-axis-rotation` décrit la rotation de l’arc. Il s’explique plus facilement avec un exemple:  @@ -213,7 +213,7 @@ L'élément arc part du point actuel vers le point d'arrivée (x, y) en parcoura <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="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> ``` @@ -269,7 +269,7 @@ Pour un rayon `rx` et un rayon `ry` donnés, il existe deux ellipses pouvant con 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` 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. ```html <!-- large-arc-flag: 0 --> diff --git a/files/fr/web/svg/tutorial/patterns/index.md b/files/fr/web/svg/tutorial/patterns/index.md index 4f598d9087..bbfbb74002 100644 --- a/files/fr/web/svg/tutorial/patterns/index.md +++ b/files/fr/web/svg/tutorial/patterns/index.md @@ -15,24 +15,24 @@ Les motifs (_patterns_ en anglais) sont sans aucun doute les types de remplissag ```html <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"/> + <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> ``` @@ -46,7 +46,7 @@ La partie pouvant apporter le plus de confusion avec les motifs est le système 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. +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). @@ -62,29 +62,29 @@ La chose à retenir est que si l'objet change de taille, le motif lui-même sera ```html hidden <svg width="600" height="200" xmlns="http://www.w3.org/2000/svg" id="svg" class="playable-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"/> + <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> <div class="playable-buttons"> - <input id="edit" type="button" value="Edit" /> - <input id="reset" type="button" value="Reset" /> + <input id="edit" type="button" value="Edit" /> + <input id="reset" type="button" value="Reset" /> </div> <textarea id="code" class="playable-code"> rect.setAttribute('width', 300);</textarea> @@ -134,29 +134,29 @@ Maintenant, parce le contenu du motif utilise le même système d'unité que le ```html hidden <svg width="600" height="200" xmlns="http://www.w3.org/2000/svg" id="svg" class="playable-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" 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> - </defs> - - <rect fill="url(#Pattern)" stroke="black" width="200" height="200"/> + <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" width=".25" height=".25" patternContent + <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> + </defs> + + <rect fill="url(#Pattern)" stroke="black" width="200" height="200"/> </svg> <div class="playable-buttons"> - <input id="edit" type="button" value="Edit" /> - <input id="reset" type="button" value="Reset" /> + <input id="edit" type="button" value="Edit" /> + <input id="reset" type="button" value="Reset" /> </div> <textarea id="code" class="playable-code"> rect.setAttribute('width', 300);</textarea> @@ -208,29 +208,29 @@ Bien sûr, cela veut dire que le motif ne sera pas mis à l'échelle si vous mod ```html hidden <svg width="600" height="200" xmlns="http://www.w3.org/2000/svg" id="svg" class="playable-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="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> - </defs> - - <rect fill="url(#Pattern)" stroke="black" width="200" height="200"/> + <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="10" y="10" width="50" height="50" + <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> <div class="playable-buttons"> - <input id="edit" type="button" value="Edit" /> - <input id="reset" type="button" value="Reset" /> + <input id="edit" type="button" value="Edit" /> + <input id="reset" type="button" value="Reset" /> </div> <textarea id="code" class="playable-code"> rect.setAttribute('width', 300);</textarea> diff --git a/files/fr/web/svg/tutorial/svg_and_css/index.md b/files/fr/web/svg/tutorial/svg_and_css/index.md index c89a4edf3d..aa54e0b787 100644 --- a/files/fr/web/svg/tutorial/svg_and_css/index.md +++ b/files/fr/web/svg/tutorial/svg_and_css/index.md @@ -39,7 +39,7 @@ Créez un nouveau document SVG en tant que fichier texte brut, `doc.svg`. Copiez </defs> <text id="heading" x="-280" y="-270">Démonstration SVG</text> -<text id="caption" x="-280" y="-250">Déplacez le pointeur de +<text id="caption" x="-280" y="-250">Déplacez le pointeur de votre souris sur la fleur.</text> <g id="flower"> @@ -423,7 +423,7 @@ Voici comment se présente la structure du document SVG désormais. </defs> <text id="heading" x="-280" y="-270">Démonstration SVG</text> - <text id="caption" x="-280" y="-250">Déplacez le pointeur de votre souris sur la fleur.</text> + <text id="caption" x="-280" y="-250">Déplacez le pointeur de votre souris sur la fleur.</text> <g id="flower"> <circle id="overlay" cx="0" cy="0" r="200" stroke="none" fill="url(#fade)"/> diff --git a/files/fr/web/svg/tutorial/svg_fonts/index.md b/files/fr/web/svg/tutorial/svg_fonts/index.md index 89ee876a72..94fa8d0d03 100644 --- a/files/fr/web/svg/tutorial/svg_fonts/index.md +++ b/files/fr/web/svg/tutorial/svg_fonts/index.md @@ -39,7 +39,7 @@ Quelques ingrédients sont nécessaires pour intégrer une police en SVG. Prenon 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`](/fr/CSS/@font-face "en/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](http://en.wikipedia.org/wiki/Ascender_%28typography%29)). +L'élément {{ SVGElement("font-face") }} est l'équivalent SVG de la déclaration CSS [`@font-face`](/fr/CSS/@font-face "en/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](http://en.wikipedia.org/wiki/Ascender_%28typography%29)). 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. diff --git a/files/fr/web/svg/tutorial/svg_image_tag/index.md b/files/fr/web/svg/tutorial/svg_image_tag/index.md index 5070f36eca..b74d927031 100644 --- a/files/fr/web/svg/tutorial/svg_image_tag/index.md +++ b/files/fr/web/svg/tutorial/svg_image_tag/index.md @@ -12,7 +12,7 @@ original_slug: Web/SVG/Tutoriel/SVG_Image_Tag 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. +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 <?xml version="1.0" standalone="no"?> @@ -27,7 +27,7 @@ Dans cet exemple basique, une image JPG liée par l'attribut {{ SVGAttr("xlink: Il faut prendre note de quelques point essentiels (donnés par les [spécifications W3](http://www.w3.org/TR/SVG/struct.html#ImageElement)): - Si les attributs x ou y ne sont pas spécifiés, ils vaudront 0. -- Si les attributs height ou width ne sont pas spécifiés, ils vaudront 0. +- Si les attributs height ou width ne sont pas spécifiés, ils vaudront 0. - Si l'attribut height ou l'attribut width est initialisé à 0, cela désactivera l'affichage de l'image. {{ 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.md b/files/fr/web/svg/tutorial/svg_in_html_introduction/index.md index 4f28884c41..a68c21f6d2 100644 --- a/files/fr/web/svg/tutorial/svg_in_html_introduction/index.md +++ b/files/fr/web/svg/tutorial/svg_in_html_introduction/index.md @@ -56,12 +56,12 @@ Voici le code source de cet exemple : ### 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). +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 : +Cette approche bénéficie des points suivants en sa faveur : - Nous avons choisi un formulaire XHTML classique qui pourrait faire partie d'un site Web existant, et lui avons ajouté un fond attractif et interactif -- L'approche assure une rétro-compatibilité pour les navigateurs qui ne supportent pas SVG ; simplement, aucun fond n'apparaîtra pour eux +- L'approche assure une rétro-compatibilité pour les navigateurs qui ne supportent pas SVG ; simplement, aucun fond n'apparaîtra pour eux - Elle est très simple et remplit sa fonction parfaitement - L'image se redimensionne automatiquement à la taille requise de manière intelligente - Nous pouvons avoir des déclarations de styles appliquées à la fois sur le HTML et le SVG diff --git a/files/fr/web/svg/tutorial/texts/index.md b/files/fr/web/svg/tutorial/texts/index.md index 86942d29c4..6896555e2c 100644 --- a/files/fr/web/svg/tutorial/texts/index.md +++ b/files/fr/web/svg/tutorial/texts/index.md @@ -93,9 +93,9 @@ Cet élément récupère via son attribut `xlink:href` un chemin arbitraire et a ```xml <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> + <textPath xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#my_path"> + A curve. + </textPath> </text> ``` @@ -105,9 +105,9 @@ Cet élément récupère via son attribut `xlink:href` un chemin arbitraire et a <svg width="200" height="100" xmlns="http://www.w3.org/2000/svg"> <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> + <textPath xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#my_path"> + A curve. + </textPath> </text> <style>< -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. +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. +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/](http://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. +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/](http://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. +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. +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](http://xmlgraphics.apache.org/fop/), il permet également de transformer du SVG en PDF. +Utilisé avec [Apache FOP](http://xmlgraphics.apache.org/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](http://ImageMagick.org) 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](http://library.gnome.org/devel/rsvg/) pour le rendu de ses images SVG. +Il existe plusieurs projets qui permettent d'exporter une image tramée à partie d'une source SVG. [ImageMagick](http://ImageMagick.org) 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](http://library.gnome.org/devel/rsvg/) pour le rendu de ses images SVG. ## Raphael JS URL: [raphaeljs.com](http://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. +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](http://snapsvg.io/) +URL: [snapsvg.io](http://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. @@ -56,16 +56,16 @@ Une nouvelle couche d'abstraction JavaScript, plus récent, du même auteur que URL: [www.google.com/google-d-s/drawings/](http://www.google.com/google-d-s/drawings/) -Les dessins réalisés dans Google Docs peuvent être exportés en SVG. +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](http://jsxgraph.uni-bayreuth.de/wp/) supporte VML, SVG et canvas, proposant automatiquement l'un ou l'autre en fonction du support des navigateurs. +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](http://jsxgraph.uni-bayreuth.de/wp/) 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](http://carto.net) pour davantage de détails. +SVG est souvent utilisé dans les applications GIS (Geographic Information System) à la fois comme format de stockage et de rendu. Cf [carto.net](http://carto.net) pour davantage de détails. ## Autres outils -Le W3C propose une [liste des programmes](http://www.w3.org/Graphics/SVG/WG/wiki/Implementations) qui supportent le SVG. +Le W3C propose une [liste des programmes](http://www.w3.org/Graphics/SVG/WG/wiki/Implementations) qui supportent le SVG. {{ PreviousNext("Web/SVG/Tutoriel/SVG_Image_Tag") }} |