issue217:inkscape
Différences
Ci-dessous, les différences entre deux révisions de la page.
Prochaine révision | Révision précédente | ||
issue217:inkscape [2025/05/17 17:59] – créée philou511 | issue217:inkscape [2025/06/03 14:29] (Version actuelle) – andre_domenech | ||
---|---|---|---|
Ligne 1: | Ligne 1: | ||
- | Drawing with Inkscape | + | **One thing that’s seen a significant change in Inkscape |
- | 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. | 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. | ||
+ | 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. | + | Un élément ayant connu une modification significative dans Inkscape 1.4, c'est la boîte de dialogue Propriétés d' |
- | 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, | + | |
- | At the bottom of the dialog is an expandable “Interactivity” section. This is where you’ll find fields in which you can add JavaScript | + | |
+ | Comparez-la avec d' | ||
+ | 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, | ||
+ | La boîte de dialogue Attributs d' | ||
+ | En passant à l' | ||
+ | **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. | 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' | ||
+ | Examinons maintenant la nouvelle boîte de dialogue « Propriétés de l' | ||
+ | Eh bien… lorsque les notes de version indiquaient que les deux boîtes de dialogue précédentes avaient été fusionnées, | ||
+ | Remarquez le mot « significative » dans cette phrase. Des modifications ont été apportées, mais elles sont mineures. L'ID, l' | ||
+ | **Although the Interactivity section was always collapsible, | ||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | 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, | ||
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. | 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. | 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. | ||
+ | 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, | ||
+ | Vous avez peut-être remarqué l' | ||
+ | Le champ DPI SVG se trouve dans la section Propriétés, | ||
+ | Comme je l'ai décrit dans le FCM n° 143, chaque type d' | ||
+ | **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' | ||
+ | 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, | ||
+ | Malheureusement, | ||
- | 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. | + | Bien que cela ne soit pas immédiatement évident, cette boîte de dialogue joue un rôle important |
- | 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 | + | |
- | Adding this capability is very straightforward: | + | |
+ | **Adding this capability is very straightforward: | ||
+ | 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' | ||
+ | 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' | ||
+ | **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, | ||
+ | Revenons au reste de la boîte de dialogue Propriétés de l' | ||
+ | En réalité, lorsque vous créez un lien, l' | ||
+ | Vous pouvez toujours accéder aux contrôles spécifiques à l' | ||
+ | **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. | ||
- | |||
- | 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, | ||
- | 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’. | 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, | + | 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, |
+ | 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' | ||
+ | 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' | ||
- | 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 | + | À mon avis, la nouvelle boîte de dialogue Propriétés de l' |
issue217/inkscape.1747497570.txt.gz · Dernière modification : 2025/05/17 17:59 de philou511