3

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.

enter image description hereenter image description here

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?

2

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/

  • I think you beat me to that by about 5 seconds... – Cai Jun 13 '16 at 20:21
  • @Cai haha but yours is much better! – AndrewH Jun 13 '16 at 20:24
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:

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.

  • I ended up using Flatten Transparency to convert it to a gradient, but I needed to duplicate the background then delete the cut out of the duplicate after running it. A bit of a pain to do for every icon – Malik Drako Jun 13 '16 at 20:33
  • Using flattern transparency is probably a better way than my last option yes :) – Cai Jun 13 '16 at 20:37

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.