title: Using blending filters (multiply more specifically) using SVG
body: <p>I have a reference image of the effect that I am trying to achieve using SVG.</p>
  
  <p><img src="https://i.stack.imgur.com/OeTdh.png" alt="Bitmap reference image"></p>
  
  <p>In Photoshop the effect can be achieved by using 100% opacity with the blending mode set to 'multiply'</p>
  
  <p>The colors have hex values of:</p>
  
  <p>red: #EA312F, blue: #3A5BA6 and overlapping area: #35111F</p>
  
  <p>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.</p>
  
  <p><img src="https://i.stack.imgur.com/sAvDG.png" alt="SVG attempts to match original graphic"></p>
  
  <ol>
  <li>Original Photoshop bitmap</li>
  <li>SVG using only shapes no filters</li>
  <li>SVG using multiply filter on vertical bar</li>
  <li>SVG using multiply filter and opacity on vertical bar</li>
  </ol>
  
  <p>You can see the SVG code for each of these in <a href="http://jsbin.com/iPePuvoD/1/edit" rel="noreferrer">this JSBin http://jsbin.com/iPePuvoD/1/edit</a></p>
  
  <p>I'm really struggling to understand the best approach to match the blue of the vertical bar and the color of the overlapping area.</p>
  
  <p>Each of these shapes i'd also like to animate using a library such as <a href="http://snapsvg.io/" rel="noreferrer">http://snapsvg.io/</a>, 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.</p>
  
  <p>Effectively, the SVG for the final attempt (4.) is this:</p>
  
  <pre><code>&lt;svg viewBox="0 0 96 146" version="1.1" id="f-multiply-opacity" preserveAspectRatio="xMinYMin meet"&gt;
    &lt;defs&gt;
      &lt;filter id="f_multiply" filterUnits="objectBoundingBox" x="0%" y="0%" width="100%" height="100%"&gt;
        &lt;feBlend in="SourceGraphic" mode="multiply"/&gt;
        &lt;feBlend in="SourceGraphic" mode="multiply"/&gt;
      &lt;/filter&gt;
    &lt;/defs&gt;
    &lt;g id="f_shape"&gt;
      &lt;rect x="0" y="0" width="96" height="32" fill="#EA312F" /&gt;
      &lt;rect x="0" y="50" width="96" height="32" fill="#EA312F" /&gt;
      &lt;rect x="0" y="50" width="32" height="96" opacity="0.8" fill="#3A5BA6" filter="url(#f_multiply)" /&gt;
    &lt;/g&gt;
  &lt;/svg&gt;
  </code></pre>
  
  <p>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.</p>
  
  <p>Thanks!</p>