Ceci est une ancienne révision du document !
Drawing with Inkscape – Part 157 By Mark Crutch
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.
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. 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. 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. 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. 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. 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. 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…
Mark uses Inkscape to create comics for the web (http://www.peppertop.com/) as well as for print. You can follow him on Twitter for more comic and Inkscape content: @PeppertopComics