issue218:inkscape
Différences
Ci-dessous, les différences entre deux révisions de la page.
Les deux révisions précédentesRévision précédente | |||
issue218:inkscape [2025/06/30 07:23] – d52fr | issue218:inkscape [2025/07/01 08:09] (Version actuelle) – d52fr | ||
---|---|---|---|
Ligne 4: | Ligne 4: | ||
Continuing with the changes in version 1.4, this month I’m going to look at the Filter Gallery: a new dialog that aims to make it easier for you to preview and select from the many filters that Inkscape ships with. Before I get into that, however, it’s been a while since I did an explanation of how filters actually work in the SVG world, so let’s begin with a quick introduction for anyone new to Inkscape or to SVG, the native format for Inkscape files.** | Continuing with the changes in version 1.4, this month I’m going to look at the Filter Gallery: a new dialog that aims to make it easier for you to preview and select from the many filters that Inkscape ships with. Before I get into that, however, it’s been a while since I did an explanation of how filters actually work in the SVG world, so let’s begin with a quick introduction for anyone new to Inkscape or to SVG, the native format for Inkscape files.** | ||
+ | |||
+ | Après quelques faux départs, la dernière version d' | ||
+ | |||
+ | Cette version corrige de nombreux bugs ; il est donc conseillé de la mettre à jour si vous utilisez la 1.4. Elle comporte cependant très peu de nouvelles fonctionnalités, | ||
+ | |||
+ | Poursuivant avec les modifications de la version 1.4, | ||
+ | |||
**SVG is an open format for defining vector graphics files. Compared with raster (also known as bitmap) files, vector files are more about defining the way in which an image is drawn, rather than the final result. A raster image consists of lots of individual dots – pixels – whereas a vector file is more of a mathematical description of the parameters needed to draw shapes. A circle in a raster image is actually an approximation made up of a large number of dots; a circle in an SVG image is defined by its center coordinates and radius. Raster files lose quality as they are scaled up or down from their ‘native’ size, whereas vector images – in theory at least – are infinitely resizeable without any loss of quality or resolution. | **SVG is an open format for defining vector graphics files. Compared with raster (also known as bitmap) files, vector files are more about defining the way in which an image is drawn, rather than the final result. A raster image consists of lots of individual dots – pixels – whereas a vector file is more of a mathematical description of the parameters needed to draw shapes. A circle in a raster image is actually an approximation made up of a large number of dots; a circle in an SVG image is defined by its center coordinates and radius. Raster files lose quality as they are scaled up or down from their ‘native’ size, whereas vector images – in theory at least – are infinitely resizeable without any loss of quality or resolution. | ||
Ligne 10: | Ligne 17: | ||
In truth this is often more of a theoretical problem than a practical one. If your original raster images are high enough resolution then they can usually be scaled down quite a bit without the quality suffering, subjectively speaking. Scaling up is more of an issue, but it depends on how your image is going to be used. A blocky raster image might be a problem in a magazine, but that same level of blockiness could be unnoticeable on a billboard poster.** | In truth this is often more of a theoretical problem than a practical one. If your original raster images are high enough resolution then they can usually be scaled down quite a bit without the quality suffering, subjectively speaking. Scaling up is more of an issue, but it depends on how your image is going to be used. A blocky raster image might be a problem in a magazine, but that same level of blockiness could be unnoticeable on a billboard poster.** | ||
+ | |||
+ | SVG est un format ouvert permettant de définir des fichiers graphiques vectoriels. Comparés aux fichiers raster (aussi appelés bitmap), les fichiers vectoriels définissent davantage la manière dont une image est dessinée que le résultat final. Une image raster est composée de nombreux points individuels – les pixels – tandis qu'un fichier vectoriel est davantage une description mathématique des paramètres nécessaires au dessin de formes. Un cercle dans une image raster est en fait une approximation composée d'un grand nombre de points ; un cercle dans une image SVG est défini par ses coordonnées centrales et son rayon. Les fichiers raster perdent en qualité lorsqu' | ||
+ | |||
+ | Cela ne signifie pas que les fichiers SVG sont toujours des données purement vectorielles. Il est possible de lier des fichiers raster externes pour les intégrer à votre image, ou d' | ||
+ | |||
+ | En réalité, il s'agit souvent d'un problème plus théorique que pratique. Si vos images matricielles d' | ||
+ | |||
**But, as a general rule, vectors are scalable, rasters are not, and SVG is primarily a vector format. So it might come as a surprise to you if I say that filters are raster operations, despite being one of the core components of the SVG format. | **But, as a general rule, vectors are scalable, rasters are not, and SVG is primarily a vector format. So it might come as a surprise to you if I say that filters are raster operations, despite being one of the core components of the SVG format. | ||
Ligne 16: | Ligne 30: | ||
We’ve got some vector data in our SVG file. We can send that directly to a plotter or cutter (possibly after converting to a different file format) to create images that are, in theory, infinitely scalable. Whether you have a tiny desktop pen plotter, or a large industrial laser cutter, the same basic vector data can be used. The output device will convert the vector geometry into the correct signals to drive those x and y motors.** | We’ve got some vector data in our SVG file. We can send that directly to a plotter or cutter (possibly after converting to a different file format) to create images that are, in theory, infinitely scalable. Whether you have a tiny desktop pen plotter, or a large industrial laser cutter, the same basic vector data can be used. The output device will convert the vector geometry into the correct signals to drive those x and y motors.** | ||
+ | |||
+ | Mais, en règle générale, les vecteurs sont évolutifs, contrairement aux rasters, et le format SVG est avant tout un format vectoriel. Vous serez donc peut-être surpris d' | ||
+ | |||
+ | À ce stade, il est important de considérer le périphérique de sortie utilisé pour présenter votre image Inkscape. Comme les images, les périphériques de sortie se divisent en deux catégories : | ||
+ | |||
+ | Notre fichier SVG contient des données vectorielles. Nous pouvons les envoyer directement à un traceur ou à une découpeuse (éventuellement après conversion dans un autre format de fichier) pour créer des images théoriquement infiniment dimensionnables. Que vous disposiez d'un petit traceur à stylet de bureau ou d'une grande machine de découpe laser industrielle, | ||
+ | |||
**But we can’t send that vector data directly to a screen or printer. Instead we have to turn it into a raster image that the device knows how to handle, through a process called rasterisation. Without going into detail, this basically entails doing the mathematics to work out which part of the vector file should be visible for each pixel of the output. It turns your smooth vectors into a blocky raster – albeit at a resolution high enough that it shouldn’t look particularly blocky on your screen or printed page, unless you inspect it with a magnifying lens. | **But we can’t send that vector data directly to a screen or printer. Instead we have to turn it into a raster image that the device knows how to handle, through a process called rasterisation. Without going into detail, this basically entails doing the mathematics to work out which part of the vector file should be visible for each pixel of the output. It turns your smooth vectors into a blocky raster – albeit at a resolution high enough that it shouldn’t look particularly blocky on your screen or printed page, unless you inspect it with a magnifying lens. | ||
Ligne 22: | Ligne 43: | ||
Consider these two images. They may look identical, but the one on the left was created by duplicating one circle and moving it, whereas the one on the right is the result of using a filter.** | Consider these two images. They may look identical, but the one on the left was created by duplicating one circle and moving it, whereas the one on the right is the result of using a filter.** | ||
+ | |||
+ | Mais nous ne pouvons pas envoyer ces données vectorielles directement à un écran ou une imprimante. Il faut les transformer en une image matricielle que l' | ||
+ | |||
+ | Les filtres SVG s' | ||
+ | |||
+ | Examinons ces deux images. Elles peuvent sembler identiques, mais celle de gauche a été créée en dupliquant un cercle et en le déplaçant, | ||
+ | |||
**Send these two images to a screen (such as when editing in Inkscape, or loading the SVG image in a web browser), or a printer, and you’ll get four circles in total. Send it to a pen plotter and you’ll get only three – the fourth one isn’t really a vector object, so the plotter won’t be able to do anything with it. | **Send these two images to a screen (such as when editing in Inkscape, or loading the SVG image in a web browser), or a printer, and you’ll get four circles in total. Send it to a pen plotter and you’ll get only three – the fourth one isn’t really a vector object, so the plotter won’t be able to do anything with it. | ||
Ligne 30: | Ligne 58: | ||
From this, I hope you’ve understood that filters are a purely visual thing – they don’t alter the underlying geometry of your objects in any way. All they do is apply a series of operations to determine what color and opacity each rendered output pixel should be, as part of the rasterisation process. Which precise operations are performed will vary from filter to filter, with each filter (or “filter chain”) typically being made up of several “filter elements” which are connected to each other in a network. Each filter element does one job: it could be generating a color or fractal noise pattern as a source of image data for the filter chain; it might blur its input before passing it on; it might remap the colors of the input image. There are many more of these primitives which can be combined to create an incredible variety of filter chains for an infinite range of effects.** | From this, I hope you’ve understood that filters are a purely visual thing – they don’t alter the underlying geometry of your objects in any way. All they do is apply a series of operations to determine what color and opacity each rendered output pixel should be, as part of the rasterisation process. Which precise operations are performed will vary from filter to filter, with each filter (or “filter chain”) typically being made up of several “filter elements” which are connected to each other in a network. Each filter element does one job: it could be generating a color or fractal noise pattern as a source of image data for the filter chain; it might blur its input before passing it on; it might remap the colors of the input image. There are many more of these primitives which can be combined to create an incredible variety of filter chains for an infinite range of effects.** | ||
+ | |||
+ | Envoyez ces deux images sur un écran (par exemple, lors de l' | ||
+ | |||
+ | Donc, si l'un des cercles de droite est en fait une image matricielle, | ||
+ | |||
+ | Le rendu est toujours assez fluide. C'est parce que le filtre est appliqué lors de l'une des toutes dernières étapes du processus de rastérisation, | ||
+ | |||
+ | J' | ||
+ | |||
**In early versions of Inkscape, there were no predefined filters included. There was an editor with which you could make your own – but that’s a skill that most of us simply don’t have. Filter chains can become very complex very quickly. For example, here’s one in which I’ve applied the Textures > Wax Print filter to one of those circles from earlier in the article. The result is on the left, with the corresponding filter chain on the right. This one is relatively simple, with only eight filter elements connected in a mostly linear way, but it’s still not something that most Inkscape users could create for themselves. | **In early versions of Inkscape, there were no predefined filters included. There was an editor with which you could make your own – but that’s a skill that most of us simply don’t have. Filter chains can become very complex very quickly. For example, here’s one in which I’ve applied the Textures > Wax Print filter to one of those circles from earlier in the article. The result is on the left, with the corresponding filter chain on the right. This one is relatively simple, with only eight filter elements connected in a mostly linear way, but it’s still not something that most Inkscape users could create for themselves. | ||
Ligne 36: | Ligne 73: | ||
With 1.4, however, we finally have a more graphical way to select filters. The menu entries still exist, but at the very top of the Filters menu is now a ‘Filter Gallery…’ option. Selecting this opens a new dialog.** | With 1.4, however, we finally have a more graphical way to select filters. The menu entries still exist, but at the very top of the Filters menu is now a ‘Filter Gallery…’ option. Selecting this opens a new dialog.** | ||
+ | |||
+ | Dans les premières versions d' | ||
+ | |||
+ | Avec la version 0.47, le programme proposait une large sélection de filtres prédéfinis, | ||
+ | |||
+ | Avec la version 1.4, nous disposons enfin d'une méthode plus graphique pour sélectionner les filtres. Les entrées de menu existent toujours, mais tout en haut du menu Filtres se trouve désormais une option « Galerie de filtres… ». Cette option ouvre une nouvelle boîte de dialogue. | ||
+ | |||
**The obvious good news here is that we now have thumbnails that give some idea of the effect each filter might have. All the thumbnails use the same flower-like shape as their base, with no option to change it – a limitation that I’ll come back to shortly. You can alter the thumbnail size using the slider hidden in the Settings pop-up (the ‘cog’ button) – though I have to wonder whether there’s a need for a separate pop-up with only a single entry in it. Surely the slider could have been squeezed into the dialog directly. | **The obvious good news here is that we now have thumbnails that give some idea of the effect each filter might have. All the thumbnails use the same flower-like shape as their base, with no option to change it – a limitation that I’ll come back to shortly. You can alter the thumbnail size using the slider hidden in the Settings pop-up (the ‘cog’ button) – though I have to wonder whether there’s a need for a separate pop-up with only a single entry in it. Surely the slider could have been squeezed into the dialog directly. | ||
Ligne 42: | Ligne 86: | ||
Completing the top of the dialog is a disappointing search box. It’s disappointing for two reasons: firstly it searches only the filters for the currently selected category, whereas searching across all filters would make more sense to me; secondly it searches only in the filter name and category, not in the well-worded descriptions that accompany each filter, making it harder to find a filter unless you know its specific name.** | Completing the top of the dialog is a disappointing search box. It’s disappointing for two reasons: firstly it searches only the filters for the currently selected category, whereas searching across all filters would make more sense to me; secondly it searches only in the filter name and category, not in the well-worded descriptions that accompany each filter, making it harder to find a filter unless you know its specific name.** | ||
+ | |||
+ | La bonne nouvelle, c'est que nous disposons désormais de vignettes qui donnent une idée de l' | ||
+ | |||
+ | À gauche se trouve la liste des catégories de filtres, correspondant à celles du menu Filtre. Cette liste comporte également une entrée « Tous les filtres » en haut, si vous souhaitez afficher toutes les vignettes simultanément. Le bouton en haut à gauche permet d' | ||
+ | |||
+ | En haut de la boîte de dialogue, on trouve un champ de recherche décevant. C'est décevant pour deux raisons : premièrement, | ||
+ | |||
**Once you’ve found the filter you want to use, click on the thumbnail to select it. Despite the wording at the top of the dialog (“Select filter to apply”), the act of selecting doesn’t actually apply it. For that you have to click on the “Apply” button, oddly positioned at the bottom-center of the dialog, and your selected filter will be applied. Possibly. | **Once you’ve found the filter you want to use, click on the thumbnail to select it. Despite the wording at the top of the dialog (“Select filter to apply”), the act of selecting doesn’t actually apply it. For that you have to click on the “Apply” button, oddly positioned at the bottom-center of the dialog, and your selected filter will be applied. Possibly. | ||
Ligne 48: | Ligne 99: | ||
Aside from these UI niggles, there’s one big problem with this dialog: the shape used for the thumbnails. It’s not that there’s anything wrong with it, as such – but no single shape can possibly be representative of how a filter will work in all cases. Many filters work best on bold, solid objects – use them on thin filigree lines and they’ll disappear to nothingness. Others might be the opposite, with fine details that work best with thin shapes or sharp angles, rather than the soft roundness of the flower shape in the thumbnails. I’d love to see that settings pop-up extended to allow a choice of preview objects: perhaps some basic primitives such as a triangle, square, star and circle – with the option to have them filled or just use a stroke. And, most of all, the ability to preview using a text sample, in the font of my choice, would make using filters with text a lot more practical.** | Aside from these UI niggles, there’s one big problem with this dialog: the shape used for the thumbnails. It’s not that there’s anything wrong with it, as such – but no single shape can possibly be representative of how a filter will work in all cases. Many filters work best on bold, solid objects – use them on thin filigree lines and they’ll disappear to nothingness. Others might be the opposite, with fine details that work best with thin shapes or sharp angles, rather than the soft roundness of the flower shape in the thumbnails. I’d love to see that settings pop-up extended to allow a choice of preview objects: perhaps some basic primitives such as a triangle, square, star and circle – with the option to have them filled or just use a stroke. And, most of all, the ability to preview using a text sample, in the font of my choice, would make using filters with text a lot more practical.** | ||
+ | |||
+ | Une fois le filtre trouvé, cliquez sur sa vignette pour le sélectionner. Malgré l' | ||
+ | |||
+ | Voyez-vous, il existe deux types de filtres dans Inkscape : ceux qui s' | ||
+ | |||
+ | Outre ces petits soucis d' | ||
+ | |||
**This may seem like nit-picking, | **This may seem like nit-picking, | ||
Ligne 56: | Ligne 114: | ||
Similarly, the commonly used feTurbulence primitive generates an array of random(ish) data, but does so with a “size” parameter that defines the resolution of the noise it creates. Here’s the output of that filter applied to two rectangles, with the only difference between them being the value of the size parameter: | Similarly, the commonly used feTurbulence primitive generates an array of random(ish) data, but does so with a “size” parameter that defines the resolution of the noise it creates. Here’s the output of that filter applied to two rectangles, with the only difference between them being the value of the size parameter: | ||
+ | |||
+ | Cela peut paraître tatillon, mais vous constaterez rapidement que les vignettes peuvent être très trompeuses. Prenons l' | ||
+ | |||
+ | Le résultat du filtre du haut fait moins « Huile grasse » que « Tache de graisse ». Le second ne produit pas le trait noir fin que j' | ||
+ | |||
+ | Ce n'est pas un problème de la nouvelle boîte de dialogue, mais plutôt avec les filtres SVG en général. C'est là que je reviens à la distinction entre vecteur et raster. Les filtres peuvent eux-mêmes contenir des données raster, et c'est souvent le cas. Certaines primitives de filtre nécessitent une image raster pour fonctionner. Par exemple, l' | ||
+ | |||
+ | De même, la primitive feTurbulence, | ||
+ | |||
**This size parameter remains constant in the filter, whether it’s applied to a large object or a small one – or to a small one that’s then resized to make it larger (or vice versa). There’s no way to link the size parameter to the final dimensions of the object it’s being applied to in order to make it change when the object’s size is altered. That’s just the way SVG filters work, but it does mean that they can be extremely sensitive to the size of the object you’re applying them to. Here’s that “Fat Oil” filter again, this time applied to four filled circles. Clearly it works as expected for larger objects, but not so well for smaller ones. | **This size parameter remains constant in the filter, whether it’s applied to a large object or a small one – or to a small one that’s then resized to make it larger (or vice versa). There’s no way to link the size parameter to the final dimensions of the object it’s being applied to in order to make it change when the object’s size is altered. That’s just the way SVG filters work, but it does mean that they can be extremely sensitive to the size of the object you’re applying them to. Here’s that “Fat Oil” filter again, this time applied to four filled circles. Clearly it works as expected for larger objects, but not so well for smaller ones. | ||
For this reason, while I applaud the addition of this dialog, please don’t get too excited by the possibilities the thumbnails suggest. It’s not until a filter is applied to your objects in your drawing that you can really see whether or not you’ll get the effect you expected. Perhaps, one day, we’ll get live on-canvas previews of all the filters so we can more easily select the right one for each design. Until then, the Filter Gallery is perhaps most useful as a way to definitively rule out some filters, rather than as a means to choose a specific one. Even when using this dialog, I still find myself following the familiar approach of applying a filter, then undoing, then applying another, and so on. The difference now is that it’s easier to skip the ones that are more obviously wrong.** | For this reason, while I applaud the addition of this dialog, please don’t get too excited by the possibilities the thumbnails suggest. It’s not until a filter is applied to your objects in your drawing that you can really see whether or not you’ll get the effect you expected. Perhaps, one day, we’ll get live on-canvas previews of all the filters so we can more easily select the right one for each design. Until then, the Filter Gallery is perhaps most useful as a way to definitively rule out some filters, rather than as a means to choose a specific one. Even when using this dialog, I still find myself following the familiar approach of applying a filter, then undoing, then applying another, and so on. The difference now is that it’s easier to skip the ones that are more obviously wrong.** | ||
+ | |||
+ | Ce paramètre de taille reste constant dans le filtre, qu'il soit appliqué à un objet grand ou petit, ou à un petit objet redimensionné pour l' | ||
+ | |||
+ | C'est pourquoi, même si j' | ||
issue218/inkscape.1751261020.txt.gz · Dernière modification : 2025/06/30 07:23 de d52fr