Seeking advice when working with SVG filters - more specifically multiply

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

Unfortunately, Photoshop's blend modes let you do a lot of cool things that you find you just can't do in other places, such as CSS, SVG graphics, etc. Generally you'll find the awesome Multiply mode bites you the most in these situations.

Is the artwork shown the actual question? Unless SVG has the concept of 'overprint' (which is kind of what 'multiply' is) I think you're stuck chopping the artwork up into an extra piece and manually coloring the overlapped section.

You could also try multiple layers of say, the red bar. Have one on the bottom of the stack, with no transparencies or affects. Then pile on the blue one. Then pile on another red one, on top and mess around with transparency settings on the top red one. With the fully 'opaque' red one on the bottom of the stack, the changes you make to the top red bar should only affect the area where the blue bar interacts.

Answer 2

I don't know exactly what support SVG blend modes currently enjoys: a quick search suggests that the standard is still being worked on (?).

I can answer your embedded question "how is [multiply] calculated?"

Multiply is exactly what is sounds like: L1 * L2, where L1,L2 -> brightness of pixel for layer 1 and layer 2 per channel.

TLDNR; for each color channel, Vn = ((V1/255) * (V2/255)) * 255

To test this, you can switch to a channel palette and select the red channel. Use the eyedropper on a pixel from each pure color and note the "Brightness" value for each under the HSB color model. Do this for each channel. Note that B is a percentage, so record the decimal representation (i.e. don't write '95', write ".95").

For each channel, multiply the two recorded values, make a note of the result. Convert back to an integer by truncating the remainder.

Make a new layer, select the red channel and fill it with a grey such that H=0,S=0 and B is your new value. Do the same for Green and Blue channels. Your new color (sample it in full RGB) should be very nearly the exact color value of your intersection (the #35111F in your question).

Now that you know how it is achieved, it may be possible to reproduce with other software methods suitable for your application.

In your sample image, it is a matter of adding a new square, but this workaround method gets really hairy the more complex your art.