Greetings.

Can anyone give me any pointers as to how you would do the following in SVG:

Given a path with a set fill/stroke, apply two conceptual filters to it: a red glow and a blue dropshadow.

I can make the two separately using a combination of fwGuassianBlur, feOffset, feColorMatrix, and feBlend, but I can't put the two together. At the moment I have:



I think the biggest hurdle is that I don't know how to colorize the shadow only. The second feColorMatrix in the drop shadow colorizes the entire object, since it was already blended together in blendOut.

Ok, I had to have a look at it in the inkscape effects editor: It helps a lot to have the connections visualised...

Here is what I have got.



The most important part is working out where to use the SourceGraphic input to start a new section of the filter, and then to use the blend to combine the two sections of the filter together.

Honestly though, Use the Inkscape filter to visualise the connections.

Hm, I think my previous reply got lost because I changed the title (had accidentally left it cut off as "How do you make"!) and it required the post to get re-approved I think. So, from memory:

Thanks for the help! So the trick is all about blending the right stuff. If I had more that 2 filters, I suppose I could use feMerge instead of feBlend. The only I'm still having a hard time wrapping my head around is how to make it stack... if I use feMerge to merge 3 filters after they have been rendered, and they are all rendered from the SourceGraphic, it isn't "stacked" like I would expect...

I can't seem to find the effects editor, where is that? Sounds like exactly what I need to experiment with.

Thanks!

After you apply the first filter, Group the object (even though it only one item), then apply the second filter.