Shape and Alpha Masks don't work exporting SVGs

Share an issue
1

I’m working with Sketch v101.8 and am trying to make some basic SVGs, but lots and lots of them. Most importantly, I need to export them out as SVGs for use in Illustrator, Photoshop and wherever else. The problem that I’m running into is that Sketch masks just do not seem export out correctly and don’t appear to compatible with Adobe software.

1
11284×706 22.7 KB

2
21493×669 58.6 KB

3
31075×735 83.2 KB

4
41553×663 54.9 KB

5
5789×355 38.3 KB

The svg opened in adobe software seems to break the mask that was applied in Sketch

The example is using very simple shapes but still doesn’t behave as I would expect it to. The intent would be to have the mask work consistently with other programs, particularly Adobe software, for more complex designs. I’m not looking for alternative fixes.

Does anybody have any ideas or explanations?

Thanks,

2

Hi there @SketchUser

Welcome to the Forum and thanks for sharing this.

Can you share your Sketch document so we can test this? A colleague tried to reproduce the problem but the resulting SVG exports open up just fine in Adobe Illustrator.

You can share your file privately to our support address: productsupport@sketch.com

Thanks in advance and looking forward to investigate this :pray:

2 Likes
3

Thank you for coming back to me. Sketch file attached.
sketch file.sketch (8.7 KB)

I don’t seem to be able to upload SVG files here, but I exported an SVG from that Sketch doc. If:

  • I load it up in Illustrator, it appears fine. (attached image, red star masked in green circle)

  • But if I load it up in photoshop, it ignores the mask

    2
    2488×534 34.3 KB

  • If I load it up in Illustrator, then copy it and paste it into Photoshop as a smart object, it keeps the mask. (and I can go back into Illustrator through the smart object to make further edits.

The plan is to create an array of hundreds of assets in Sketch and have them compatible with all of the key design software - mainly Illustrator and Photoshop. Am I doing something wrong here, or is this more of an issue with Adobe Software than Sketch?

Thanks,

4

1
1508×550 8.75 KB

This is how it appears in Illustrator
(couldn’t post two images in one post because I’m a new user)

5

Hey, thanks for sharing your file!

I tested in Affinity Designer 2 (I don’t have Illustrator) and I got the same result as you do in Photoshop: the mask is ignored. I tested with Affinity Photo 2 and got the same result: the mask is ignored. The only way I could get the mask to work is to copy and paste the layers from Sketch directly into Affinity apps.

This seems to be an issue with how other software applications process SVGs from Sketch. If you use the exported SVG in any browser, the mask will work as expected.

Bottom line, you’re doing it right, and since Illustrator handles the mask well, you could import the SVGs as Smart Objects and use those in Photoshop as well.

6

Looks like I can copy and paste direct into Photoshop from Sketch too. It does seem like strange behavior that exporting the SVG breaks in the mask in some applications.

Thank you for coming back to me