There’s a part of the Inkscape user interface that is so common, and so taken for granted, that you’ve probably never given much thought to it: the page border. Yet this seemingly mundane part of the display plays a vital role when it comes to creating SVG files for use online. By understanding what it represents, and how to manipulate it, you will open up some techniques that can make your SVG files far more versatile, even if they’re only being included via an <img> tag. 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 <img>.
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. 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 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 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. The viewBox attribute is a list of four numbers, representing the x and y coordinates of the origin in the drawing, and the width and height of the drawing in “user units”. Let’s look at a couple of examples: <svg … width=“100” height=“200” viewBox=“0 0 100 200” … >
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 :
<svg …
width="100" height="200" viewBox="0 0 100 200" … >
This one’s simple. The width and height of the image will default to 100px by 200px, and the coordinates in the drawing are mapped to the image on a 1:1 basis. If you draw a rectangle that’s 100 units wide and 200 units tall, it will fill the available space in the browser window (assuming you position it at the top left of your drawing). Let’s try another: <svg … width=“100” height=“200” viewBox=“0 0 500 1000” … > Again the image will render to a size of 100px by 200px in the browser. But the viewBox defines a different coordinate system. Now 500 units in the drawing map to 100px in the browser. If you draw a rectangle that’s 100 units wide and 200 units tall this time, it will occupy only one corner of the image (actually being drawn as 20px by 40px in the browser). To fill the image, you would need to draw a rectangle that’s 500 units by 1000 units.
Celui-ci est simple. Les largeur et hauteur de l’image seront de 100 px par 200 px par défaut, et les coordonnées du dessin formeront une image sur une base de 1:1. Si vous dessinez un rectangle de 100 unités de large pour 200 unités de hauteur, il remplira l’espace disponible dans la fenêtre du navigateur (en supposant que vous le positionnez en haut à gauche de votre dessin). Essayons-en un autre :
<svg …
width="100" height="200" viewBox="0 0 500 1000" … >
À nouveau, l’image est affichée dans une taille de 100 px par 200 px dans votre navigateur. Mais l’attribut viewBox définit un autre système de coordonnées. Les 500 px de votre dessin deviennent 100 px dans le navigateur. Si vous dessinez un rectangle qui, cette fois, est large de 100 px et haut de 200 px, il n’occupera seulement qu’un coin de l’image (étant dessiné réellement en 20 px par 40 px dans le navigateur). Pour remplir l’image, vous devrez dessiner un rectangle de 500 unités par 1 000 unités.
Changing the x and y values lets you move the origin of your coordinate system. It lets you say “the origin for the browser (i.e. the point that’s used as the top left of the image) should actually be 100 units down and 50 units across in my drawing”. Another way to think of it is that the viewBox lets you create a viewport into your drawing of a specific size and location: everything inside the viewport will be scaled up or down to fill the image in the browser; everything outside the viewport will be cropped and left un-drawn. 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 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.
Consider this collection of four images – a star, a circle, a spiral path, and some text in the rather wonderful free font, Trump Grotesk Bold. I’ve drawn them in four sections of a tall, thin page that is 250px wide by 1000px tall (so each element occupies 250px by 250px). With the viewBox set to “0 0 250 1000”, we have a 1:1 mapping when the image is drawn in the browser. You can pretty much ignore the “Scale x” and “Scale y” values – they get set automatically by Inkscape as you change the viewBox fields. As you might expect, when I save this image and load it into the browser, I see all four elements, taking up a space of 250px by 1000px. But look what happens if I change both the page height and the viewBox height to 250: As you can see, the page border only surrounds the text. If I save the pge and load it into the browser, all I get is a 250px by 250px image showing the text element.
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 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.
If I now set the “y” value for the viewBox to -250, thus moving the viewport upwards, only the spiral appears in the page. Saving the file and loading it in a browser now only renders the spiral, hiding the other three elements. I’m sure you’ve worked out by now that setting the “y” value to -500 will put the page around the circle, whilst -750 puts it around the star. Now let’s just remind ourselves what the HTML <img> tag looks like to render this image: <img src=“views.svg”></img> Well that’s pretty terse and to the point. It just tells the browser to show the “views.svg” file using the width and height set in the SVG file, and displaying the default viewport set by the viewBox attribute. But we can append a little magic to the filename to tell the browser to override the default viewbox: <img src=“views.svg#svgView(viewBox(0, -750, 250, 250))”></img>
Si, maintenant, je règle la valeur « y » dans viewBox à -250, déplaçant ainsi la fenêtre visuelle vers le haut, seule la spirale apparaît dans le cadre. En sauvegardant le fichier et en le rechargeant dans le navigateur, seule la spirale est visible, les trois autres éléments étant cachés.
Je suis sûr que vous avez déjà déduit qu’un réglage de la valeur « y » à -500 déplacera la page autour du cercle, alors qu’avec -750, elle sera placée autour de l’étoile. Maintenant, faisons un petit rappel pour nous-mêmes de ce à quoi ressemble la balise HTML <img> pour rendre une telle image :
<img src=“views.svg”></img>
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>
By changing the viewBox values in the URL we can therefore select a specific region of the image to display. In this case, it allows us to choose between one of several sub-images, making this approach ideal for files that contain multiple icons or logos. An alternative is to use viewBox values that focus on a particular part of your design, or cause some section to be zoomed in. That gives you the possibility of showing, for example, an overview and a detail view, both taken from the same image. 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 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 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, 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.
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.
In the <defs> section, you can see that I’ve also defined four <view> elements. Each of these has an ID that will be used to reference them later, together with a viewBox attribute. The IDs aren’t special: I’ve called them “textView”, “spiralView” and so on, simply to make it clear what they’re showing, but I could equally have gone for “fred”, “wilma”, “barney” and “betty” – had I wished to. The only requirements are that they are valid XML IDs, and are unique within the document. If in doubt, stick to plain text with no punctuation and you should be okay. Using your named view in an <img> tag is trivially straightforward – you just have to set the appropriate ID as the fragment identifier (the bit after the “#” character in a URL): <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.
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>
Of course there’s nothing to stop you referencing the same image more than once in a web page, with a different fragment identifier each time. You can also mix and match named views, the “svgView()” syntax, and the default viewBox. In this way, a single SVG image can easily be used to provide a whole host of icons and other images for your page. To finish off, here’s an example of an HTML document that uses the SVG image from this tutorial: You should now be able to understand how our single SVG image is used multiple times to give the final result:
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 pouvoir comprendre comment notre image SVG unique est utilisée plusieurs fois pour donner ce résultat final.