If there's one word that can stir up controversy amongst experienced Inkscape users, it's “filters”. Attitudes range from “they're bitmaps, and therefore bad”, through “it's easier to add filters to your image in GIMP”, right up to “filters are great”. I'll go on record as putting myself in the last group, but I would definitely extend the statement to add “(if a little slow and clunky)” to the end of it. So what are filters, in Inkscape terms? And why are they so divisive? In short, filters are part of the core SVG specification that offer a way to perform bitmap operations on your vector objects. Filters consist of a number of “filter primitives” that can be linked together to create a “filter chain” that produces the desired effect. They apply at the point that your elements are being rendered to a bitmap for display, export or printing, and operate at the same resolution as the output device. So, although they are pixel-based, they can be just as crisp and scalable as the unfiltered vectors in your drawing. It does mean, however, that they are purely a display feature and have no effect on the underlying geometry of your image – so they're of no use to anyone trying to produce drawings for use on a vector output device such as a vinyl cutter or laser engraver.

S'il y a un mot qui peut soulever la controverse au sein des utilisateurs expérimentés d'Inkscape, c'est « filtres ». Les attitudes vont de “ce sont des bitmap, donc, c'est mauvais” en passant par « c'est plus facile d'ajouter des filtres à votre image dans GIMP » jusqu'à « les filtres sont super ! ». Je vais m'inscrire dans le dernier groupe, mais je voudrais prolonger l'affirmation par la finale (« mais un peu lent et maladroit »). Alors, que sont les filtres, dans le langage d'Inkscape ? Et pourquoi divisent-ils tant ?

Pour faire court, les filtres sont une partie du cœur des spécifications SVG, qui offrent une façon de réaliser des opérations bitmap sur des objets vectoriels. Les filtres consistent en un certain nombre de « primitives de filtrage » qui peuvent être liées les une aux autres pour créer une « chaîne de filtres » qui produit l'effet désiré. Ils sont appliqués de telle sorte que que vos éléments sont rendus en bitmap pour l'affichage, l'exportation et l'impression, et opèrent à la même résolution que l'appareil de sortie. Aussi, bien qu'ils soient basés sur des pixels, ils restent nets et flexibles comme les vecteurs non-filtrés de votre dessin. Ceci signifie, cependant, qu'ils ne sont qu'une fonctionnalité d'affichage et qu'ils n'ont aucun effet sur la géométrie sous-jacente de votre image - ainsi, ils sont d'aucune utilité à celui qui essaie de réaliser des dessins sur un périphérique de sortie vectorielle tel qu'un traceur de découpe sur vinyl ou un graveur laser.

Filters are also “live”. You can tweak and modify the parameters used in your filter throughout the life cycle of your drawing, whereas filters in a bitmap editor like The GIMP are usually fixed and permanent once they've been applied. This is both a blessing and a curse: SVG filters are incredibly flexible because you can change them as you go along; conversely they eat up a lot of processing power as they need to be re-calculated not only when you change their parameters, but potentially each time you pan or zoom. The performance penalty can be severe, especially when zooming far into your drawing, leading some users to avoid filters entirely, although the worst problems can usually be avoided by using a few simple techniques that I’ll describe in a future article. Finally, filters are rather unintuitive – and Inkscape's UI for editing them only makes this problem worse. The developers have included a great set of predefined filters, which was improved further in 0.91, but it's still useful to understand how to use the editor in order to tweak and extend them. So let's start by taking a look at the editor courtesy of the most common filter primitive: Gaussian Blur.

Les filtres sont aussi « vivants ». Vous pouvez ajuster et modifier les paramètres utilisés pour votre filtre tout au long du cycle de vie de votre dessin, alors que les filtres dans un éditeur bitmap comme The GIMP sont généralement figés et permanents une fois appliqués. C'est à la fois un bien et un mal : Les filtres SVG sont incroyablement flexibles car vous pouvez les modifier tout en progressant ; à l'inverse, ils consomment beaucoup de puissance machine car ils ont besoin d'être recalculés, non seulement quand vous changez les paramètres, mais, potentiellement, chaque fois que vous ajustez la fenêtre ou zoomez. la pénalité peut être une sévère perte de performance, spécialement quand vous faites un fort agrandissement de votre dessin, conduisant certains utilisateurs à bannir complètement les filtres, bien que les pires problèmes peuvent être habituellement évités en utilisant quelques techniques simples que je décrirai dans un prochain article.

