Search code examples
svgalphablendingblendingsvg-filters

How do I use my own blending formula in SVG?


I'm using SVG.

The standard blend modes: screen, lighten, overlay, difference. etc...... are not what I need.

I've designed a formula for another blend mode i need to use that isn't any of the standard ones, but don't know how to implement it into my SVG file so that it works.

Do I just do for example do feBlend mode="Cm = B(Cb, Cs)" within a filter?

Specifically, I want to apply the luminosity of the layer above to the alpha channel of the layer below.

There must be a way.

Thanks.


Solution

  • You cannot provide a custom blending formula in SVG 1.1 - you are stuck with the built-ins. However, you can create other types of blending using compound filters with multiple feBlends & feComposite arithmetic mode in combination with feColorMatrix's.

    Update:

    What you want to do is not possible the way you want to do it. The result of an feBlend operation where one of the inputs is fully opaque is a fully opaque result. feBlend uses pre-multiplied values for its color calculations. So, you can't directly take the alpha channel of one image, and transfer it to another image's alpha channel. However, if you're trying to blend an image with its background and that's why you're trying to adjust the alpha channel, you could achieve the effect you're looking for by using the Background image as part of the blend filter (but this is only possible in IE10 and Opera today).

    There is a proposed new blend mode in the combined CSS/SVG blending spec "mode=Luminosity" which would do what you want - but that is not going to show up in browsers for a while.