Skip to main content
Karl Fabian5F97
Inspiring
September 24, 2021
Answered

Illustrator does not understand SVG masks

  • September 24, 2021
  • 2 replies
  • 1792 views

Hello!

 

I am having issues with importing SVGs into illustrator. Essentially, it appears that illustrator tries to simplify the SVG into path components but does not properly account for masks upon doing so. Here is what my SVG looks like when opened in a browser:

Notice how the hair of the woman goes on top of the body and as such hides (masks) that part of the body. However, when I open this exact file in illustrator it looks like this:

 

Notice how in this case the portions of the body behind the hair are visible, essentially the masks are not applied properly. 

 

I have noticed that it seems like the "ClipMask" property of SVGs work better when importing into illustrator. However, I would very much appreciate if anyone could provide any insight. Basically my question is how I can make sure that illustrator regonizes these masks properly as all other tools do, or what I can replace the masks with so that Illustrator can interpret them properly.

 

It would also be great if Adobe could update Illustrator so as to include this functionality. 

 

Find attached the SVG before and after importing into illustrator. 

 

Thank you community!

This topic has been closed for replies.
Correct answer Anshul_Saini

Hi there,

 

Thank you for reaching out. Point taken! I will forward this feedback to the Product team. I would suggest if you could also post it here (https://illustrator.uservoice.com/). This way, you will keep getting all the updates related to this functionality, and other users can also upvote, which would help us prioritize. Also, could you please tell us in which application this SVG was created?

 

Regards,

Anshul Saini

2 replies

Anshul_Saini
Community Manager
Anshul_SainiCommunity ManagerCorrect answer
Community Manager
September 24, 2021

Hi there,

 

Thank you for reaching out. Point taken! I will forward this feedback to the Product team. I would suggest if you could also post it here (https://illustrator.uservoice.com/). This way, you will keep getting all the updates related to this functionality, and other users can also upvote, which would help us prioritize. Also, could you please tell us in which application this SVG was created?

 

Regards,

Anshul Saini

Karl Fabian5F97
Inspiring
September 28, 2021

Thank you for the answer. I will add this discussion to the link you posted.

 

The SVG was created in a natively-built environment in the company where I work. The library used is called svg.js and it is used in a node.js back-end. This is the link to their library: https://svgjs.dev/docs/3.0/

Anshul_Saini
Community Manager
Community Manager
September 30, 2021

Thank you for sharing the details. Please feel free to reach out if you run into any other questions or issues in the future. We'd be happy to help.

 

Regards,

Anshul Saini

Monika Gause
Community Expert
September 24, 2021

I don't see a difference between those images. Please mark it in your screenshots.

Karl Fabian5F97
Inspiring
September 28, 2021

Sorry, I uploaded the SVGs directly rather than screenshotting them. I can add red circles but if you look at the hair endings, right where the hair goes over the womans' shoulders, you can see how in one image the hair "covers" the body, whereas in the first image it does not.

Monika Gause
Community Expert
September 28, 2021

I'd rather have that pointed out than having to search for it and misunderstanding you. Thank you.