**There are still a number of changes and new features in Inkscape version 1.0 which I haven’t covered over the past few months. In order to get through as many new features as I can, this month I’m going to take a whistle-stop tour of some of the smaller features which don’t necessarily require complex examples to demonstrate. Hold on to your hats!**
Il y a encore un certain nombre de changements et de nouvelles fonctionnalités dans la version 1.0 d'Inkscape que je n'ai pas couverts au cours des derniers mois. Afin d'aborder autant de nouvelles fonctionnalités que possible, je vais ce mois-ci faire un tour d'horizon de quelques-unes des plus petites fonctionnalités qui ne nécessitent pas nécessairement des exemples complexes pour être démontrées. Accrochez-vous !
**Y-Axis inversion
I’ve said this before, and no doubt I’ll say it again: Inkscape is not a CAD program, despite offering some CAD-like features. Nevertheless, it has historically behaved the same way as most CAD programs – and even traditional paper-and-pen technical drawing – with regard to the position and orientation of its y-axis. Previous versions of Inkscape placed the origin (the 0, 0 point) at the bottom-left of the canvas, with the positive direction of the y-axis going upwards.
If you come from a CAD, drafting or graphing background, this may seem perfectly sensible. But Inkscape is really an SVG editor, and SVG is a product of the web world. Web pages grow from the top downwards. Add some more paragraphs to your HTML page and the browser simply extends the scroll bar to let you reach them. SVG works in the same way, with its origin at the top-left of the drawing area (i.e. the browser window), and the positive direction of the y-axis going downwards.
This mismatch between Inkscape’s on-screen behaviour and the requirements of the SVG format meant that the coordinates of points viewed in the program would be different to the values that were actually stored in the file. For most users, this wasn’t a problem, but when using Inkscape to produce graphics that will ultimately appear on a web page, this mismatch could make life unnecessarily difficult, especially when trying to write JavaScript to dynamically alter the file within a web browser.
With v1.0, Inkscape now defaults to the SVG standard for its origin and y-axis direction. Should this cause you any problems or confusion, you can revert to the previous behaviour by un-checking the “Origin in upper left with y-axis pointing down” setting in the Interface panel of the Edit > Preferences dialog.
**
Inversion de l'axe des Y
Je l'ai déjà dit et je le répéterai sans doute : Inkscape n'est pas un programme de CAO, bien qu'il offre certaines fonctionnalités similaires à la CAO. Néanmoins, il s'est historiquement comporté de la même manière que la plupart des programmes de CAO - et même que le dessin technique traditionnel à la plume - en ce qui concerne la position et l'orientation de son axe des ordonnées. Les versions précédentes d'Inkscape plaçaient l'origine (le point 0, 0) en bas à gauche de la toile, la direction positive de l'axe des y allant vers le haut.
Si vous venez d'un environnement de CAO, de dessin ou de graphisme, cela peut sembler parfaitement raisonnable. Mais Inkscape est en réalité un éditeur SVG, et le SVG est un produit du monde du Web. Les pages Web se développent du haut vers le bas. Ajoutez quelques paragraphes supplémentaires à votre page HTML et le navigateur étend simplement la barre de défilement pour vous permettre de les atteindre. SVG fonctionne de la même manière, avec son origine en haut à gauche de la zone de dessin (c'est-à-dire la fenêtre du navigateur), et la direction positive de l'axe des y va vers le bas.
Ce décalage entre le comportement d'Inkscape à l'écran et les exigences du format SVG signifiait que les coordonnées des points visualisés dans le programme étaient différentes des valeurs effectivement stockées dans le fichier. Pour la plupart des utilisateurs, ce n'était pas un problème, mais lorsqu'on utilisait Inkscape pour produire des graphiques qui apparaîtraient finalement sur une page Web, ce décalage pouvait rendre la vie inutilement difficile, surtout lorsqu'on essayait d'écrire du JavaScript pour modifier dynamiquement le fichier dans un navigateur Web.
Avec la v1.0, Inkscape utilise désormais par défaut la norme SVG pour son origine et la direction de l'axe des y. Si cela vous cause des problèmes ou de la confusion, vous pouvez revenir au comportement précédent en décochant le paramètre « Origine en haut à gauche avec l'axe des y pointant vers le bas » dans le panneau Interface de la boîte de dialogue Édition > Préférences.
**Duplicating guides
Version 1.0 introduces a means of duplicating an existing guide line. The behaviour of this differs between v1.0.x and the release candidate for version 1.1 (the full version of which may have even been released by the time this magazine is published). Let’s look at v1.0 first, where the change is rather frustrating and unintuitive.
There’s a new “Duplicate” button in the Guideline dialog (opened by double-clicking on an existing guide). This duplicates the current guide, in-place, then closes the dialog. No other changes are made to the duplicate, regardless of what other parameters you set in the dialog. This can easily lead to confusion as it’s not always obvious that there are now two co-positioned guidelines. Double-clicking on the lines will open the dialog again, where you can make changes that will affect one of them.**
Duplication des guides
La version 1.0 introduit un moyen de dupliquer une ligne de guide existante. Le comportement de cette fonction diffère entre la v1.0.x et la version candidate à la version 1.1 (dont la version complète pourrait même être sortie au moment de la publication de ce magazine). Examinons d'abord la v1.0, où les changements sont plutôt frustrants et peu intuitifs.
Il y a un nouveau bouton « Dupliquer » dans la boîte de dialogue des guides (ouverte par un double-clic sur un guide existant). Cela duplique le guide actuel, en place, puis ferme le dialogue. Aucune autre modification n'est apportée à la duplication, quels que soient les autres paramètres définis dans la boîte de dialogue. Cela peut facilement prêter à confusion car il n'est pas toujours évident qu'il y a maintenant deux lignes directrices superposées. En double-cliquant sur les lignes, vous ouvrirez à nouveau la boîte de dialogue, où vous pourrez apporter des modifications qui affecteront l'une d'entre elles.
**Suppose, therefore, that you have a horizontal guideline and you wish to create two more parallel guidelines, with 10mm spacing between them. Here are the steps:
• Double-click on the existing line to bring up the Guideline dialog.
• Click the Duplicate button. The dialog closes.
• Double-click on the newly duplicated line (which is on top of the existing line) to open the dialog again.
• Enter 10mm into the “Y” field, check the “Relative change” box, and click the OK button. The dialog closes, but you now have two guides on the page, separated by 10mm.
• Repeat all four steps, but starting with your newly duplicated and moved line.
Although the “Relative change” box remains checked between steps, the value in the “Y” field is cleared. This makes it frustrating to create a series of equally spaced guides. If you forget to click the “Duplicate” button before you change the value, you’ll end up moving your original guide by mistake. No amount of hitting Ctrl-Z will undo that mistake: you’ll have to reopen the dialog and move the guide by the opposite amount to get it back to where it started.
Fortunately this feature has been improved in the 1.1 release candidate. In that version you simply open the dialog, put in your relative change, then press Duplicate (rather than OK) to create a duplicate guide with the movement already applied. Much simpler!**
Supposons donc que vous disposez d'une ligne directrice horizontale et que vous souhaitez créer deux autres lignes directrices parallèles, espacées de 10 mm. Voici les étapes à suivre :
••Double-cliquez sur la ligne existante pour faire apparaître la boîte de dialogue Ligne directrice.
••Cliquez sur le bouton Dupliquer. La boîte de dialogue se ferme.
••Double-cliquez sur la ligne nouvellement dupliquée (qui se trouve au-dessus de la ligne existante) pour ouvrir à nouveau la boîte de dialogue.
••Entrez 10 mm dans le champ « Y », cochez la case « Changement relatif » et cliquez sur le bouton OK. La boîte de dialogue se ferme, mais vous avez maintenant deux guides sur la page, séparés de 10 mm.
••Répétez les quatre étapes, mais en commençant par votre ligne nouvellement dupliquée et déplacée.
Bien que la case « Changement relatif » reste cochée entre les étapes, la valeur du champ « Y » est effacée. Cela rend frustrant la création d'une série de guides à espacement égal. Si vous oubliez de cliquer sur le bouton « Dupliquer » avant de modifier la valeur, vous finirez par déplacer votre guide original par erreur. Il est impossible d'annuler cette erreur en appuyant sur Ctrl-Z : vous devrez rouvrir la boîte de dialogue et déplacer le guide de la valeur opposée pour le ramener à son point de départ.
Heureusement, cette fonctionnalité a été améliorée dans la version candidate 1.1. Dans cette version, il vous suffit d'ouvrir la boîte de dialogue, d'introduire votre changement relatif, puis d'appuyer sur Dupliquer (plutôt que sur OK) pour créer un guide dupliqué avec le mouvement déjà appliqué. C'est beaucoup plus simple !
**Filter Region size
From a frustrating change to a delightful one. In order to reduce the amount of processing required when a filter is applied to an object, SVG includes the ability to set a finite boundary outside of which the filter is no longer calculated. For some filters – particularly those involving large blurs or offsets – the default filter region is too small, resulting in the edges of the filtered content being cut-off with a hard boundary. You can see the effect quite clearly at the sides of this heavily blurred circle.
It’s always been possible to adjust the size of the filter region, via the Filter General Settings tab of the Filter Editor dialog. But the four fields you’ll find there are less than obvious to anyone who hasn’t read up on the inner details of SVG filters. You’ll also have to guess – or find out through trial-and-error – what the best values need to be for your particular image. Set the filter area too large and you’ll slow down the rendering of your image. Set it too small, or in the wrong position, and you’ll see your filter being cut-off.
With version 1.0, guessing the optimum values for these fields is a thing of the past. With a filtered object selected, switch to the Node tool (F2) and you’ll see diamond-shaped handles at the top-left and bottom-right of your object which can be dragged to directly adjust the filter region on the canvas.**
Taille de la région de filtrage
D'un changement frustrant à un changement très agréable. Afin de réduire la quantité du traitement nécessaire lorsqu'un filtre est appliqué à un objet, SVG inclut la possibilité de définir une limite finie en dehors de laquelle le filtre n'est plus calculé. Pour certains filtres - en particulier ceux qui impliquent des flous ou des décalages importants - la région de filtrage par défaut est trop petite, ce qui fait que les bords du contenu filtré sont coupés par une frontière stricte. Vous pouvez voir cet effet très clairement sur les côtés de ce cercle fortement flouté.
Il a toujours été possible d'ajuster la taille de la région du filtre, via l'onglet Paramètres généraux des filtres de la boîte de dialogue Éditeur de filtre. Mais les quatre champs que vous y trouverez sont moins qu'évidents pour quiconque n'a pas lu les détails internes des filtres SVG. Vous devrez également deviner - ou découvrir par essais successifs - les meilleures valeurs pour votre image particulière. Si vous définissez une zone de filtrage trop large, vous ralentirez le rendu de votre image. Si vous la réglez trop petite ou dans la mauvaise position, votre filtre sera coupé.
Avec la version 1.0, deviner les valeurs optimales de ces champs fait partie du passé. Lorsqu'un objet filtré est sélectionné, passez à l'outil Node (F2) et vous verrez apparaître des poignées en forme de diamant en haut à gauche et en bas à droite de votre objet, que vous pouvez faire glisser pour ajuster directement la région du filtre sur le canevas.
**Importing SVG files
Inkscape v1.0 brings some more options when importing one SVG file into another, whether via File > Import, or by just dragging and dropping an SVG file from your file manager onto the Inkscape canvas. By default, a dialog will be presented offering three different ways to import the image, plus a couple of settings that have an effect on only two of the three choices.
The first option will probably be the one most people use. It’s the same way that previous versions of Inkscape imported SVG images: by adding all the objects from the imported image as first-class, editable objects inside the existing document. Images imported in this way are essentially indistinguishable from any other elements drawn within the Inkscape document.
The second option embeds the SVG content as a base64 encoded string in an tag. If those words are gobbledegook to you, then you’re probably not a web developer. In layman’s terms, it just means that the SVG content is stored within the file, but as a single image that can be treated much like a bitmap version of the vector image. Indeed, Inkscape actually renders it as a bitmap version, so zooming in, or scaling the image too large, can make it look blocky. More on that shortly.
The third option links to the SVG file. Unlike the prior options, this means that the linked file can be updated outside of Inkscape, and the changes will be reflected in your Inkscape document. But it also means that moving the Inkscape file to another machine will also require the linked image to be sent, and the link potentially updated to reflect the new location of the file on disk. Inkscape also displays linked images as bitmap versions, so the same zoom and scale warning applies as previously.**
Importation de fichiers SVG
Inkscape v1.0 apporte quelques options supplémentaires lors de l'importation d'un fichier SVG dans un autre, que ce soit via Fichier > Importer, ou simplement en glissant et déposant un fichier SVG depuis votre gestionnaire de fichiers sur le canevas d'Inkscape. Par défaut, une boîte de dialogue sera présentée offrant trois façons différentes d'importer l'image, plus quelques paramètres qui n'ont d'effet que sur deux des trois choix.
La première option est probablement celle que la plupart des gens utilisent. C'est de la même manière que les versions précédentes d'Inkscape importaient des images SVG : en ajoutant tous les objets de l'image importée en tant qu'objets éditables de première classe dans le document existant. Les images importées de cette manière sont essentiellement indiscernables de tout autre élément dessiné dans le document Inkscape.
La deuxième option consiste à incorporer le contenu SVG sous la forme d'une chaîne codée en base64 dans une balise . Si ces mots sont du charabia pour vous, alors vous n'êtes probablement pas un développeur Web. En termes simples, cela signifie que le contenu SVG est stocké dans le fichier, mais sous la forme d'une image unique qui peut être traitée comme une version bitmap de l'image vectorielle. En fait, Inkscape rend l'image comme une version bitmap, ce qui fait qu'un zoom ou une mise à l'échelle trop importante de l'image peut lui donner l'apparence d'un bloc. Nous y reviendrons bientôt.
La troisième option établit un lien avec le fichier SVG. Contrairement aux options précédentes, cela signifie que le fichier lié peut être mis à jour en dehors d'Inkscape et que les changements seront reflétés dans votre document Inkscape. Mais cela signifie également que, si vous déplacez le fichier Inkscape vers une autre machine, l'image liée devra également être envoyée et le lien potentiellement mis à jour pour refléter le nouvel emplacement du fichier sur le disque. Inkscape affiche également les images liées comme des versions bitmap, de sorte que le même avertissement de zoom et d'échelle s'applique comme précédemment.
**Although Inkscape displays linked and embedded SVG images as bitmaps, it’s important to understand that the linked file, and the base64 encoded embedded content, are both still SVG documents in all their vector glory. For example, even the blockiest looking embedded SVG will look crisp and clean when the containing file is loaded into a web browser.
When linking or embedding an SVG file, you do have some limited control over the bitmap that Inkscape displays as a proxy. The “DPI for rendered SVG” field in the import dialog lets you set the quality of the rasterized content. Higher DPI values will capture finer details from the vector content, which may allow you to scale or zoom with less obvious loss of detail. The “Image Rendering Mode” pop-up lets you select the trade-off Inkscape uses between quality and speed when rasterizing. Most of the time leaving this as “None (auto)” will be good enough.
Because the bitmap representation is just an artefact of the way that Inkscape works, and doesn’t affect the underlying vector content, it’s even possible to change the DPI and render trade-off after the image has been imported or linked. Right-click on the image and select Object Properties, or use Object > Object Properties. In the dialog that opens, you can modify the DPI setting or change the rendering mode – with even more options available than in the original import dialog. This means that any blockiness that appears as a result of scaling an imported SVG image can be addressed after-the-fact, so there’s no need to worry too much about which values you use when importing.
The defaults for the import dialog are set in the Imported Images pane of the Edit > Preferences dialog (where you’ll also find the defaults for importing bitmap images). Should you check the “Don’t ask again” box in the dialog, then this is also where you need to come to re-enable it once you discover that the defaults don’t always suit your needs.**
Bien qu'Inkscape affiche les images SVG liées et intégrées comme des bitmaps, il est important de comprendre que le fichier lié, et le contenu intégré encodé en base64, sont tous deux des documents SVG dans toute leur gloire vectorielle. Par exemple, même le SVG intégré ressemblant le plus à un bloc aura l'air net et propre lorsque le fichier qui le contient est chargé dans un navigateur Web.
Lorsque vous liez ou intégrez un fichier SVG, vous avez un contrôle limité sur le bitmap qu'Inkscape affiche en tant que proxy. Le champ « DPI pour le rendu SVG » dans le dialogue d'importation vous permet de définir la qualité du contenu rastérisé. Des valeurs DPI plus élevées captureront des détails plus fins du contenu vectoriel, ce qui peut vous permettre de mettre à l'échelle ou de zoomer avec une perte de détails moins évidente. La fenêtre contextuelle « Mode de rendu d'image » vous permet de sélectionner le compromis qu'Inkscape utilise entre la qualité et la vitesse lors du tramage. La plupart du temps, le choix de « Aucun (défaut) » est suffisant.
Étant donné que la représentation bitmap n'est qu'un artefact de la façon dont Inkscape fonctionne, et qu'elle n'affecte pas le contenu vectoriel sous-jacent, il est même possible de modifier le DPI et le compromis de rendu après que l'image a été importée ou liée. Faites un clic droit sur l'image et sélectionnez Propriétés de l'objet, ou utilisez Objet > Propriétés de l'objet. Dans la boîte de dialogue qui s'ouvre, vous pouvez modifier le paramètre DPI ou changer le mode de rendu - avec encore plus d'options disponibles que dans la boîte de dialogue d'importation originale. Cela signifie que tout effet de bloc qui apparaît à la suite de la mise à l'échelle d'une image SVG importée peut être corrigé après coup, de sorte qu'il n'est pas nécessaire de se préoccuper des valeurs que vous utilisez lors de l'importation.
Les valeurs par défaut de la boîte de dialogue d'importation sont définies dans le volet Importation d'images de la boîte de dialogue Édition > Préférences (où vous trouverez également les valeurs par défaut pour l'importation d'images bitmap). Si vous avez coché la case « Ne plus demander » dans la boîte de dialogue, c'est également là que vous devez venir pour la réactiver si vous découvrez que les valeurs par défaut ne répondent pas toujours à vos besoins.
**Mesh Gradient polyfill
If you save an SVG image containing a Mesh Gradient (see part 59 of this series), Inkscape will now embed a JavaScript polyfill in the file. As I’ve remonstrated previously, browsers still don’t support mesh gradients in their SVG implementations. This polyfill goes some way towards addressing that shortcoming.
When the SVG file is loaded directly into the browser, or is included within a web page in a way that allows JavaScript to run (i.e. via an