Retain Blending Mode after saving to .svg? (Illustrator)

Question

I'm a little new to illustrator. I designed a little logo in illustrator that comprises of several layers. Now because I have some of this layers interact with each other different using the blend mode, the image looks alright when I'm working on it in illustrator.

However saving it is a different story, my blending modes are lost and the image is altered.

If it helps I'm using the .SVG format

Much Appreciated.

Answer 1

These answers are not quite correct (at least not anymore). SVG actually does support some blending modes using the feBlend filter. You'll probably have to edit the actual SVG code of the file though. What you need to do is add a <feBlend> filter.

See this article for more info:

SVG Blend Modes

As you might suspect, SVG does have its own mechanism for doing this. One way to do it is to define it within the <svg> itself, and it's fairly complicated:

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

<path id="p1" d='M100 100 L200 100 L200 200 L100 200 Z' fill='#00FFFF'/>
<path id="p2" d='M150 150 L250 150 L250 250 L150 250 Z' fill='#CC3300'/>
   </defs>
 <rect width="100%" height="100%" filter="url(#f1)"/>    </svg>

This method is supported in most browsers except for IE >9 and Android Browser >4.4.

Answer 2

.svg does not support everything that Illustrator has to offer, unfortunately. It might be wise to actually save your files in the native *.ai format to retain everything you did, and export them as *.svg only if you really need to. And yes, that may mean that you lose some effects in the *.svg.

If you want the *.svg to show identically to the *.ai, you should try to apply Object > Epand appearance..., Object > Expand and Object > Flatten transparency to just about everything.

Answer 3

As Vincent already said, illustrator doesn't persist this information when you use SVG as the file format. However you can still set a blend mode to individual SVG elements via the CSS attribute mix-blend-mode attribute, here's an example:

Protip: Illustrator will attach the id attribute to SVG elements with layer names.

#svgLabelName {
  mix-blend-mode: multiply;
}

Caveats

• Currently mix-blend-mode is still just a W3C Candidate Recommendation, so it's unstandardised at the moment, you can read here to find out more about the recommendation. This is likely the reason illustrator doesn't do this automatically.
• Due to it being unstandardised, it's only supported in a few browser, being Chrome (41), Firefox (32), and Safari (8)

Answer 4

I got different results when trying to save my SVG using "File > Save As" then when I used "File > Export > Export As...".

No matter which settings I chose in the SVG Save dialog when using "File > Save As", the blend mode wouldn't persist in the saved file (yes, albeit using CSS to set this).

But, when using the "File > Export > Export As...", the save dialog box is different for SVGs, and the exported file contained the correct CSS to show the blend mode, transparency, etc (when using a browser that supports the css blend mode attribute).

Note: Using Illustrator CC 2017