Using blending filters (multiply more specifically) using SVG

Question

I have a reference image of the effect that I am trying to achieve using SVG.

In Photoshop the effect can be achieved by using 100% opacity with the blending mode set to 'multiply'

The colors have hex values of:

red: #EA312F, blue: #3A5BA6 and overlapping area: #35111F

I have tried a number of approaches using SVG filters to achieve a similar effect but am struggling to understand how the blending modes calculate the values.

1. Original Photoshop bitmap
2. SVG using only shapes no filters
3. SVG using multiply filter on vertical bar
4. SVG using multiply filter and opacity on vertical bar

You can see the SVG code for each of these in this JSBin http://jsbin.com/iPePuvoD/1/edit

I'm really struggling to understand the best approach to match the blue of the vertical bar and the color of the overlapping area.

Each of these shapes i'd also like to animate using a library such as http://snapsvg.io/, so i'm hoping to rely purely on filters, rather than cropping or other operations to achieve the desired results - but am open to suggestions.

Effectively, the SVG for the final attempt (4.) is this:

<svg viewBox="0 0 96 146" version="1.1" id="f-multiply-opacity" preserveAspectRatio="xMinYMin meet">
  <defs>
    <filter id="f_multiply" filterUnits="objectBoundingBox" x="0%" y="0%" width="100%" height="100%">
      <feBlend in="SourceGraphic" mode="multiply"/>
      <feBlend in="SourceGraphic" mode="multiply"/>
    </filter>
  </defs>
  <g id="f_shape">
    <rect x="0" y="0" width="96" height="32" fill="#EA312F" />
    <rect x="0" y="50" width="96" height="32" fill="#EA312F" />
    <rect x="0" y="50" width="32" height="96" opacity="0.8" fill="#3A5BA6" filter="url(#f_multiply)" />
  </g>
</svg>

Would much appreciate some advice on this, I have found some good resources on SVG, but this area still seems quite difficult to get good information on.

Thanks!

Answer 1

See the Compositing and Blending Level 1 spec. It enables specifying the compositing and blending to use when rendering web content (including svg). It is testable in a number of browsers by a toggling a runtime flag, see here for instructions. For up-to-date browser support of mix-blend-mode see caniuse.

<svg>
  <style>
    circle { mix-blend-mode: multiply; }
  </style>
  <circle cx="40" cy="40" r="40" fill="#EA312F"/>
  <circle cx="80" cy="40" r="40" fill="#3A5BA6"/>
</svg>

As jsfiddle here.