Enfin, les filtres sont plutôt non-intuitifs - et l'interface utilisateur d'Inkscape pour les modifier ne fait qu'amplifier ce problème. les développeurs ont inclus un jeu fourni de filtres prédéfinis, qui a été amélioré dans la 0.91, mais c'est encore utile de comprendre comment utiliser l'éditeur pour les ajuster et les étendre. Aussi, commençons par jeter un œil à l'éditeur accueillant de la plus commune des primitives de filtrage : le flou gaussien.

Gaussian Blur (or just “Blur” from now on) is the most commonly used primitive – principally because it’s exposed directly in the Fill and Stroke dialog. Many people happily use the Blur slider in that dialog without ever going anywhere near the full Filter Editor, but it also provides a convenient mechanism for creating a “stub” filter chain that you can develop further. Of course you’ll need an object (or group) to apply your filter to, so begin by creating a text object, give it a nice bright fill color, then add a little blur using the slider in the Fill and Stroke dialog. Now open the Filter Editor using the Filters > Filter Editor menu entry. If it opens in a pane within the main Inkscape window, I suggest dragging it out as a separate floating dialog. This will let you resize it to give you more space to work with – filter chains can quickly become long and some of the primitives have a lot of parameters to tweak.

Le flou gaussien (ou simplement « flou » à partir d'ici) est la primitive communément la plus utilisée - principalement parce qu'elle est visible directement dans la boîte de dialogue Remplissage et contour. Beaucoup de gens utilisent avec plaisir le réglette du flou dans ce dialogue sans jamais aller voir l'éditeur de filtre complet, mais il fournit un mécanisme pratique pour créer une chaîne de filtrage « souche » qui peut être développée plus avant. Bien sûr, vous avez besoin d'un objet (ou un groupe) sur lequel appliquer le filtre ; commencez donc par créer un objet texte, remplissez-le d'une belle couleur brillante, puis ajoutez un peu de flou en utilisant la règle de flou du dialogue Remplissage et contour.

Maintenant, ouvrez l'éditeur de filtre en utilisant l'entrée de menu Filtres > Éditeur de filtres. Si il s'ouvre dans un panneau dans la fenêtre principale d'Inkscape, je vous suggère de le tirer pour qu'il devienne flottant. Cela vous permettra de le retailler pour que vous disposiez de plus d'espace pour l'utiliser - les chaînes de filtrage peuvent devenir rapidement longue et quelques-unes des primitives ont beaucoup de paramètres à ajuster.

The left of the editor is given over to a list of the filters in your document. Assuming you started with a blank drawing, you should see only a single entry here, given an automatically generated name along the lines of “filter1234”. That entry will have a mark in the checkbox, indicating that it’s the filter that’s in effect on the currently selected object. If you want to apply the same filter to another shape, just select that object in the canvas window, then check this box in the editor; you can use a single filter chain on multiple elements – which is useful when you want multiple text objects to share a single drop shadow, for example. Finally, in this section you can create a new filter from scratch using the “New” button at the bottom, or right-click on a filter entry to duplicate or remove it completely. You can also rename it from that context menu, but it’s usually easier to just double-click on the filter’s name and enter a new one. Giving slightly descriptive names to your filters makes it easier to keep track of the important ones as your drawing develops. For now, why not rename “filter1234” to “Blur”?

A gauche de l'éditeur, vous disposez d'une liste des filtres de votre document. Présumant que vous avez commencé un nouveau dessin, vous ne devriez voir ici qu'une seule entrée, avec un nom attribué automatiquement à la volée « filter1234 ». Cette entrée est cochée, indiquant que c'est l'effet qui est en cours sur l'objet sélectionné. Si vous voulez appliquer le même filtre à une autre forme, sélectionnez simplement cet objet sur le canevas, puis cochez la case dans l'éditeur ; vous pouvez utiliser une simple chaîne de filtres sur de multiple éléments - ce qui est utile si vous voulez que plusieurs objets textes partagent la même ombre portée, par exemple. Enfin, dans cette section, vous pouvez créer un nouveau filtre en utilisant le bouton du bas « Nouveau », ou, par un clic droit sur une entrée de filtre, dupliquez-la ou supprimez-la complètement. Vous pouvez aussi la renommer à partir du menu contextuel, mais c'est souvent plus facile de double-cliquer sur le nom du filtre pour saisir le nouveau. En donnant des noms assez significatifs à vos filtres, vous vous facilitez le suivi des plus importants pendant que votre dessin se développe. Et là, maintenant, pourquoi ne pas renommer « filter1234 » en « Flou » ?

With your filter selected, you should see a single entry in the list on the right of the dialog: Gaussian Blur. This is your filter primitive, and it’s this list that’s used to stack and combine primitives into chains. For now, click on the Gaussian Blur entry to select it, and then look to the bottom of the dialog where you’ll find its parameters. Gaussian Blur takes two parameters, but by default Inkscape locks them to the same value via the “Link” button to the right. By toggling that to un-link the parameters, you can provide different values for horizontal and vertical blur, providing the opportunity for “motion blur” effects that make it look like your object has moved in one direction. Note that the scales are labelled in units of “Standard Deviation”, whereas the slider in the Fill and Stroke dialog shows a percentage value. The former is used in the SVG spec, whereas the latter is probably more understandable for users who just want to add a little blur without going near the filter editor. Suffice to say that the two fields are just different representations of the same underlying value, so the fact that they usually hold slightly different numbers isn’t really a problem.

Avec le filtre sélectionné, vous devriez voir une entrée unique dans la liste sur la droite du dialogue : Flou gaussien. C'est votre primitive de filtrage et c'est cette liste qui est utilisée pour empiler et combiner les primitives dans des chaînes. Pour l'instant, cliquez sur l'entrée Flou gaussien pour la sélectionner et, ensuite, regarder vers le bas du dialogue où vous trouverez ses paramètres. Le flou gaussien a deux paramètres, mais, par défaut, Inkscape les verrouille à la même valeur par le biais du bouton « Lier » sur la droite. En le pressant pour délier les paramètres, vous pouvez appliquer des valeurs différentes pour les flous horizontal et vertical, fournissant l'opportunité d'effets de « flou de mouvement » qui donne l'impression que votre objet se déplace dans une direction. Notez que les échelles sont labellisées en unités d'« écart type », alors que la réglette dans la boîte de dialogue Remplissage et contour présente une valeur en pourcentage. La première est utilisée dans les spécifications SVG, alors que la dernière est probablement plus compréhensible pour des utilisateurs qui veulent juste ajouter un peu de flou sans aller dans l'éditeur de filtres.Il va sans dire que les deux champs sont simplement des représentations différentes de la même valeur sous-jacente, et donc le fait qu'elles affichent habituellement des valeurs légèrement différentes n'est pas réellement un problème.

If you're still on 0.48, and drag the sliders to the right, you may notice that the blur on the text starts to get cut off at around the 20% mark, and by the time you reach 50% it’s become a ghostly rectangle. You’ve just encountered one of the most common problems reported by users who take their first steps into filters, but don’t worry, it’s an easy one to fix. In principle, some filters – including Gaussian Blur – could continue off into infinity: mathematically speaking, a blur represents an infinite series of calculations, although the results quickly drop off to the point that the calculated values have no visible effect on the drawing. Obviously performing an infinite series of calculations isn’t possible for even a high-end machine, so the SVG spec allows for a window or cutoff to be defined, beyond which the rendering engine shouldn’t bother performing any more calculations. By default this cutoff is set to allow a 10% margin all around your filtered object, which is fine for a small blur, but clearly not enough as the blur value increases.

The cutoff is adjusted via the “Filter General Settings” tab, and, as the name suggests, it affects the whole filter, not just the currently selected primitive. Within this tab you’ll find two sets of parameters, labelled “Coordinates” and “Dimensions”. The former sets the position of the top left of the filter window, relative to the width of the object. The default values of -0.10 mean that the cut-off rectangle starts 10% up and to the left of the object’s bounding box. The latter pair of values sets the width and height of the filter window, so the default value of 1.20 results in a cut-off that’s 20% larger than the bounding box. Because the Coordinates fields have offset the window by 10% to the top left, the result is a cut-off that symmetrically surrounds the original object with a 10% margin. To use a large Gaussian Blur value, you might want to increase this window to give you a 50% margin all round: that would entail setting the Coordinates to -0.50 and the Dimensions to 2.0. Most of the time you don’t need to adjust these values, but when you start to see your filtered objects being unexpectedly cut off at the edges, the Filter General Settings are almost always the cause.

In the copy of 0.91 on my machine, this problem seems to have been addressed by automatically modifying the settings to sufficiently encompass the blur. However I can find no mention of this change in the 0.91 release notes, so it's not clear if this only applies to blurs or simple filter chains, or if the algorithm being used is robust enough to handle complex chains as well. Therefore I recommend familiarising yourself with this tab, even on 0.91 – though with luck you'll never have to use it. Before moving on, it’s worth having a quick recap to make sure you’re clear about the dialog so far. On the left is the list of filter chains, each with a checkbox to apply it to the currently selected object. From here you can create new chains (though just adding some blur to your object has a similar effect), and manage existing ones. On the right is the list of filter primitives that constitute your filter chain – though so far we’ve only dealt with a rather short chain consisting of a single primitive. At the bottom of the dialog is a tab for the currently selected primitive’s parameters, and another for setting the filter cut-off window position and size.

Now, let’s move back to the list of primitives that we so quickly glossed over previously. Looking more closely at the Gaussian Blur entry you’ll notice that the “Connections” section contains a barely visible triangle, from which is emanating a line that connects to a column on the right with a “Source Graphic” label running vertically down it. The triangle represents an input into the filter primitive, and the column is one of several possible sources for that input. Unfortunately, of the six inputs shown in the UI, two of them require special treatment (and will be covered in a future article), and another two don’t work at all! Of the two that do work, the “Source Graphic” column is exactly what it sounds like – it’s used to ‘inject’ a bitmap representation of the selected object into the filter chain. The “Source Alpha” column is used to inject a bitmap representation of the object’s alpha channel with solid black pixels representing opaque parts of the object, transparent black pixels for the transparent parts, and translucent black pixels for those parts that are somewhere in-between. In other words, it injects a blackened silhouette of the object.

As well as having the triangular input nodes, each primitive also has a single output. There’s no obvious output node, instead it’s the bottom edge of the primitive that acts as the output in the Inkscape UI. It’s possible to connect the bottom of one primitive to the input triangles of other primitives, thus building a chain, but the output from the last primitive is always used as the output from the chain as a whole. Let’s build on our Gaussian Blur to create a simple drop shadow filter. During this process, you’ll learn how to link primitives together to form a chain, and hopefully begin to understand a little more of the power of filters. Start by renaming your existing filter to “Drop Shadow”, re-link the parameters if you need to, and set the blur to a fairly small number – enough that you can clearly see it applied to your object, but not so much that the it just turns into a fuzzy cloud. A value of 2-3 should do the trick.

Our shadow is going to be dark, made of translucent black pixels, so the first thing to do is to generate a silhouetted version of our object to pass as an input to the Gaussian Blur primitive. But, of course, we already know of a source of silhouettes – the Source Alpha column. In a slightly back-to-front operation, we can link this source to the Blur’s input by clicking and holding on the triangle, then dragging the mouse to the Source Alpha column before releasing (yes, you drag from input to source, rather than the other way around). If all went smoothly, the line that previously ran to the Source Graphic column has been replaced by one to the Source Alpha instead. Take a look at your text object and you should find it’s turned into a blurry black version of the original. If we were to display the original over the top of the blurred alpha version, you would just see a halo of darkness around your text. To make it work as a drop shadow we need to offset our blurred image from its original position using the imaginatively titled “Offset” primitive. Select it from the pop-up list just below the filter chain, then click the adjacent “Add Effect” button to add it to your chain. It should automatically be connected to the output of the Blur, as indicated by a small line running from the triangular input of the Offset to the bottom of the Gaussian Blur. Adjust the new primitive’s Delta X and Delta Y parameters to shift your shadow down and to the right – a value of 6.0 in each is a good start.

The final step in creating our filter is to add the original graphic back on top of the blur using the Merge primitive. Once again you should select it from the pop-up list and add it using the Add Effect button, but this time it won’t be automatically connected to the rest of the chain. The Merge filter combines multiple input images by stacking them on top of each other, honouring any transparency they may have in the process. The first input goes at the bottom of the stack, the last input at the top, so we need to add the offset blur first and the original source graphic second. Begin by clicking in the Merge filter’s sole input triangle and then, holding the mouse button down, drag to the triangle in the row above (the Offset filter). Release the button and you should see a connection made, running from the base of the Offset to the input of the Merge. You’ll also notice that the Merge filter has gained a second input triangle. Click and drag from this second triangle to the Source Graphic column. Check the canvas, and you should now have a glorious drop shadow. See, filters aren’t so tricky… right? Now tweak the Gaussian Blur and Offset parameters to change the softness of your shadow or its relative position. Then edit the text itself. Each change you make takes place live, and you can re-open the filter editor at any time to make further changes. Try creating a “hard” drop shadow by merging an offset Source Alpha with the Source Graphic, but without using the Gaussian Blur. Or try a bit of motion blur by un-linking the horizontal and vertical sliders; adding some horizontal blur and a horizontal offset; then merging with the Source Graphic again.

Make sure you understand what we’ve covered in this instalment, because, next time, we’ll build on this simple drop shadow to introduce some more filter primitives that will expand your repertoire further, giving you the capability to achieve effects that just aren’t possible without a little smattering of bitmap magic on your vector objects.