: Seeking advice when working with SVG filters - more specifically multiply I have a reference image of the effect that I am trying to achieve using SVG. In Photoshop the effect can be achieved

@Gail6891361

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.

Vote Up Vote Down

@Carla748

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.

Vote Up Vote Down