| Les deux révisions précédentesRévision précédente | |
| issue139:inkscape [2018/12/06 14:19] – andre_domenech | issue139:inkscape [2018/12/07 14:48] (Version actuelle) – auntiee |
|---|
| By default, creating a new document in Inkscape will create an A4 page (210x297mm), displaying a thin outline to represent the page border, and a drop shadow to make it look a little more like a page of paper than a simple rectangle. I can’t say for certain if A4 is used as a default everywhere, or if there is a locale dependency that creates US Letter pages in the USA, for example, but either way, you get a default size and visible page border. Changing the page size is done via the File > Document Properties (Ctrl-Alt-D) dialog: you can either select one of the predefined page sizes or enter a custom width and height, with your choice of units. The bottom of the dialog also provides options to show or hide the page border and to display it without the drop shadow, if you prefer.** | By default, creating a new document in Inkscape will create an A4 page (210x297mm), displaying a thin outline to represent the page border, and a drop shadow to make it look a little more like a page of paper than a simple rectangle. I can’t say for certain if A4 is used as a default everywhere, or if there is a locale dependency that creates US Letter pages in the USA, for example, but either way, you get a default size and visible page border. Changing the page size is done via the File > Document Properties (Ctrl-Alt-D) dialog: you can either select one of the predefined page sizes or enter a custom width and height, with your choice of units. The bottom of the dialog also provides options to show or hide the page border and to display it without the drop shadow, if you prefer.** |
| |
| Une partie de l’interface utilisateur d’Inkscape est tellement classique, et tellement prise pour acquise, que vous n’avez probablement jamais pris le temps d’y réfléchir : c’est la bordure de la page. Cette partie de l’affichage, qui semble banale, joue un rôle vital quand on passe à la création de fichiers SVG pour un usage en ligne. En comprenant ce qu’elle représente, et comment la manipuler, vous découvrirez certaines techniques qui peuvent rendre les fichiers SVG largement plus polyvalents, même s’il ne sont inclus que via une balise <tag>. | Une partie de l’interface utilisateur d’Inkscape est tellement classique, et tellement prise pour acquise, que vous n’avez probablement jamais pris le temps d’y réfléchir : c’est la bordure de la page. Cette partie de l’affichage, qui semble banale, joue un rôle vital quand on passe à la création de fichiers SVG pour un usage en ligne. En comprenant ce qu’elle représente, et comment la manipuler, vous découvrirez certaines techniques qui peuvent rendre les fichiers SVG largement plus polyvalents, même s’il ne sont inclus que via une balise <img>. |
| |
| Par défaut, la création d’un nouveau document dans Inkscape créera une page A4 (210 x 297 mm), affichant un fin contour qui représente le bord de la page et une ombre portée qui la fait ressembler plus à une feuille de papier qu’à un simple rectangle. Je ne peux pas dire si le A4 est utilisé par défaut partout, ou s’il y a un lien de localisation qui crée des pages au format Letter aux USA, par exemple, mais, quoiqu’il en soit, vous obtenez une taille par défaut et un bord de page visible. Le changement de la taille de la page s’obtient via le dialogue Fichier > Propriétés du document (Ctrl-Alt-D) : vous pouvez, soit sélectionner une des tailles de pages prédéfinies, soit entrer des largeur et hauteur personnalisées, avec le choix de vos unités. En bas du dialogue, vous disposez aussi d’options pour afficher ou cacher le bord de page et pour l’afficher sans ombre portée, si vous le préférez. | Par défaut, la création d’un nouveau document dans Inkscape créera une page A4 (210 x 297 mm), sur laquelle sont affichés un fin contour qui représente le bord de la page et une ombre portée qui la fait ressembler plus à une feuille de papier qu’à un simple rectangle. Je ne peux pas dire si le A4 est utilisé par défaut partout, ou s’il y a un lien de localisation qui crée des pages au format Letter aux USA, par exemple, mais, quoiqu’il en soit, vous obtenez une taille par défaut et un bord de page visible. Le changement de la taille de la page s’obtient via le dialogue Fichier > Propriétés du document (Ctrl-Alt-D) : vous pouvez, soit sélectionner une des tailles de page prédéfinies, soit entrer des largeur et hauteur personnalisées, avec le choix de vos unités. En bas du dialogue, vous disposez aussi d’options pour afficher ou cacher le bord de page et pour l’afficher sans ombre portée, si vous le préférez. |
| |
| **I’ve seen a few video tutorials where the presenter heads straight to this dialog to turn off the page border, but I think that’s usually a mistake. If you’re designing for print then having an idea of how your work fits into the page is essential. But the border is just as important for web work, as anything that is drawn outside it won’t be rendered by the browser. If you turn the border off, there’s a real danger that parts of your design might inadvertently fall outside it, preventing them from rendering as expected. | **I’ve seen a few video tutorials where the presenter heads straight to this dialog to turn off the page border, but I think that’s usually a mistake. If you’re designing for print then having an idea of how your work fits into the page is essential. But the border is just as important for web work, as anything that is drawn outside it won’t be rendered by the browser. If you turn the border off, there’s a real danger that parts of your design might inadvertently fall outside it, preventing them from rendering as expected. |
| The non-display, or non-printing, of content outside the page border, can be a blessing. If your design has to bleed off the edge of the page, it can be essential. You can also use the area outside the page to store rough designs, notes, spare elements, or the source objects for clones (particularly those with unset fills) – anything which you want to keep with your image, but don’t want to be visible in the final product. I’ve often used this capability to include Easter eggs in my comic strips – even to the extent of holding extra panels or even entire extra strips that can be found only by opening the original source file in Inkscape.** | The non-display, or non-printing, of content outside the page border, can be a blessing. If your design has to bleed off the edge of the page, it can be essential. You can also use the area outside the page to store rough designs, notes, spare elements, or the source objects for clones (particularly those with unset fills) – anything which you want to keep with your image, but don’t want to be visible in the final product. I’ve often used this capability to include Easter eggs in my comic strips – even to the extent of holding extra panels or even entire extra strips that can be found only by opening the original source file in Inkscape.** |
| |
| J’ai vu quelques tutoriels vidéo où le présentateur fonce vers ce dialogue pour masquer le bord de page, mais je pense que que c’est habituellement une erreur. Si vous dessinez pour ensuite imprimer, avoir une idée de comment votre travail s’intègre dans la page est essentiel. Mais la bordure est tout aussi importante pour un travail pour le Web, car tout ce que vous dessinez en dehors ne sera pas rendu par le navigateur. Si vous masquez la bordure, il y a un vrai danger que des parties de votre dessin se trouvent à l’extérieur par inadvertance, les empêchant d’être rendues comme prévu. | J’ai vu quelques tutoriels vidéo où le présentateur fonce vers ce dialogue pour masquer le bord de page, mais je pense que que c’est une erreur la plupart du temps. Si vous dessinez pour ensuite imprimer, avoir une idée de comment votre travail s’intègre dans la page est essentiel. Mais la bordure est tout aussi importante pour un travail pour le Web, car tout ce que vous dessinez en dehors ne sera pas rendu par le navigateur. Si vous masquez la bordure, il y a un vrai danger que des parties de votre dessin se trouvent à l’extérieur par inadvertance, les empêchant d’être rendues comme prévu. |
| |
| Le non-affichage, ou la non-impression, du contenu situé à l’extérieur du bord de la page peut être un bienfait. Si votre dessin doit déborder de la page, ça peut être essentiel. Vous pouvez aussi utiliser la zone extérieure pour y stocker des esquisses, des notes, des éléments épars, ou les objets sources pour le clonage (en particulier ceux avec un remplissage indéfini) - tout ce que vous voulez garder avec votre image, mais que vous ne voulez pas voir dans le résultat final. J’ai souvent utilisé cette faculté pour y inclure des Easter Eggs (Œufs de Pâques - petits cadeaux cachés) dans mes bandes dessinées, allant jusqu’à y mettre des planches supplémentaires ou même des bandes dessinées complètes qui ne peuvent être trouvées qu’en ouvrant le fichier original dans Inkscape. | Le non-affichage, ou la non-impression, du contenu situé à l’extérieur du bord de la page peut être un bienfait. Si votre dessin doit déborder de la page, ça peut être essentiel. Vous pouvez aussi utiliser la zone extérieure pour y stocker des esquisses, des notes, des éléments de rechange, ou les objets sources pour le clonage (en particulier ceux avec un remplissage indéfini) - tout ce que vous voulez garder avec votre image, mais que vous ne voulez pas voir dans le résultat final. J’ai souvent utilisé cette faculté pour inclure des Easter Eggs (Œufs de Pâques - petits cadeaux cachés) dans mes bandes dessinées, allant jusqu’à y mettre des planches supplémentaires ou même des bandes dessinées complètes qui ne peuvent être trouvées qu’en ouvrant le fichier source original dans Inkscape. |
| |
| **For many uses, the page size can natively be set in the Document Properties dialog, with no need to concern yourself any further. This sets the “width” and “height” attributes on the main <svg> which determines the default size that your image will be drawn in the browser. For an icon design, for example, you might set the dimensions to 32px by 32px, and that’s the size it will be rendered. But what happens when you want to use a different scale inside your drawing? Your drawing might be in metres or even miles, yet you still want it displayed at a reasonable size in the browser. For this, there is the viewBox attribute. | **For many uses, the page size can natively be set in the Document Properties dialog, with no need to concern yourself any further. This sets the “width” and “height” attributes on the main <svg> which determines the default size that your image will be drawn in the browser. For an icon design, for example, you might set the dimensions to 32px by 32px, and that’s the size it will be rendered. But what happens when you want to use a different scale inside your drawing? Your drawing might be in metres or even miles, yet you still want it displayed at a reasonable size in the browser. For this, there is the viewBox attribute. |
| ** | ** |
| |
| Dans de nombreuses utilisations, la taille de la page peut être réglée nativement dans le dialogue des Propriétés du document, sans s’en préoccuper par la suite. Ceci paramètre les attributs « largeur » et « hauteur » dans le <svg> principal, ce qui détermine la taille par défaut dans laquelle votre image sera dessinée dans le navigateur. Pour le dessin d’une icône, par exemple, vous devez régler les dimensions à 32 px x 32 px et le rendu sera fait dans cette taille. Mais que se passe-t-il quand vous voulez utiliser une échelle différente dans votre dessin ? Votre dessin pourrait bien être en mètres ou même en miles, que, là encore, vous voudriez qu’il soit affiché avec une taille raisonnable dans votre navigateur. Pour cela, il y a l’attribut viewBox. | Dans de nombreuses utilisations, la taille de la page peut être réglée nativement dans le dialogue des Propriétés du document, sans s’en préoccuper par la suite. Ceci paramètre les attributs « largeur » et « hauteur » dans le <svg> principal, ce qui détermine la taille par défaut dans laquelle votre image sera dessinée dans le navigateur. Pour le dessin d’une icône, par exemple, vous devez régler les dimensions à 32 px x 32 px et le rendu sera fait dans cette taille. Mais que se passe-t-il quand vous voulez utiliser une échelle différente dans votre dessin ? Votre dessin pourrait bien être en mètres ou même en miles et, pourtant, vous voudriez qu’il soit affiché avec une taille raisonnable dans votre navigateur. Pour cela, il y a l’attribut viewBox. |
| |
| L’attribut viewBox est une liste de quatre nombres, représentant les coordonnées x et y de l’origine du dessin et les largeur et hauteur de ce dessin en « unités utilisateur ». Laissez-moi prendre quelques exemples : | L’attribut viewBox est une liste de quatre nombres, représentant les coordonnées x et y de l’origine du dessin et les largeur et hauteur de ce dessin en « unités utilisateur ». Laissez-moi prendre quelques exemples : |
| For use in a web page, this capability to render only part of the image lets us perform a rather neat trick. By changing the viewBox values, we can selectively display subsections of the file, letting us store multiple images in one file. This reduces the number of network requests needed by your page, in turn speeding up your site.** | For use in a web page, this capability to render only part of the image lets us perform a rather neat trick. By changing the viewBox values, we can selectively display subsections of the file, letting us store multiple images in one file. This reduces the number of network requests needed by your page, in turn speeding up your site.** |
| |
| Le changement des valeurs de x et y vous permet de déplacer l’origine de votre système de coordonnées. Il vous fait dire « l’origine pour le navigateur (c’est-à-dire le point qui est utilisé comme le plus en haut à gauche de l’image) devrait vraiment être 100 unités plus bas et 50 unités plus à l’intérieur de mon dessin ». Une autre façon de le penser est que viewBox vous laisse créer un cadre ouvert sur votre dessin d’une taille particulière et à une certaine position : tout ce qui est dans cette ouverture est mis à l’échelle pour remplir l’image dans votre navigateur ; tout ce qui est à l’extérieur sera rogné et non affiché. | Le changement des valeurs de x et y vous permet de déplacer l’origine de votre système de coordonnées. Il vous permet de dire « l’origine pour le navigateur (c’est-à-dire le point qui est utilisé comme le plus en haut à gauche de l’image) devrait vraiment être 100 unités plus bas et 50 unités plus à l’intérieur de mon dessin ». Une autre façon de l'expliquer est que viewBox vous laisse créer un cadre ouvert sur votre dessin d’une taille particulière et à une certaine position : tout ce qui est dans cette ouverture est mis à l’échelle pour remplir l’image dans votre navigateur ; tout ce qui est à l’extérieur sera rogné et non affiché. |
| |
| Dans le cas de son utilisation dans une page Web, la possibilité de ne rendre qu’une partie de l’image nous permet de réaliser une astuce plutôt sympa. En changeant les valeurs dans viewBox, nous pouvons afficher sélectivement des sous-ensembles du fichier, nous laissant stocker plusieurs images dans un seul fichier. Ceci réduit le nombre des requêtes sur le réseau demandées par votre page, accélérant ainsi votre site. | Dans le cas de son utilisation dans une page Web, la possibilité de ne rendre qu’une partie de l’image nous permet de réaliser une astuce plutôt sympa. En changeant les valeurs dans viewBox, nous pouvons afficher sélectivement des sous-ensembles du fichier, nous laissant stocker plusieurs images dans un seul fichier. Ceci réduit le nombre des requêtes sur le réseau demandées par votre page, accélérant ainsi votre site. |
| Intéressons-nous à cet ensemble de quatre images - une étoile, un cercle, un chemin en spirale, et un texte dans une police gratuite assez merveilleuse, Trump Grotesk Bold. Je les ai dessinées en quatre sections dans une page fine et haute de 250 px de large pour 1000 px de haut (ainsi, chaque élément occupe 250 px par 250 px). Avec viewBox réglé à « 0 0 250 1000 », nous avons l’affichage de l’image en 1:1 quand elle est dessinée dans le navigateur. Vous pouvez presque ignorer les valeurs « Scale x » et « Scale y » - elles sont réglées automatiquement par Inkscape quand vous modifiez les champs dans viewBox. | Intéressons-nous à cet ensemble de quatre images - une étoile, un cercle, un chemin en spirale, et un texte dans une police gratuite assez merveilleuse, Trump Grotesk Bold. Je les ai dessinées en quatre sections dans une page fine et haute de 250 px de large pour 1000 px de haut (ainsi, chaque élément occupe 250 px par 250 px). Avec viewBox réglé à « 0 0 250 1000 », nous avons l’affichage de l’image en 1:1 quand elle est dessinée dans le navigateur. Vous pouvez presque ignorer les valeurs « Scale x » et « Scale y » - elles sont réglées automatiquement par Inkscape quand vous modifiez les champs dans viewBox. |
| |
| Comme vous pourriez vous y attendre, quand je sauvegarde mon image et que je la charge dans le navigateur, je vois les quatre éléments, occupant une surface de 250 px par 1 000 px. Mais regardez ce qui arrive si je remplace à la fois la hauteur de la page et la hauteur dans viewBox par 250 : | Comme vous pourriez vous y attendre, quand je sauvegarde mon image et la charge dans le navigateur, je vois les quatre éléments, occupant une surface de 250 px par 1 000 px. Mais regardez ce qui arrive si je remplace à la fois la hauteur de la page et la hauteur dans viewBox par 250 : |
| |
| Comme vous pouvez le voir, le bord de page n’entoure plus que le texte. Si j’enregistre la page et la recharge dans le navigateur, tout ce que je verrai, c’est un carré de 250 px par 250 px montrant le morceau de texte. | Comme vous pouvez le voir, le bord de page n’entoure plus que le texte. Si j’enregistre la page et la recharge dans le navigateur, tout ce que je verrai, c’est un carré de 250 px par 250 px montrant le morceau de texte. |
| <img src="views.svg"></img> | <img src="views.svg"></img> |
| |
| C’est plutôt bref et pertinent. Cela indique juste au navigateur de montrer le fichier « views.svg » en utilisant les hauteur et largeur indiquées dans le fichier SVG, et d’afficher le cadre par défaut paramétré dans l’attribut viewBox. Mais, nous pouvons ajouter une touche magique au nom du fichier pour dire au navigateur d’écraser les valeurs par défaut de viewBox : | C’est plutôt bref et directe. Cela indique simplement au navigateur de montrer le fichier « views.svg » en utilisant les hauteur et largeur indiquées dans le fichier SVG, et d’afficher le cadre par défaut paramétré dans l’attribut viewBox. Mais nous pouvons ajouter une touche magique au nom du fichier pour dire au navigateur d’écraser les valeurs par défaut de viewBox : |
| |
| <img src="views.svg#svgView(viewBox(0, -750, 250, 250))"></img> | <img src="views.svg#svgView(viewBox(0, -750, 250, 250))"></img> |
| Hard-coding the viewBox dimensions into the URLs does have one significant problem: if your image changes, such that elements are swapped or moved, you also need to update the HTML or CSS file containing the URLs. SVG has an answer to this problem as well: named views.** | Hard-coding the viewBox dimensions into the URLs does have one significant problem: if your image changes, such that elements are swapped or moved, you also need to update the HTML or CSS file containing the URLs. SVG has an answer to this problem as well: named views.** |
| |
| En changeant les valeurs de viewBox dans l’URL, nous pouvons en conséquence sélectionner une zone spécifique de l’image à afficher. Dans ce cas, ça nous permet d’en choisir une parmi les sous-images, rendant cette approche idéale pour les fichiers contenant de multiples icônes ou logos. Une autre solution consiste à utiliser les valeurs de viexwBox qui pointent sur une zone particulière de votre dessin, ou qui entraîne un agrandissement de cette partie. Ceci vous donne la possibilité de montrer, par exemple, une vue générale et une vue de détail, les deux issues de la même image. | En changeant les valeurs de viewBox dans l’URL, nous pouvons donc sélectionner une zone spécifique de l’image à afficher. Dans ce cas, ça nous permet d’en choisir une parmi les sous-images, rendant cette approche idéale pour les fichiers contenant de multiples icônes ou logos. Une autre solution consiste à utiliser les valeurs de viewBox qui pointent sur une zone particulière de votre dessin, ou qui entraîne un agrandissement de cette partie. Ceci vous donne la possibilité de montrer, par exemple, une vue générale et une vue de détail, les deux issues de la même image. |
| |
| Du codage en dur des dimensions de viewBox dans l’URL découle forcément un sérieux problème : si votre image change, comme des éléments qui bougent ou sont effacés, vous devrez aussi mettre à jour le fichier HTML ou CSS contenant les URL. SVG a aussi une réponse à ce problème : les vues nommées (named view). | Du codage en dur des dimensions de viewBox dans l’URL découle forcément un sérieux problème : si votre image change de telle façon que des éléments bougent ou sont effacés, vous devrez aussi mettre à jour le fichier HTML ou CSS contenant les URL. SVG a une réponse à ce problème aussi : les vues nommées (named views). |
| |
| **Named views are, as you might have guessed, a way of giving a particular set of viewBox values a name – that can then be referenced from elsewhere. Unfortunately, Inkscape has no specific support for them, ex pxcept to expose the underlying code in the XML editor. But the syntax is straightforward enough that they’re easy to add via a text editor. They can go pretty much anywhere in the SVG file, but as they’re not visible objects in their own right, I prefer to keep them in the <defs> section where things such as filter and gradient definitions live. Named views can be thought of as viewBox definitions, so this location makes sense to me. Here’s an example of the top section of the SVG file above, once I’ve added named views for each of the objects to my <defs> (below). | **Named views are, as you might have guessed, a way of giving a particular set of viewBox values a name – that can then be referenced from elsewhere. Unfortunately, Inkscape has no specific support for them, except to expose the underlying code in the XML editor. But the syntax is straightforward enough that they’re easy to add via a text editor. They can go pretty much anywhere in the SVG file, but as they’re not visible objects in their own right, I prefer to keep them in the <defs> section where things such as filter and gradient definitions live. Named views can be thought of as viewBox definitions, so this location makes sense to me. Here’s an example of the top section of the SVG file above, once I’ve added named views for each of the objects to my <defs> (below). |
| |
| In this example, the viewBox attribute in the <svg> element is set to show the text content, but I could equally have set it to show all four objects, just a couple of them, a smaller part of one of the objects, or any other rectangular space in the image. This is the viewBox that will be used by default if nothing else is specified in the document’s URL.** | In this example, the viewBox attribute in the <svg> element is set to show the text content, but I could equally have set it to show all four objects, just a couple of them, a smaller part of one of the objects, or any other rectangular space in the image. This is the viewBox that will be used by default if nothing else is specified in the document’s URL.** |
| |
| Les vues nommées sont, comme vous pouvez le deviner, une façon de donner un nom à un ensemble spécifique de valeurs de viewBox - qui peuvent ensuite être utilisées n’importe où comme références. Malheureusement, Inkscape n’a pas de support spécifique pour elles, sauf à faire apparaître le code sous-jacent dans un éditeur XML. Mais la syntaxe est suffisamment simple pour qu’elles soient faciles à ajouter via l’éditeur de texte. Elles peuvent se placer à peu près n’importe où dans le fichier SVG, mais, comme elles ne sont pas de objets visibles à proprement parler, je préfère les garder dans la section <defs> où vivent des choses comme les définitions de filtres ou de dégradés. Les vues nommées peuvent être considérées comme des définitions de viewBox, ce qui, pour moi, rend cet endroit sensé. Voici à droite un exemple de la partie haute du fichier SVG cité plus haut, et une fois que j’ai ajouté dans mes <defs> des vues nommées pour chacun des objets (ci-dessous). | Les vues nommées sont, comme vous pouvez le deviner, une façon de donner un nom à un ensemble spécifique de valeurs de viewBox - qui peuvent ensuite être utilisées n’importe où comme références. Malheureusement, Inkscape n’a pas de support spécifique pour elles, sauf à faire apparaître le code sous-jacent dans un éditeur XML. Mais la syntaxe est suffisamment simple pour qu’elles soient faciles à ajouter via l’éditeur de texte. Elles peuvent se placer à peu près n’importe où dans le fichier SVG, mais, comme elles ne sont pas de objets visibles à proprement parler, je préfère les garder dans la section <defs> où vivent des choses comme les définitions de filtres ou de dégradés. Les vues nommées peuvent être considérées comme des définitions de viewBox, ce qui, pour moi, rend cet emplacement sensé. Voici à droite un exemple de la partie haute du fichier SVG cité plus haut, et une fois que j’ai ajouté dans mes <defs> des vues nommées pour chacun des objets (ci-dessous). |
| |
| Dans cet exemple, l’attribut viewBox dans l’élément <svg> est paramétré pour montrer le contenu textuel, mais j’aurai pu tout aussi bien le régler pour voir les quatre objets, ou juste deux d’entre eux, une partie limitée de l’un d’eux, ou toute autre zone rectangulaire de l’image. C’est viewBox qui est utilisé par défaut si rien d’autre n’est spécifié dans l’URL du document. | Dans cet exemple, l’attribut viewBox dans l’élément <svg> est paramétré pour montrer le contenu textuel, mais j’aurai pu tout aussi bien le régler pour voir les quatre objets, ou juste deux d’entre eux, une partie limitée de l’un d’eux, ou toute autre zone rectangulaire de l’image. C’est viewBox qui est utilisé par défaut si rien d’autre n’est spécifié dans l’URL du document. |
| <img src="views.svg#spiralView"></img>** | <img src="views.svg#spiralView"></img>** |
| |
| Dans la section <defs>, vous pouvez voir que j’ai aussi défini quatre éléments <view>. Chacun d’eux a un identifiant (id) qui sera utilisé comme référence par la suite, en même temps qu’un attribut viewBox. Les ID n’ont rien de spécial : je les ai appelés « textView », « spiralView » et ainsi de suite, simplement pour clarifier ce qu’ils montrent, mais j’aurais pu tout autant choisir « wilma », « fred » et « betty », si je l’avais souhaité. Les seules exigences sont qu’ils soient des ID valides du XML et uniques dans le document. En cas de doute, restez sur du texte brut sans ponctuation et tout devrait bien aller. | Dans la section <defs>, vous pouvez voir que j’ai aussi défini quatre éléments <view>. Chacun d’eux a un identifiant (ID) qui sera utilisé comme référence par la suite, en même temps qu’un attribut viewBox. Les ID n’ont rien de spécial : je les ai appelés « textView », « spiralView » et ainsi de suite, simplement pour clarifier ce qu’ils montrent, mais j’aurais pu tout autant choisir « wilma », « fred » et « betty », si je l’avais souhaité. Les seules exigences sont qu’ils soient des ID valides du XML et uniques dans le document. En cas de doute, restez sur du texte brut sans ponctuation et tout devrait bien aller. |
| |
| L’utilisation de votre vue nommée dans une balise <tag> est triviale : vous avez juste à paramétrer l’ID approprié comme l’identifiant du fragment (le petit bout qui suit le caractère # dans une URL) : | L’utilisation de votre vue nommée dans une balise <img> est tout à fait simple : vous avez juste à paramétrer l’ID approprié comme l’identifiant du fragment (le petit bout qui suit le caractère # dans une URL) : |
| |
| <img src="views.svg#spiralView"></img> | <img src="views.svg#spiralView"></img> |
| Bien sûr, rien ne vous empêche de faire référence plus d’une fois à la même image dans une page Web, avec un identifiant de fragment différent à chaque fois. Vous pouvez aussi mélanger et grouper les vues nommées, la syntaxe « svgView() » et l’attribut par défaut viewBox. De cette façon, une image SVG unique peut facilement être utilisée pour héberger un ensemble complet d’icônes et d’autres images pour votre page. Pour terminer, voici un exemple de document HTML qui utilise l’image SVG de ce tutoriel : | Bien sûr, rien ne vous empêche de faire référence plus d’une fois à la même image dans une page Web, avec un identifiant de fragment différent à chaque fois. Vous pouvez aussi mélanger et grouper les vues nommées, la syntaxe « svgView() » et l’attribut par défaut viewBox. De cette façon, une image SVG unique peut facilement être utilisée pour héberger un ensemble complet d’icônes et d’autres images pour votre page. Pour terminer, voici un exemple de document HTML qui utilise l’image SVG de ce tutoriel : |
| |
| Vous devriez maintenant être capable de comprendre comment notre image SVG unique est utilisée plusieurs fois pour donner ce résultat final. | Vous devriez maintenant pouvoir comprendre comment notre image SVG unique est utilisée plusieurs fois pour donner ce résultat final. |
