Welcome Dialog

Welcome to the Community!

We have a brand new look! Take a tour with us and explore the latest updates on Adobe Support Community.


Illustrator does not understand SVG masks

Explorer ,
Sep 24, 2021 Sep 24, 2021

Copy link to clipboard

Copied

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:

Screenshot 2021-09-24 at 11.17.22.png

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:

Screenshot 2021-09-24 at 11.20.42.png

 

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!

TOPICS
Feature request, How to

Views

116

Likes

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

Adobe Employee , Sep 24, 2021 Sep 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

Likes

Translate

Translate
Adobe Community Professional ,
Sep 24, 2021 Sep 24, 2021

Copy link to clipboard

Copied

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

Likes

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
Explorer ,
Sep 27, 2021 Sep 27, 2021

Copy link to clipboard

Copied

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.

Likes

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
Adobe Community Professional ,
Sep 28, 2021 Sep 28, 2021

Copy link to clipboard

Copied

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

Likes

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
Adobe Employee ,
Sep 24, 2021 Sep 24, 2021

Copy link to clipboard

Copied

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

Likes

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
Explorer ,
Sep 27, 2021 Sep 27, 2021

Copy link to clipboard

Copied

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/

Likes

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
Adobe Employee ,
Sep 30, 2021 Sep 30, 2021

Copy link to clipboard

Copied

LATEST

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

Likes

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