Blending mode and SVG

One great thing about canvas is that it’s super easy to change the compositing mode. And sure, you can do all sorts of fancy things with that, but my basic usage of that is to control how opacity is handled. By default, in svg, if you add one element which is not fully opaque on top of another, the top element makes the bottom element darker. By contrast, in canvas you can have access to globalCompositeOperation that let you change how new elements drawn on top of an existing image are handled, or in processing, you have blendMode, etc.

In SVG, there are a variety of operations accessible through filters: see for an excellent overview. I must admit that I find filters a bit intimidating to set up and need to always go back to a reference to achieve anything.

I was reading this article this morning on CSS graphical effects thinking, wouldn’t that be nice if we could do control compositing in SVG.

It turns out that we can! By manipulating the “mix-blend-mode” style attribute of any graphical element, we can achieve one of 16 blending modes (which is actually more than canvas or processing!)
Here’s a demo that shows what can be done. This is an adaptation of this example.

So, through the use of the right blending mode, opacity can be used to make the resulting image lighter (among many other things).


One thought on “Blending mode and SVG

Leave a Reply