Skip to main content
M
Michał26427621uqbm
Participant
October 4, 2022
Question

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

  • October 4, 2022
  • 2 replies
  • 2502 views

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?

This topic has been closed for replies.

2 replies

Monika Gause
Community Expert
Monika GauseCommunity Expert
Community Expert
October 4, 2022

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.

M
Michał26427621uqbmAuthor
Participant
October 4, 2022

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

M
Michał26427621uqbmAuthor
Participant
October 5, 2022

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


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. 

    marliton
    Community Expert
    marlitonCommunity Expert
    Community Expert
    October 4, 2022

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

     

    Marlon Ceballos
    M
    Michał26427621uqbmAuthor
    Participant
    October 4, 2022

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

    marliton
    Community Expert
    marlitonCommunity Expert
    Community Expert
    October 4, 2022

    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.

     

    Marlon Ceballos
    Terms & ConditionsAccessibility statement
    Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices