Copy link to clipboard
Copied
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?
Copy link to clipboard
Copied
Hi. SVG format has issues with semi-complex graphics, masks, etc. You can try expanding the graphic before exporting.
Copy link to clipboard
Copied
Hi Marlon, expanding doesn't work either, unfortunately. The key issue is that the final object must have some transparency within its shape.
Copy link to clipboard
Copied
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.
Copy link to clipboard
Copied
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.
Copy link to clipboard
Copied
Exactly, I export the SVG and then I check it out in a browser which shows that the mask is missing.
Copy link to clipboard
Copied
How did you make the mask? With the button in the layers panel or with Object > Clipping mask > Make (resp. Draw inside)?
Copy link to clipboard
Copied
I did it with the transparency settings window: [marking objects] > Transparency > Make Mask
Copy link to clipboard
Copied
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...
Copy link to clipboard
Copied
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.
Copy link to clipboard
Copied
Glad you could get it to work and thank you for the feedback, which will help others.