Why does exporting SVGs change the transparency layer(s) to Normal?

[NikkiK87]

I export artboards as SVGs and my Screens and Multiplies are being changed to Normal.

Any idea why??

[John Mensinger]

Yes, SVG doesn't support Illustrator's blend modes. It's intended as a deployment format. For re-editing, you should be saving in .ai format.

[Ton Frederiks]

SVG supports Multiply, Screen, Darken and Lighten.

Try Export for Screens instead of Save as.

[NikkiK87]

Export for Screens, Save As, Export Selection etc... All alter my Screen and Multiply -- changing them to 'Normal'. No matter which program I use to see the SVG outside of Illustrator, the results are the same -- Screen and Multiply changed to 'Normal'.

[Ton Frederiks]

Which Illustrator version are you using?

Export for screens works in 23.0.2

[NikkiK87]

23.0.3 on MacOS. Maybe a bug idk. Nothing solves this problem, works fine with every other format except SVG.

I opened the SVG in Firefox and the layers are all right. Lol? So... SVGs are being misread by my programs and not being altered in the export.

[Ton Frederiks · Accepted solution]

NikkiK87  wrote

23.0.3 on MacOS. Maybe a bug idk. Nothing solves this problem, works fine with every other format except SVG.

I opened the SVG in Firefox and the layers are all right. Lol? So... SVGs are being misread by my programs and not being altered in the export.

I use 23.03 also on MacOS. Export for screens. In the code I see: mix-blend-mode:lighten, mix-blend-mode:darken, multiply and screen and it seems to work in the main browsers.

What does not work is when I open the exported SVG in Illustrator, the blend modes are gone.

[Ton Frederiks]

If you want to have a look at my export, download this (ignore the preview).

https://adobe.ly/2WQx67l

[NikkiK87]

I'm glad my issue was repeatable. I've been importing these images into Unity (game engine), which recently began supporting SVGs. However, a member of Unity's team on the SVG integration said this:

"I assume that illustrator will export the blend mode as a "mix-blend-mode" attribute, which we unfortunately don't support. From my understanding, you could probably achieve similar results by splitting your SVG file into multiple parts, and assign a custom shader with the blend mode properly configured to the sprites that requires a different blending." - Unity Team Rep.

With that, thank you for mentioning "mix-blend-mode:" in your post and helping me!!

[Ton Frederiks]

Good to hear you found the reason.

[justing68717322]

Ton,

thank you for this fix. I was brining SVGs into Articulate Rise by using save as and it was messing up the artwork. You just lowered my blood pressure. 

Justin