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.
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.
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.
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?
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.
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.