Export to SVG with blend mode or "Apply" it

Question

I have an image with a gradient background and a transparent gray shadow on top of it set to multiply. When I export to SVG, it loses the blend mode and appears gray.

How can I have Illustrator either export as SVG with the correct blend mode, or "apply" the blend mode to the shadow so it becomes an opaque gradient with the same color as the result of the multiply?

Edit: Flatten Transparency is very close to what I want, but it cuts the shape out of the object below it. Is there any way to avoid this?

Answer 1

You can use the following CSS code on that path:

.st1 {
    mix-blend-mode: multiply;
}

But the browser compatibility is pretty poor.

See working example: https://jsfiddle.net/gaa5mbvm/

Answer 2

There's no way to get Illustrator to export an SVG with a "live" blend mode so any solution with blend modes will need to be done manually after you have exported your SVG.

CSS blend-modes

Depending on the level of browser support you need, you can use CSS blend modes. There is a great article on using CSS blend modes on CSS-Tricks:

• CSS-Tricks – Basics of CSS Blend Modes

Simply add mix-blend-mode: multiply; to the style of your star.

SVG filters

It's a little more complicated than using CSS blend modes but SVG does have its own method for applying blend modes. SVG filters are more complicated but do have better browser support. The <feBlend> filter is used to composite two objects (specified with the in and in2 attributes) using a specific blend mode (specified with the mode attribute).

An example of an SVG feBlend filter:

<defs>      
  <filter id="f1" x="0" y="0" width="1" height="1">
    <feImage xlink:href="#circle" result="circle"/>
    <feImage xlink:href="#star" result="star"/>
    <feBlend mode="multiply" in="circle" in2="star" />
  </filter>

  <path id="circle" d='M100....Z' fill='#00FFFF'/>
  <path id="star" d='M150....Z' fill='#0033FF'/>
</defs>
<rect width="100%" height="100%" filter="url(#f1)"/>

Or use another gradient...

Another option is to just use another solid gradient. Set a multiply layer over the whole of your circle and rasterize it so that you can use the eyedropper to recreate the gradient (or use Photoshop's eyedropper, or just match it by-eye). Then mask you new gradient circle with the star path.

Or the easiest way (as you suggested yourself) is to use Object → Flatten Transparency. Just duplicate the bottom object beforehand if you want to keep it unaffected.