Full Circle Magazine FR

Cette page est en lecture seule. Vous pouvez afficher le texte source, mais ne pourrez pas le modifier. Contactez votre administrateur si vous pensez qu'il s'agit d'une erreur.
**One thing that’s seen a significant change in Inkscape 1.4 is the Object Properties dialog. In older versions this was a rarely visited part of the interface, mostly of concern to web developers who wanted control over the IDs of particular objects, or who wanted to add some interactivity with snippets of JavaScript that have an effect when the SVG file is loaded into a web browser (see FCM #142 for some simple examples of this).

Compare this with other design programs, in which the equivalent dialog is often left open at all times, providing object-specific details and tools that vary based on the current selection. Inkscape did actually have a similar feature in earlier versions – the Object Attributes dialog – but it was so well hidden in the UI that most people probably had no idea it existed. For anyone still on version 1.3, I detailed this dialog in FCM #143. But for 1.4 users the Object Attributes dialog is no more, having been merged with the easier-to-find Object Properties dialog.

Let’s start by looking at the Object Attributes and Object Properties dialogs from 1.3.x, when a rectangle is selected.**

Un élément ayant connu une modification significative dans Inkscape 1.4, c'est la boîte de dialogue Propriétés d'objet. Dans les versions précédentes, cette partie de l'interface était rarement consultée, principalement par les développeurs Web souhaitant contrôler les identifiants d'objets spécifiques ou ajouter de l'interactivité avec des extraits de code JavaScript agissant lors du chargement du fichier SVG dans un navigateur Web (voir le FCM n° 142 pour quelques exemples simples).

Comparez-la avec d'autres logiciels de conception, où la boîte de dialogue équivalente est souvent laissée ouverte en permanence, fournissant des détails et des outils spécifiques à chaque objet, qui varient en fonction de la sélection. Inkscape proposait une fonctionnalité similaire dans les versions précédentes – la boîte de dialogue Attributs d'objet – mais elle était si bien dissimulée dans l'interface utilisateur que la plupart des utilisateurs ignoraient probablement son existence. Pour ceux qui utilisent encore la version 1.3, j'ai détaillé cette boîte de dialogue dans FCM n° 143. Cependant, pour les utilisateurs de la version 1.4, la boîte de dialogue Attributs d'objet a disparu, ayant été fusionnée avec la boîte de dialogue Propriétés d'objet, plus facile à trouver.

Commençons par examiner les boîtes de dialogue Attributs d’objet et Propriétés d’objet de la version 1.3.x, lorsqu’un rectangle est sélectionné.


**The Object Attributes dialog reflects most of the UI elements that would be found in the tool control bar when the Rectangle tool is active. It lacks a Units picker, which seems an odd omission given the presence of the Dimensions fields; but it gains a small shortcut button for rounding the dimensions to the nearest integer – a feature that is missing from the tool control bar. Similarly, although it also has a button for making the corners sharp, just like the toolbar, it gains an extra button for quickly applying the Corners LPE, which would be a welcome addition to the tool control bar. Finally, the currently applied Fill and Stroke values are indicated by small swatches in the top right of the dialog, but frustratingly these are for information only and do not serve to open any sort of editor, nor the Fill & Stroke dialog, when clicked.

Moving on to the old Object Properties dialog, we find the confusing trio of ID, Label and Title fields. There’s a color picker for changing the object’s highlight color, which is used for the symbolic icon in the Layers & Objects dialog, and is rarely worth changing. The DPI SVG, Image Rendering and Preserve Ratio controls appear for all object types, though they only really have an effect on bitmap images. The remaining fields are pretty self descriptive, allowing you to Lock or Hide an object, or to give it a Description. There was a time when I warned against locking and hiding objects with this dialog, as it was tricky to unlock or unhide them – but this is now trivial using the Layers and Objects dialog, so that warning no longer applies.**

La boîte de dialogue Attributs d'objet reprend la plupart des éléments de l'interface utilisateur présents dans la barre de contrôle d'outils lorsque l'outil Rectangle est actif. Elle ne dispose pas de sélecteur d'unités, ce qui peut paraître étrange compte tenu de la présence des champs Dimensions ; en revanche, elle dispose d'un petit bouton de raccourci permettant d'arrondir les dimensions à l'entier le plus proche, une fonctionnalité absente de la barre de contrôle d'outils. De même, bien qu'elle dispose également d'un bouton pour rendre les angles nets, tout comme la barre d'outils, elle dispose d'un bouton supplémentaire permettant d'appliquer rapidement l'effet de contour des angles, un ajout appréciable à la barre de contrôle d'outils. Enfin, les valeurs de remplissage et de contour actuellement appliquées sont indiquées par de petits échantillons en haut à droite de la boîte de dialogue. Malheureusement, ces valeurs ne sont données qu'à titre indicatif et ne permettent pas d'ouvrir un éditeur, ni la boîte de dialogue Remplissage et contour, lorsqu'on clique dessus.

En passant à l'ancienne boîte de dialogue Propriétés d'objet, on retrouve le trio déroutant des champs ID, Étiquette et Titre. Un sélecteur de couleur permet de modifier la couleur de surbrillance de l'objet. Il est utilisé pour l'icône symbolique de la boîte de dialogue Calques et objets, et il est rarement utile de le modifier. Les commandes DPI SVG, Rendu et Rapport de forme sont disponibles pour tous les types d'objets, mais n'ont d'effet que sur les images bitmap. Les autres champs sont assez explicites et permettent de verrouiller ou de masquer un objet, ou de lui attribuer une description. Il fut un temps où je déconseillais de verrouiller et de masquer des objets avec cette boîte de dialogue, car il était difficile de les déverrouiller ou de les afficher. Mais cette opération est désormais simple avec la boîte de dialogue Calques et objets ; cet avertissement n'est donc plus d'actualité.


**At the bottom of the dialog is an expandable “Interactivity” section. This is where you’ll find fields in which you can add JavaScript to individual objects in your drawing. If you know what you’re doing, this can be a quick and easy way to add small amounts of interactivity to an SVG image when it’s loaded into a web browser – but it does require some amount of web development experience to do anything terribly useful with.

Now let’s take a look at the new-and-improved Object Properties dialog in 1.4. To access it, simply choose it from the context menu of any object in your file, or select an object and use the Object > Object Properties… menu entry.

Well… when the release notes said that the previous two dialogs had been combined, they weren’t joking. Clearly the old Object Attributes dialog has been pretty much cut-and-pasted into the top of the Object Properties dialog, with no significant changes along the way.

Note the word ‘significant’ in that sentence. There have been changes, but they’re pretty minor. The ID, Label, Title and other main fields from the Object Properties dialog have been placed into a collapsible “Properties” section. This is a good move, as most people don’t really need to use these controls, and can leave this section collapsed most of the time. **

En bas de la boîte de dialogue se trouve une section « Interactivité » extensible. Vous y trouverez des champs permettant d'ajouter du JavaScript à des objets individuels de votre dessin. Si vous savez comment faire, cela peut être un moyen rapide et facile d'ajouter une petite quantité d'interactivité à une image SVG lorsqu'elle est chargée dans un navigateur Web. Cependant, une certaine expérience en développement Web est nécessaire pour en tirer un résultat vraiment utile.

Examinons maintenant la nouvelle boîte de dialogue « Propriétés de l'objet » améliorée de la version 1.4. Pour y accéder, il suffit de la sélectionner dans le menu contextuel de n'importe quel objet de votre fichier, ou de sélectionner un objet et d'utiliser l'entrée de menu « Objet > Propriétés de l'objet… ».

Eh bien… lorsque les notes de version indiquaient que les deux boîtes de dialogue précédentes avaient été fusionnées, ce n'était pas une blague. De toute évidence, l'ancienne boîte de dialogue « Attributs d'objet » a été quasiment copiée-collée en haut de la boîte de dialogue « Propriétés d'objet », sans modification significative.

Remarquez le mot « significative » dans cette phrase. Des modifications ont été apportées, mais elles sont mineures. L'ID, l'Étiquette, le Titre et les autres champs principaux de la boîte de dialogue Propriétés de l'objet ont été regroupés dans une section « Propriétés », réductible. C'est une bonne initiative, car la plupart des utilisateurs n'ont pas vraiment besoin de ces contrôles et peuvent laisser cette section réduite la plupart du temps.


**Although the Interactivity section was always collapsible, it’s nice to see that the old single-line fields have been replaced with multi-line text areas, which is far more conducive to writing code. They’re still far from perfect, showing just shy of 5 lines of text, which isn’t a huge amount in code terms. They do scroll if you enter more lines, but can’t be resized. It would have been a whole lot nicer if you could open a larger text editing window or dialog from each of these fields, but it’s still an improvement over what we had in earlier releases.

You may have noticed that the DPI SVG, Image Rendering and Preserve Ratio controls are missing. As I noted above, these only really make sense for bitmap images – so they now only appear if you have a bitmap image selected.

The DPI SVG field is in the Properties section, but the other two controls are part of the topmost area, with the Aspect Ratio being promoted from a non-obvious checkbox to a more descriptive pair of radio buttons.

As I described back in FCM #143, each type of object has its own specific set of controls. With the dialog open you can select different items in your image to gain access to the relevant controls without having to switch to a different tool. You also gain the benefit of those small bonus controls that only appear in this dialog. I don’t usually have dialogs docked to the side of my screen, preferring to use windowed dialogs that I open and close as required. But the utility offered by this superset of two older dialogs means that I may well find room for it as a permanent addition to the side of my window.**

Bien que la section Interactivité ait toujours été réductible, il est intéressant de constater que les anciens champs d'une seule ligne ont été remplacés par des zones de texte multilignes, bien plus propices à l'écriture de code. Leur taille est encore loin d'être parfaite, avec un peu moins de 5 lignes de texte, ce qui n'est pas énorme en termes de code. Elles défilent si vous saisissez plus de lignes, mais ne peuvent pas être redimensionnées. Il aurait été bien plus pratique de pouvoir ouvrir une fenêtre ou une boîte de dialogue d'édition de texte plus grande depuis chacun de ces champs, mais cela constitue tout de même une amélioration par rapport aux versions précédentes.

Vous avez peut-être remarqué l'absence des commandes DPI SVG, Rendu et Rapport de forme. Comme indiqué précédemment, elles n'ont de réelle utilité que pour les images bitmap ; elles n'apparaissent donc désormais que si une image bitmap est sélectionnée.

Le champ DPI SVG se trouve dans la section Propriétés, mais les deux autres commandes se trouvent dans la zone supérieure, le Rapport de forme passant d'une case à cocher discrète à une paire de boutons radio plus explicites.

Comme je l'ai décrit dans le FCM n° 143, chaque type d'objet possède son propre ensemble de commandes. Une fois la boîte de dialogue ouverte, vous pouvez sélectionner différents éléments de votre image pour accéder aux commandes correspondantes sans avoir à changer d'outil. Vous bénéficiez également de petits bonus qui n'apparaissent que dans cette boîte de dialogue. Je n'ai généralement pas de boîtes de dialogue ancrées sur le côté de mon écran, préférant utiliser des fenêtres que j'ouvre et ferme selon mes besoins. Mais l'utilité de ce sur-ensemble de deux anciennes boîtes de dialogue me permet de l'intégrer de manière permanente sur le côté de ma fenêtre.


**If this dialog shows specific controls based on the type of object selected, you may be wondering what happens if you select more than one type at a time. Unfortunately there’s no clever logic that shows only the controls that apply to all the objects, instead you just get a locked down version of the dialog.

I guess that behaviour is understandable – and certainly easier to code – but it would have been so much nicer to allow us to select multiple items and change the Highlight Color for all of them at once, to Lock them, or to Hide them.

Unfortunately this same, locked down dialog is what you get whenever you select more than one object, even if they’re of the same type. Again, this is a frustrating limitation, preventing you from making the same change to multiple items at once, even though this is something that is actively supported if you switch tools and use the equivalent controls in the tool control bar instead.

Although it’s not immediately obvious, this dialog plays an important role when creating hyperlinks within an Inkscape document. Inkscape can turn any object into a hyperlink, such that loading your image into a web browser and clicking the object will navigate to the URL you specified when setting it up. With enough knowledge you can use this to navigate to different viewports in the same document, but more commonly it will be used to link to an external site. For example, you may want to include a web address or social media logo in your design which will navigate to the corresponding site when clicked.**

Si cette boîte de dialogue affiche des commandes spécifiques selon le type d'objet sélectionné, vous vous demandez peut-être ce qui se passe si vous sélectionnez plusieurs types d'objets simultanément. Malheureusement, il n'existe aucune logique astucieuse permettant d'afficher uniquement les commandes applicables à tous les objets ; vous obtenez simplement une version verrouillée de la boîte de dialogue.

Je suppose que ce comportement est compréhensible – et certainement plus facile à coder –, mais il aurait été bien plus pratique de pouvoir sélectionner plusieurs éléments et modifier leur couleur de surbrillance simultanément, de les verrouiller ou de les masquer.

Malheureusement, cette même boîte de dialogue verrouillée s'affiche lorsque vous sélectionnez plusieurs objets, même s'ils sont du même type. Là encore, cette limitation est frustrante : elle vous empêche d'effectuer la même modification sur plusieurs éléments simultanément, même si cette fonctionnalité est activement prise en charge si vous changez d'outil et utilisez les commandes équivalentes dans la barre de contrôle des outils.

Bien que cela ne soit pas immédiatement évident, cette boîte de dialogue joue un rôle important lors de la création d'hyperliens dans un document Inkscape. Inkscape peut transformer n'importe quel objet en hyperlien. Ainsi, charger votre image dans un navigateur Web et cliquer dessus redirigera vers l'URL spécifiée lors de sa configuration. Avec suffisamment de connaissances, vous pourrez utiliser cette fonctionnalité pour naviguer entre différentes fenêtres d'affichage d'un même document, mais elle sera plus couramment utilisée pour créer un lien vers un site externe. Par exemple, vous pouvez inclure une adresse Web ou un logo de réseau social dans votre création, qui redirigera vers le site correspondant en cliquant dessus.


**Adding this capability is very straightforward: right-click on your chosen object to open the context menu, then select the ‘Create Anchor (Hyperlink)’ option. Your Object Properties dialog will switch to show the properties for the ‘Anchor’ object – or will open in that view if it was previously closed. Here you can enter the various attributes for your link, but don’t be put off by the fact that there are 8 fields available. In reality you only need to fill out the Href field (with the URL you want to link to), though I would usually suggest also putting some human-readable description in the Title field for accessibility purposes. The remaining fields are mostly archaic holdovers from the earliest days of SVG. I have previously described them all in detail in FCM #156, if you’re really interested.

If you do wish to link to another object within your current document, you can click on the button next to the Href field, then click on your target object, to have its ID automatically pasted in. To be honest this isn’t as useful as it sounds: linking in this way just scrolls the page to move the target object into view within your browser window. It doesn’t scale it to fill the window, and it doesn’t hide any other parts of the drawing, so you can’t easily use it as a way to show just one object (or group of objects) at a time. Although the Inkscape UI won’t stop you linking to an object in another page, multi-page Inkscape documents don’t really work in a web browser – they’ll only show the first page, so clicking the link doesn’t really do anything useful. These issues reduce the button to little more than a convenient way to achieve a not-very-useful result.**

L'ajout de cette fonctionnalité est très simple : faites un clic droit sur l'objet de votre choix pour ouvrir le menu contextuel, puis sélectionnez l'option « Créer un lien ». La boîte de dialogue Propriétés de l'objet affichera les propriétés de l'objet « Ancre » ou s'ouvrira dans cette vue si elle était fermée. Vous pouvez y saisir les différents attributs de votre lien, mais ne vous laissez pas décourager par les huit champs disponibles. En réalité, il vous suffit de renseigner le champ Href (avec l'URL vers laquelle vous souhaitez créer un lien), même si je recommande généralement d'ajouter une description lisible dans le champ Titre pour des raisons d'accessibilité. Les autres champs sont pour la plupart des vestiges archaïques des débuts de SVG. Je les ai déjà décrits en détail dans le FCM n° 156, si cela vous intéresse.

Si vous souhaitez créer un lien vers un autre objet de votre document actuel, cliquez sur le bouton à côté du champ Href, puis sur l'objet cible pour que son identifiant soit automatiquement collé. À vrai dire, ce n'est pas aussi utile qu'il y paraît : créer un lien de cette manière ne fait que faire défiler la page pour afficher l'objet cible dans la fenêtre de votre navigateur. Il ne l'ajuste pas à la taille de la fenêtre et ne masque aucune autre partie du dessin. Il est donc difficile de l'utiliser pour afficher un seul objet (ou groupe d'objets) à la fois. Bien que l'interface utilisateur d'Inkscape ne vous empêche pas de créer un lien vers un objet d'une autre page, les documents Inkscape multipages ne fonctionnent pas vraiment dans un navigateur Web ; ils n'affichent que la première page, donc cliquer sur le lien n'a pas vraiment d'utilité. Ces problèmes réduisent le bouton à un simple moyen pratique d'obtenir un résultat peu utile.


**Let’s get back to the rest of the Object Properties dialog. At this point everything might seem to be fine: you’ve created your link, populated the Href and Title fields, and saved your file. You continue working on your document without a care in the world… until you want to change the properties of your object. You select it as usual, expecting the dialog to populate with the specific controls for an ellipse or a star, only to find yourself facing the Anchor fields again.

What actually happens when you create a link is that your selected object is wrapped inside an SVG anchor element (<a>) – you can see this structure in the XML editor. When you think you’re selecting your element, what you’re actually clicking on is this <a> node, so the dialog just shows the anchor parameters again.

You can still get to the object-specific controls, by treating the <a> wrapper as though it’s a group. You can double-click on your object to ‘enter’ the group-that’s-actually-an-anchor, then click on your object once more to select it and access its properties. Yes, it’s a little clunky and yes, it would be nicer if Inkscape hid you from this complexity by putting all the anchor controls into a collapsible section and still showing the relevant controls for the inner object, but we users have to work with what the developers give us.**

Revenons au reste de la boîte de dialogue Propriétés de l'objet. À ce stade, tout semble normal : vous avez créé votre lien, renseigné les champs Href et Titre, et enregistré votre fichier. Vous continuez à travailler sur votre document sans vous soucier du reste… jusqu'à ce que vous souhaitiez modifier les propriétés de votre objet. Vous le sélectionnez comme d'habitude, en espérant que la boîte de dialogue s'affiche avec les contrôles spécifiques à une ellipse ou une étoile, pour finalement vous retrouver face aux champs Ancre.

En réalité, lorsque vous créez un lien, l'objet sélectionné est enveloppé dans un élément d'ancrage SVG (<a>) ; vous pouvez voir cette structure dans l'éditeur XML. Lorsque vous pensez sélectionner votre élément, vous cliquez en réalité sur ce nœud <a> ; la boîte de dialogue affiche donc à nouveau les paramètres d'ancrage.

Vous pouvez toujours accéder aux contrôles spécifiques à l'objet en traitant l'élément d'ancrage <a> comme s'il s'agissait d'un groupe. Vous pouvez double-cliquer sur votre objet pour accéder au groupe qui constitue en réalité une ancre, puis cliquer à nouveau dessus pour le sélectionner et accéder à ses propriétés. Certes, c'est un peu complexe et, oui, il serait plus pratique qu'Inkscape vous évite cette complexité en regroupant tous les contrôles d'ancrage dans une section réductible tout en affichant les contrôles pertinents pour l'objet interne, mais nous, utilisateurs, devons composer avec les outils proposés par les développeurs.


**Once you’ve tweaked your object, you can exit the <a> as you would normally exit a group. There are various ways to accomplish that, but I tend to either select some other object, or double-click on the background, away from other objects.

Should you wish to remove a link – unwrapping the object from within the <a> in the process – you can do so from the context menu. Right-click on the object (which is actually a right-click on the link), and you should find that the previous entry for creating a link has been replaced with ‘Remove Link’.
In my opinion the revamped Object Properties dialog is vastly more useful than the old one – but that’s mostly because it makes the features of the former Object Attributes dialog easier to access. Nevertheless, combining these two dialogs into one makes a lot of sense, and the end result is definitely better than the sum of its parts. Now, if the developers could just make those swatches do something when clicked…**

Une fois votre objet modifié, vous pouvez quitter le <a> comme vous le feriez normalement pour un groupe. Il existe plusieurs façons de procéder, mais j'ai tendance à sélectionner un autre objet ou à double-cliquer sur l'arrière-plan, loin des autres objets.

Si vous souhaitez supprimer un lien, en le décompressant du <a>, vous pouvez le faire depuis le menu contextuel. Faites un clic droit sur l'objet (ce qui revient en fait à cliquer sur le lien) et vous constaterez que l'entrée précédente pour créer un lien a été remplacée par « Retirer le lien ».

À mon avis, la nouvelle boîte de dialogue Propriétés de l'objet est bien plus utile que l'ancienne, principalement parce qu'elle facilite l'accès aux fonctionnalités de l'ancienne boîte de dialogue Attributs de l'objet. Néanmoins, combiner ces deux boîtes de dialogue en une seule est très judicieux, et le résultat final est nettement meilleur que la somme de ses parties. Si seulement les développeurs pouvaient faire en sorte que ces échantillons agissent lorsqu'on clique dessus...