Ceci est une ancienne révision du document !
First, an apology. Last month I suggested you could get color from a black shadow by using the Fixed Offset column of the Color Matrix filter, and demonstrated using the Source Alpha input. Unfortunately a change was introduced into Inkscape 0.91 which prevents fixed offsets of the color components working on a Source Alpha input (https://bugs.launchpad.net/inkscape/+bug/897236). It does work in version 0.48, as well as in Firefox and other SVG renderers. Apologies to anyone who wasted their time trying to follow my instructions on 0.91, and thanks to Moini in the Inkscape Forum for bringing this issue to my attention. Now, on with the show… Another type of drop shadow effect that you'll see from time to time is the “stacked shadow”. This is created by stacking several hard-edged copies of your original object on top of each other, with each of them having a different fill color. The easy way to create this effect is just to duplicate your original objects, move them a little, change their fill color, and re-stack them into the correct order. With three objects, the middle one having a white fill and no stroke, it was a matter of moments to produce this:
D'abord, milles excuses. Le mois dernier, je vous ai suggéré vous pourriez colorer une ombre noire en utilisant la colonne Décalage fixe du filtre Matrice de couleurs, et je l'ai montré en utilisant l'entrée Opacité de la source. Malheureusement, une modification a été introduite dans la version 0.91 d'Inkscape qui empêche les décalages fixes des composantes de couleur à partir de l'opacité de la source (https://bugs.launchpad.net/inkscape/+bug/897236). Ça marche dans la version 0.48, comme dans Firefox et les autres moteurs de rendu SVG. Mes excuses à tous ceux qui ont perdu leur temps en essayant de suivre mes instructions avec la 0.91, et merci à Moini sur le forum Inkscape d'avoir porter ce problème à mon attention. Et maintenant, poursuivons…
Un autre type d'effet d'ombre portée que vous verrez de temps en temps est « l'ombre empilée ». Elle est créée en empilant l'une sur l'autre plusieurs copies à bords nets de votre objet original, chacune d'une couleur de remplissage différente.
La manière facile de créer cet effet est de simplement dupliquer vos objets originaux, de les déplacer un petit peu, de changer leur couleur de remplissage et de les rempiler dans le bon ordre. Avec trois objets, celui du milieu n'ayant ni remplissage, ni trait, il suffit de quelques instants pour produire ceci :
Not a bad start, but what happens when you need to change the text? You would have to alter it for all three objects which triples your chances of making a mistake. Better to use unset fills with clones (see part 30), which can get you to the same result but with only the parent object to edit in order for your changes to propagate through the whole stack. Even with clones, however, you're still working with three objects. Grouping them lets you move or transform them all as one, but you then have the extra burden of having to enter the group and track down the original object in order to change the text. As you might imagine, filters offer a solution to all these problems. With the few filter primitives you've learnt in the previous two instalments, you already know enough to create a stacked shadow effect using the fill color at the top, a white copy of the source image below that, and a black copy right at the bottom. It's really just the same as a simple hard-edged drop shadow (from part 48) with a re-colored drop shadow (part 49) sandwiched in the middle. Let's look at it in graph form first, starting with a basic hard-edged black drop shadow:
Ce n'est pas un mauvais début, mais que se passe-t-il si le texte est modifié ? Vous devrez le modifier dans les trois objets en triplant vos chances de faire une erreur. Plutôt que d'utiliser des remplissages indéfinis avec des clones (voir partie 30), qui vous permettrait d'obtenir le même résultat mais avec un seul objet parent à modifier pour propager vos modifications sur toute la pile.
Cependant, même avec les clones, vous travaillez encore avec trois objets. Un regroupement vous permet de les bouger ou de les transformer d'un seul coup, mais alors vous avez le travail supplémentaire d'entrée dans le groupe et d'isolement de l'objet original pour modifier le texte. Comme vous pourriez l'imaginer, les filtres offrent une solution à tous ces problèmes.
Avec les quelques primitives de filtrage que nous avons apprises dans les deux articles précédents, vous en savez déjà assez pour créer un effet d'ombres empilées en utilisant une couleur de remplissage au sommet, avec une copie blanche de l'image source en-dessous d'elle et une copie noire tout dessous. C'est vraiment identique à une simple ombre portée à bords nets (voir partie 48) avec une ombre portée recolorée (partie 49) en sandwich. Regardons-la d'abord sous forme de graphique, en commençant par une ombre portée de base noire avec des bords nets :
Pretty simple, right? Now let's look at our hard-edged white drop shadow. You'll notice it's essentially the same graph, but with the addition of a Color Matrix primitive to convert the black shadow to a white one (I've used a black background for the final output box, so that the white shadow is visible): In order to get a white output from the color matrix, each R, G and B row must evaluate to at least 1.0 (which is mapped to 255 in RGB). Our input values are all zero, so no amount of multiplication will get the result we want. Instead we have to put a value of 1.0, or greater, into the fixed offset column for the first three rows: Now that we know how to create the constituent parts of our filter, we just need to combine them into one. In this case, it's a simple matter of merging them in the right order – black shadow first, then white, then the source graphic. The final graph looks like this:
As you can see, our final filter requires four filter primitives – two Offsets, one Color Matrix and a Merge. It also has two connections to the Source Alpha input, and one to the Source Graphic input. Let's take a look at the final filter design in Inkscape: If you follow each line in the image you'll see that it's the same connected set of objects as in the graph view. Unfortunately, Inkscape's UI manages to make it seem more complex, largely due to the need for lines to cross in order for each “branch” of the filter to come together at the Merge primitive. Now imagine the same filter design, but with even more shadows being stacked: despite each shadow being a separate linear graph feeding into a common Merge, Inkscape's UI quickly becomes filled with a confusing spaghetti of crossing lines. Whenever you're faced with such a complex mess, try sketching out the filter primitives and their connections in graph form to see if it becomes more understandable.
There's a bit of a problem with our stacked shadows filter: it looks distinctly different when placed on a white background compared with a colored background. In the former case, the white shadow vanishes into the background, giving the appearance of a disconnected black shadow, but as soon as you put it on any other background, the white layer stands out. In some cases you may want the white layer to be visible, but for others you would want that part of the output to be transparent. If you were building the stacked shadows from normal SVG objects, you could use a clipping path to achieve this effect (see part 13), but clipping paths aren't available as filter primitives. Instead there is a primitive called “Composite” which allows you to combine two inputs in myriad ways, including a couple that have a similar effect to a clipping path.
The Composite primitive uses the alpha values of the pixels in the input images to determine what the output pixel should be, using the methods described by Thomas Porter and Tom Duff back in the 1980s, collectively referred to as the Porter-Duff blending modes. These blending modes are selected from the Operator pop-up in the filter editor: Default – This omits the operator from the filter primitive in the underlying XML file. Per the SVG Filter Effects spec, this causes Inkscape to behave as though a value of “over” had been supplied. For the sake of clarity, I recommend never using this option, and always explicitly selecting the “Over” option, if that's what you want. Over – The two images are laid on top of each other, with the top input appearing above the lower input. This is exactly the same as using the Merge primitive with two inputs, except that the order of the inputs is reversed. In – Only those parts of the top image that are “inside” the lower image will appear in the output. This has a similar effect to a clipping path. Out – Only those parts of the top image that are “outside” the lower image will appear in the output. This has a similar effect to an “inverse” clipping path. Atop – The output consists of the lower input image, plus all the parts of the upper input image that are inside the lower image. XOR – Performs an eXclusive OR operation between the RGB values of each of the pixels in the two input images. The effect is for the output image to include any non-overlapping parts of the input images. Arithmetic – This is not one of the Porter-Duff blending modes, but rather is an additional mode that is present in the SVG spec. It will be described in a little more detail later.
Note that the filter UI provides four sliders, but even though these are only used for the Arithmetic operator, they nevertheless remain visible, though disabled, when any of the other operators is used. The descriptions above are broadly correct, but some subtleties slip in when the input images contain alpha values other than 0 and 255. If you want to use this primitive for clipping, it's therefore advisable to ensure that your input images don't contain intermediate values. The best way to do this is with the Component Transfer primitive, which gained a UI in Inkscape 0.91 and will be described in a future article. Sticking with the filters I've already covered, you can also use the Color Matrix primitive to stretch and offset the range of possible values to achieve a similar result. For example, this matrix will clamp alpha values such that those below 128 are converted to 0, and those above or equal are converted to 255.
As with so many things in SVG, that's a lot of words to describe something that's better shown as an image. Here are the 5 Porter-Duff blending modes when applied to a couple of squares, first with no transparency, then with the opacity reduced to 75%. Note that the black outlines have been added afterwards to clarify which parts of the images remain – they're not present in the pure filtered output. Let's get back to our stacked shadow and take a look at how this filter can help to cut away the white layer. Consider just a small part of the output – a single letter. I've removed the Source Graphic so we're just seeing the two offset shadows: We need to keep the black part that's visible, but remove all the white content, leaving it transparent. In other words, we want to keep the part of the black layer that is outside the white layer. Clearly this is a job for the Composite primitive's “Out” blending mode. Because the Composite filter cares about only the opacity of the input sources, not their color, we can omit the Color Matrix primitive, giving us this filter chain and result:
All we need to do now is to add a final block to the chain to merge this output with our original source graphic once more, giving us the final result we were looking for – a stacked shadow with a transparent intermediate layer that works on any background (see top middle). There's one last thing to describe before concluding this month's article: that “Arithmetic” mode of the Composite filter, and its four sliders (K1 to K4). With this mode, each channel (R, G, B, A) of each pixel of the output image is calculated from the corresponding pixel channel of the input images (i1 and i2), weighted by the K1 to K4 values using the following formula: result = (K1×i1×i2) + (K2×i1) + (K3×i2) + K4 Breaking this down, you can see that K4 isn't multiplied by anything, so it just represents a fixed offset. K2 and K3 are multiplied by i1 and i2 respectively, so they adjust the amount of each input that goes into the output. K1 is multiplied by both i1 and i2, so acts to stretch the range of the output values.
This mode can be used to combine the output from two other filter primitives, allowing you to control the proportions of each input. The SVG spec suggests it might be useful for overlaying the output from some lighting effect primitives (not yet covered in this series) with texture data from another primitive or image source, but it can be useful whenever you want to mix two images together with some control over the strength of each one.
ENCADRÉ Inkscape Forum The Inkscape Board is forming a committee to organise the creation of an official Inkscape forum. The main existing community forum (inkscapeforum.com) has become a target for spammers, and the owner of the domain has not been responsive to any emails or messages. The chair of the committee will be Brynn, a long standing contributor to the old site, who maintains a separate forum at www.inkscapecommunity.com. The major contributors to the forum are moving to her site, at least as an interim measure. Until a final decision is made about a new forum, it is strongly recommended that support posts or requests are made at Brynn's site, rather than at the old forum.