• Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
    Dedicated community for Japanese speakers
  • 한국 커뮤니티
    Dedicated community for Korean speakers
Exit
0

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

Community Beginner ,
Apr 02, 2019 Apr 02, 2019

Copy link to clipboard

Copied

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

Any idea why??

Views

6.2K

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines

correct answers 1 Correct answer

Community Expert , Apr 07, 2019 Apr 07, 2019

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 Illu

...

Votes

Translate

Translate
Adobe
Community Expert ,
Apr 02, 2019 Apr 02, 2019

Copy link to clipboard

Copied

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.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Apr 02, 2019 Apr 02, 2019

Copy link to clipboard

Copied

SVG supports Multiply, Screen, Darken and Lighten.

Try Export for Screens instead of Save as.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
Apr 02, 2019 Apr 02, 2019

Copy link to clipboard

Copied

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'.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Apr 02, 2019 Apr 02, 2019

Copy link to clipboard

Copied

Which Illustrator version are you using?

Export for screens works in 23.0.2

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
Apr 07, 2019 Apr 07, 2019

Copy link to clipboard

Copied

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.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Apr 07, 2019 Apr 07, 2019

Copy link to clipboard

Copied

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.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Apr 07, 2019 Apr 07, 2019

Copy link to clipboard

Copied

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

https://adobe.ly/2WQx67l

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
Apr 08, 2019 Apr 08, 2019

Copy link to clipboard

Copied

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!!

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Apr 08, 2019 Apr 08, 2019

Copy link to clipboard

Copied

Good to hear you found the reason.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
Aug 16, 2021 Aug 16, 2021

Copy link to clipboard

Copied

LATEST

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

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines