In this instalment I’m going to cover a common requirement that I overlooked when introducing the use of SVG files in a web browser: turning an object in an Inkscape file into a clickable link that loads a different URL. There are a couple of ways of dealing with this: the first is to use JavaScript to respond to the ‘click’ event that fires when an object is clicked on. I covered various ways to add JavaScript to an Inkscape file across several articles. See FCM #142, #143 and #146 for the specifics. What I didn’t describe was how you could use JS to change the URL loaded in the browser.
Dans ce numéro, je vais présenter un besoin classique que j'ai laissé de côté quand j'ai parlé de l'utilisation des fichiers SVG dans un navigateur Web : transformer un objet d'un fichier Inkscape en lien cliquable qui charge une autre URL.
Il y a plusieurs façons de faire ça : la première est d'utiliser JavaScript pour répondre à l'événement « clic » qui est déclenché quand on clique sur un objet. J'ai montré plusieurs manières d'ajouter du JavaScript dans un fichier d'Inkscape dans plusieurs articles. Regardez les FCM n° 142, 143 et 146 pour les détails. Ce dont je n'ai pas parlé, c'était comment vous pourriez utiliser JS pour modifier l'URL chargée dans le navigateur.
In the most basic form, where you just want to move to a fixed URL when an object is clicked, you can use the one-line “onclick” field in the Interactivity section of the Object Properties dialog (FCM #142). For example, to make a button that goes to the Full Circle Magazine website, you would do the following: • Draw your button. Use multiple objects and text as you wish. • Put all of the button’s content into a single group. This is where we’ll attach the click handler. • Right-click on the group, and select “Object Properties”. • Expand the “Interactivity” section, if necessary. • Add the following JS code to the “onclick” field: window.location.href = “https://fullcirclemagazine.org/”; Your button and dialog should look something like that below.
Dans sa forme la plus simple, où vous voulez juste passer sur une URL fixe quand un objet est cliqué, vous pouvez utiliser le champ à une ligne « onclick » dans la section Interactivité du dialogue des Propriétés de l'objet (FCM n° 142). Par exemple, pour disposer d'un bouton pour aller sur le site Web du Full Circle Magazine, vous devriez faire ce qui suit :
••Dessinez un bouton. Utilisez plusieurs objets et du texte comme vous le voulez. ••Mettez tout le contenu du bouton dans un seul groupe. C'est là que nous attacherons le gestionnaire de clic. ••Faites un clic droit sur le groupe et sélectionnez « Propriétés de l'objet ». ••Agrandissez la section Interactivité, si nécessaire. ••Dans le champ « onclick », ajoutez le code JS suivant :
window.location.href = “https://fullcirclemagazine.org/”;
Votre bouton et le dialogue devraient ressembler à ce qui est ci-dessous.
Save the SVG file then load it into a web browser and you should find that clicking the button takes you to the FCM website (or whatever URL you used). You’ll probably have noticed what you don’t get for free with this approach: there’s no change of style of the button as you hover over it, and the mouse pointer remains as an arrow rather than changing to the “pointing finger” which is usually used to denote a clickable target. Both these shortcomings can be addressed with a little CSS, but that’s yet another chunk of code to manually add to your SVG file (FCM #145 will help with this). If all you want is a link to another URL, however, there’s no need to mess with JavaScript at all (though you may still need some CSS). Inkscape provides a simpler way to turn an object into a clickable link – and it’s this part of the UI that I overlooked in my previous articles. All you need to do is to right-click on the object and select “Create Link” to open the generically named “Object attributes” dialog:
Enregistrez votre fichier SVG puis chargez-le dans un navigateur Web ; vous devriez trouver qu'en cliquant sur le bouton vous allez sur le site Web du FCM (ou sur le site de l'URL utilisée).
Vous noterez probablement ce que vous n'avez pas eu en prime avec cette approche : il n'y a pas de changement de style du bouton quand vous le survolez avec la souris, et le pointeur de la souris reste une flèche plutôt que de se changer en un « doigt tendu » qui est habituellement utilisé pour indiquer une cible cliquable. Ces deux défauts peuvent être résolus avec un peu de CSS, mais il existe déjà un bout de code pour l'ajouter manuellement à votre fichier SVG (Le FCM n° 145 vous aidera pour ça).
Cependant, si tout ce que vous voulez est un lien vers une autre URL, il n'y a pas du tout besoin de s'embêter avec du JavaScript (bien que vous puissiez avoir encore besoin du CSS). Inkscape fournit une façon plus simple de transformer un objet en lien cliquable - et c'est cette partie de l'interface utilisateur que j'ai négligée dans mes articles précédents. Il n'y a rien de plus simple que de faire un clic droit sur l'objet et de sélectionner « Créer un lien » pour ouvrir le dialogue appelé génériquement « Attributs de l'objet ».
That’s a lot of fields for a simple link. The reason for this is that Inkscape creates an SVG 1.1 version link, which is actually implemented via an XML standard called XLink. It dates from the time when the W3C was trying to create a wide ranging collection of XML-based standards, with the idea being that a single file might use elements from across multiple specifications, allowing each spec to focus on doing one thing well. XLink, therefore, is a standard that deals with nothing but links between documents – but in trying to include numerous use-cases for links it has a whole load of optional attributes that most people will never need. Hence all the fields. The only essential field is the first one, “Href” (an abbreviation of “hyperlink reference”). A better title would have been “URL”, “Address” or “Location”, but this dialog just uses a capitalized version of the attribute name from the XLink standard. So the “href” attribute used in the XML becomes the awkwardly capitalized “Href”. With a URL in this field, save the file and load it into your web browser. You should find that clicking the button takes you to the destination page. Furthermore, you’ll get the right sort of pointer as you move your mouse over the button, so that’s one less bit of CSS to add to your page.
Vous y verrez beaucoup de champs pour un simple lien. La raison en est que Inkscape crée un lien en version SVG 1.1, qui est en fait implémentée via une norme XML appelée XLink. Elle date du temps où le W3C essayait de créer une collection très étendue de normes basées sur XML, avec l'idée qu'un simple fichier puisse utiliser des éléments issus de multiples spécifications croisées, permettant à chaque spécification de se concentrer sur une seule chose bien faite. Ainsi donc, XLink, est une norme qui ne s'occupe que des liens entre documents - mais, en essayant d'inclure de nombreux cas d'utilisation de liens, il contient tout un tas d’attributs optionnels dont la plupart des gens n'auront jamais besoin. D'où tous ces champs.
Le seul champ essentiel est le premier, « Href » (une abréviation de « hyperlink reference », référence d'hyperlien). « URL », « Adresse » ou « Emplacement » aurait été un meilleur titre, mais ce dialogue ne fait qu'utiliser une version avec une majuscule du nom de l'attribut venant de la norme XLink. Ainsi, l'attribut « href » qui était utilisé dans XML est devenu ce « Href » maladroitement récupéré. Avec l'URL placée dans ce champ, enregistrez le fichier et rechargez-le dans le navigateur Web. Vous devriez trouver qu'un clic sur le bouton vous dirige vers la page de destination. De plus, vous aurez le bon type de pointeur quand vous passez la souris sur le bouton, ce qui réduit ainsi la quantité de CSS à ajouter à votre page.
Let’s take a look at the XML editor to see what this small change has actually done to your SVG file (shown above). The first thing to note is that the new attribute hasn’t just been added to the existing <g> element. Instead, Inkscape has wrapped the group in an <a> element, and the attribute has been applied to that. Anyone who has written some HTML will be familiar with <a> as the “anchor” element which is used for links in that language. Here we have essentially the same element, but in the “svg” namespace (hence it appears as <svg:a …> in the XML editor). The URL is added as an attribute in the XLink namespace. If you were to look at the XML file in a text editor, the relevant bits of code would look like this: <a id=“a973” xlink:href=“https://fullcirclemagazine.org/”> <g id=“g952”> … </g> </a>
Jetons un œil à l'éditeur XML pour voir ce que ce petit changement a vraiment fait à votre fichier SVG (voir ci-dessus).
La première chose à noter est que le nouvel attribut n'a pas seulement été ajouté à l'élément <g> existant. Au lieu de ça, Inkscape a emballé tout le groupe dans un élément <a> et l'attribut a été appliqué à celui-ci. Toute personne qui aurait écrit un peu de HTML serait à l'aise avec <a> comme élément d'« ancrage » qui est utilisé pour les liens dans ce langage. Ici, nous avons en gros la même chose, mais dans le « namespace » (nom d'espace) « svg » (il apparaît donc comme <svg:a …> dans l'éditeur XML). L'URL est ajoutée comme attribut du nom d'espace XLink. Si vous regardiez le fichier XML dans un éditeur de texte, les morceaux de code correspondants ressembleraient à ceci :
<a id=“a973” xlink:href=“https://fullcirclemagazine.org/”>
<g id="g952"> ... </g>
</a>
Let’s fill out most of the remaining fields in the Object Attributes dialog, to try to make our link more fully featured. Having already created the link, you will find that a right-click on the object within the Inkscape window now shows the “Create Link” option as disabled. Instead, a little further up on the context menu, you’ll find that the usual “Fill and Stroke…” menu item has been replaced with “Link Properties…” which will open the same dialog (below). The first thing I’ll note here is that you will almost certainly never need to fill out this many fields. “Href” is required, and “Title” is a good idea for accessibility purposes, and also because desktop browsers will use it to create a tooltip when you mouse over the object. You might need to use the “Target” field, depending on how you want the link to behave, but I’ll come on to that shortly.
Remplissons la plupart des autres champs du dialogue des Attributs de l'objet, pour essayer de rendre notre lien plus complet. Ayant déjà créé le lien, vous verrez qu'un clic droit sur l'objet dans la fenêtre d'Inkscape montre maintenant l'option « Créer un lien » comme étant désactivée. Au lieu de ça, un peu plus bas dans le menu contextuel, vous trouverez que l'habituel élément de menu « Remplissage et contour… » a été remplacé par « Propriétés du lien… » qui ouvrira le même dialogue (ci-dessous).
La première chose que je ferai remarquer ici, c'est que vous n'aurez quasiment jamais à remplir autant de champs. « Href » est nécessaire et « Titre » est une bonne idée pour des besoins d'accessibilité, et aussi parce que les navigateurs de bureau l'utiliseront pour créer une info-bulle quand votre souris passera sur l'objet. Vous pourriez avoir besoin du champ « Cible », suivant le comportement que vous souhaitez pour le lien, mais je vais y venir sous peu.
Let’s skip to the “Type” field. This describes the nature of the link, from a specific list of options in the XLink specification. For a normal link to another page (or within the same page), “simple” is all you need. This also happens to be the default behaviour if it’s omitted, so you should just leave it blank. The other possible types are all used for more complex linking between and within XML files. If you need to use them then you probably already know about them – and I doubt very much that you’d be using this dialog to edit them anyway. One of those more advanced types is “arc”, which indicates that the link is being used to connect two other resources, identified by the “to” and “from” attributes. A “resource” in these terms is anything that can be identified with a URL, such as a website, a specific page or file, or a named element on that page. As you may have noticed, the “to” and “from” attributes aren’t present in the dialog, so you can’t actually create a valid arc link through this UI even if you knew why you might want to! For this reason the related “Arcrole” field is also completely useless (if you could create an arc link, this would hold the URL of a resource that describes it).
Passons au champ « Type ». Il décrit la nature du lien, à partir d'une liste précise d'options de la spécification XLink. Pour un lien normal vers une autre page (ou dans la même page), vous n'avez besoin que de « simple ». C'est aussi le comportement par défaut si le champ reste vide ; vous pouvez donc le laisser vide. Les autres types possibles sont tous utilisés dans des liaisons plus complexes entre et dans des fichiers XML. Si vous avez besoin de les utiliser, vous les connaissez probablement déjà - et, de toute façon, il est très douteux que vous utilisiez ce dialogue pour les modifier.
Un des types les plus techniques est « arc », qui indique que le lien est utilisé pour connecter deux autres ressources, identifiées par les attributs « to » (vers) et « from » (à partir de). Ici, le terme « ressource » signifie ce qui peut être identifié avec une URL, comme un site Web, une page ou un fichier particulier, ou un élément nommé sur cette page. Comme vous l'avez peut-être remarqué, les attributs « to » et « from » ne sont pas présents dans le dialogue ; aussi, vous ne pouvez pas créer un arc valide par cette interface même si vous savez ce que vous voulez ! Pour cette raison, le champ correspondant « Arc-rôle » est aussi vraiment inutile (si vous pouviez créer un lien arc, celui-là contiendrait l'URL de la ressource qui le décrit).
Based on that description of “Arcrole”, you may not be surprised to find that “Role” field is also intended to hold a URL that points to a descriptive resource. In this case it should hold the address of a resource that describes the nature or purpose of the link. Since your web browser doesn’t natively do anything with this attribute, however, you may as well omit it. The “Actuate” field is intended to indicate when the link should be followed. This attribute can only take very specific values but, once again, it’s completely ignored by the web browser regardless of what you enter. The easiest option is therefore to leave this blank. The “onRequest” option I’ve used in my example just means “follow this link when the object is clicked”, but that is, once again, the default behaviour anyway.
À partir de cette description de « Arc-rôle », vous n'êtes peut-être pas surpris de voir que le champ « rôle » est aussi prévu pour contenir une URL qui pointe vers une ressource détaillée. Dans ce cas, il contiendrait l'adresse de la ressource qui décrit la nature ou le but du lien. Comme, toutefois, votre navigateur Web ne fait nativement rien de cet attribut, vous pouvez l'omettre lui aussi.
Le champ « Actionner » est prévu pour indiquer si le lien devrait être suivi. Cet attribut ne peut prendre que des valeurs bien particulières, mais, encore une fois, il est complètement ignoré par le navigateur Web, quoi que vous saisssiez. L'option la plus facile est, là aussi, de le laisser vide. L'option « onRequest » (sur demande) que j'ai utilisée dans mon exemple, signifie juste « suivez ce lien si l'objet est cliqué », mais c'est, de toute façon, le comportement par défaut.
All that remains are the “Target” and “Show” fields. These attributes actually perform the same purpose, but “target” is part of the SVG spec for the <a> element, whereas “show” is an XLink offering. They affect where in the UI the browser loads the linked resource – whether it replaces the SVG file in the same frame or tab, or opens in a completely new tab or window. The main values to be aware of are as follows (note the underscores before the values for “target” (see table below). As you might guess from the missing values in the “show” column, there’s rarely much need for “_parent” or “_top”. The best policy is usually to leave the “target” and “show” attributes empty, so that the behaviour of the browser is purely defined by the user’s settings. If you’re really sure that you want to open a new tab or window when the element is clicked, then use “_blank” in the “Target” field. But that’s pretty much the only legitimate use of this field for most people.
Il ne reste plus que les champs « Cible » et « Afficher ». Ces attributs poursuivent vraiment le même objectif, mais « Cible » fait partie de la spécif. SVG pour un élément <a>, alors que « Afficher » vient de XLink. Ils conditionnent l'emplacement où, dans l'interface utilisateur, le navigateur charge la ressource liée - soit elle remplace le fichier SVG dans le même cadre ou onglet, soit elle s'ouvre dans un onglet ou une fenêtre toute neuve. Les valeurs principales à connaître sont celles qui suivent (notez les traits de soulignement avant les valeurs destinées à « Cible » (voir la table ci-dessous).
Comme vous pouvez le deviner en voyant les valeurs manquantes de la colonne « Show » (Afficher), il y a rarement un gros besoin de « _parent » et de « _top ». Le mieux est de laisser les attributs « target » (cible) et « show » vides, de sorte que le comportement du navigateur est uniquement défini par les paramètres de l'utilisateur. Si vous n'êtes pas sûr de savoir si vous voulez l'ouverture d'un onglet ou d'une fenêtre quand on clique sur l'élément, utilisez alors « _blank » dans le champ « Cible ». Mais c'est quasiment, pour la plupart des gens, la seule utilisation justifiée de ce champ.
As you can see, it’s possible to enter conflicting values for “Target” and “Show”. Experiment indicates that, for Firefox at least, “Target” takes priority. All the more reason to leave the “Show” field blank. So there you have it: a dialog with eight fields, of which you only really need one (Href), might use two if you want to have a tooltip (Href, Title), or stretch to three if you also want to force links to open in a new tab (Href, Title, Target). The remaining fields should always be left empty, unless you really know what you’re doing and are something of an XML/XLink expert. But in that case you’re undoubtedly either editing the XML content by hand, or via some other XML-based workflow. In neither case is this dialog likely to be of much use to you.
comme vous pouvez le voir, il est possible d'entrer des valeurs en conflit dans « Cible » et « Afficher ». L'expérience montre, au moins pour Firefox, que « Cible » a la priorité. Une raison de plus pour laisser le champ « Afficher » vierge.
Et voilà : il y a un dialogue avec huit champs, dont vous n'avez besoin que d'un (Href), où vous pourriez en utiliser deux si vous voulez avoir une info-bulle (Herf, Titre), ou aller jusqu'à trois si vous voulez forcer les liens à s'ouvrir dans un nouvel onglet (Href, Titre, Cible). Les champs restants devraient toujours rester vides, sauf si vous savez vraiment ce que vous faites ou si vous êtes une sorte d'expert de XML/XLink. Mais, dans ce cas et sans aucun doute, vous modifieriez le contenu XML, soit à la main, soit via un autre traitement basé sur XML. En aucun cas, ce dialogue ne sera d'une quelconque utilité pour vous.
There’s one large elephant in the room, however: the use of XLink at all. As I mentioned earlier, this dialog creates an SVG v1.1 link. But since version 2.0 of the SVG spec there’s been no need for XLink. The “href” attribute has been promoted to the SVG standard, together with the “target” attribute. Oddly, however, the “title” attribute has not been promoted, though the “xlink:title” version has been deprecated. The recommendation now is to use a <title> child element instead, which seems a little overkill for a simple tooltip. With this in mind, an SVG2 link might look something like this: <a id=“a973” href=“https://fullcirclemagazine.org/” target=“_blank”> <title>Full Circle Magazine</title> <g id=“g952”> … </g> </a>
Cependant, il y a un gros problème : l'utilisation de XLink du tout. Comme je l'ai dit avant, ce dialogue crée un lien selon SVG v1.1. Mais depuis la version 2.0 de la spécif. SVG, il n'y a plus besoin de XLink. L'attribut « href » a été inclus dans la norme SVG, avec l'attribut « target ». Cependant, chose curieuse, l'attribut « title » (titre) n'a pas été pris en compte, bien que la version « xlink:target » ait été délaissée. La recommandation actuelle est d'utiliser à la place l'élément enfant <title>, ce qui paraît un peu surfait pour une simple info-bulle.
En gardant cela en tête, un lien SVG2 pourrait ressembler à quelque chose comme ceci :
<a id=“a973” href=“https://fullcirclemagazine.org/”
target="_blank">
<title>Full Circle Magazine</title>
<g id="g952"> ... </g>
</a>
For now – and for the foreseeable future – browsers continue to support the SVG 1.1 approach, so there’s no urgency for Inkscape to change what it outputs. Modern browsers will also accept the SVG2 version, though, so perhaps some future release of Inkscape will replace this generic dialog with something more tailored to the task, and will replace the output with an SVG2 version at the same time. The last thing to note on this topic is that the URL you link to doesn’t have to be a separate file. You can also link to a named anchor within the current file. This is particularly useful with the techniques I described for creating named views in parts 79 and 80 (FCM #139, #140). For example, given a named view of “starView”, simply creating a link with an href of “#starView” would mean that the image would switch to that view when the object is clicked. A similar effect can be achieved with the full viewBox syntax, using an href of “#svgView(viewBox(0, -250, 250, 500))” for example.
Pour le moment - et dans le futur prévisible - les navigateurs continuent de supporter l'approche de la SVG 1.1, et il n'y a donc aucune urgence pour Inkscape à changer ce qu'il sort. Bien que les navigateurs modernes acceptent aussi la version SVG2, il se peut qu'une publication future d'Inkscape remplace ce dialogue générique par quelque chose de mieux adapté à la tâche et, qu'en même temps, la sortie sera elle-même remplacée par une autre en version 2.0.
La dernière chose à noter à ce sujet, c'est que l'URL vers laquelle vous faites le lien n'est pas obligatoirement un fichier séparé. Vous pouvez aussi faire un lien vers une ancre nommée dans le fichier courant. C'est particulièrement utile avec les techniques que j'ai décrites pour créer des vues nommées dans les parties 79 et 80 (FCM n° 139 et 140). Par exemple, étant donné une vue nommé « starView », la simple création d'un lien avec le href « #starView » signifiera que l'image passera sur cette vue quand on cliquera sur l'objet. Un effet similaire peut être réalisé avec la syntaxe complète de viewBox, en utilisant, par exemple, le href « #svgView(viewBox(0, -250, 250, 500)) ».
This can be an easy way to introduce interactivity to an SVG file. Consider a slideshow in which each slide is a separate part of the SVG image, and a viewBox is used to show just the first slide by default. By adding “Previous” and “Next” buttons which have viewBox links attached you can make a simple linear slideshow – or you could add more links to let you jump directly to any other part of the file. Of course you’re also free to mix XLink-based links with those created via JavaScript, picking the best tool for the job. One thing you can do with JS which isn’t possible with the simpler form, is to provide additional logic to determine the target location. You might change to different URLs based on the time of day, or prompt the user for some additional information that is then encoded into the URL. Consider a web-based storybook, for example, in which XLink is used to move between the pages, but JS provides extra interactivity when elements are clicked on, or hovered over.
Ce peut être une façon simple d'introduire une interactivité dans un fichier SVG. Prenez un diaporama dans lequel chaque diapo serait une partie séparée d'une image SVG, et une viewBox qui serait juste utilisée pour montrer la première diapo par défaut. En ajoutant des boutons « Précédent » et « Suivant » auxquels seraient attachés des liens vers la viewBox, vous pourriez faire un diaporama simple et linéaire, ou vous pourriez ajouter d'autres liens pour sauter directement à une autre partie du fichier.
Bien sûr, vous êtes libre de mélanger les liens basés sur du XML avec ceux créés via JavaScript, en prenant le meilleur outil pour ce travail. Vous pouvez faire une chose avec JS qui n'est pas possible avec un simple formulaire : c'est d'incorporer une logique supplémentaire pour déterminer l'emplacement de la cible. Vous pouvez viser différentes URL suivant l'heure du jour, ou demander à l'utilisateur une information additionnelle qui est ensuite encodée dans l'URL. Imaginez un livre d'histoires, basé sur le Web, dans lequel XLink serait utilisé pour passer d'une page à l'autre, mais où JS fournirait une interactivité supplémentaire quand on clique sur des éléments ou qu'on les survole avec la souris.