Adobe

decor

Web Platform Team Blog

Making the web awesome

Experimental support for blend modes for SVG in Chromium

We recently added support for blending of SVG elements to Chromium.  You can download Canary or Chromium. Since the feature is experimental, you will need to turn on “Experimental web platform features”. Once you turn on this flag, there will be support for the new ‘mix-blend-mode‘ CSS property on all elements. For now, only SVG elements will actually apply the blend effect. Here’s an example of  some circles that have blending applied:

<!doctype html></pre>
<style><!--
circle {
   mix-blend-mode: multiply;
}
--></style>
<pre><svg>    </svg>

Which will render as follow:

SVG blended circles

Let us know what you think. If you have a cool demo to show off this feature, that would be great as well!

Next on the list are WebKit and Firefox…

3 Comments

  1. August 20, 2013 at 7:31 am, Samuel Demirdjian said:

    I believe this is awesome news!

    Does that mean that feBlend with mode “multiply” will also work?

    Also thank you for making this available in WebKit and Firefox!

    • August 20, 2013 at 8:55 am, Rik Cabanier said:

      Do you mean feBlend with backgroundImage? No, that doesn’t work yet. (The spec also has issues that we should fix first).

  2. August 28, 2013 at 5:15 am, Sébastien Blanc said:

    This is absolutely perfect !
    I’m currently doing it with canvas & js and if that becomes possible via css properties that could be much better.
    However I guess that we can wait some months before seeing it supported into stable versions of our usual browsers ?
    Thanks a lot !