AI: Element (circle mask) is lost after exporting to svg

[Michał26427621uqbm]

Hi all, I have no idea why I'm losing an element which is a circle mask after exporting to svg. Im using AI 26.5 (64 bit). Export to PNG works fine. I tried different configurations in dialogue window but non of them  worked. The picture I want to export is a simple icon with 2 elements (two circle masks). Grouping and ungrouping elements doesn't help. Any idea?

[marliton]

Hi. SVG format has issues with semi-complex graphics, masks, etc. You can try expanding the graphic before exporting.

[Michał26427621uqbm]

Hi Marlon, expanding doesn't work either, unfortunately. The key issue is that the final object must have some transparency within its shape.

[marliton]

In my opinion, is better to use SVG format with simple shapes, any "extra" could produce unexpected results. If the graphic has opacity, complex gradients, etc, I prefer to use a bitmap format like png.

[Monika Gause]

So you export the SVG and then you check it out in a browser and then the mask is not there?

Or does the mask disappear after re-opening the SVG in Illustrator? That is something you should avoid at all costs. Never, never ever use SVG as a work file format in Illustrator. Your work file format should always be AI. Use SVG only for export.

[Michał26427621uqbm]

Exactly, I export the SVG and then I check it out in a browser which shows that the mask is missing.

[Monika Gause]

How did you make the mask? With the button in the layers panel or with Object > Clipping mask > Make (resp. Draw inside)?

[Michał26427621uqbm]

I did it with the transparency settings window: [marking objects] > Transparency > Make Mask

[Monika Gause]

That's an opacity mask. Probably SVG cannot do it the way Illustrator does it, so the mask gets lost on export.

You might need to read about the SVG file format to find out how masking works in SVG and then do some tests in Illustrator. You could also flatten transparency, but that might leave you with some rather complex artwork.

For a start: https://webdesign.tutsplus.com/tutorials/a-comprehensive-guide-to-clipping-and-masking-in-svg--cms-3...

[Michał26427621uqbm]

I used Exclude Shape mode and it worked. The effect in AI is the same as using opacity mask, but this time SVG export went fine. Thank you. 

[Monika Gause]

Glad you could get it to work and thank you for the feedback, which will help others.