1

I am getting a strange result when exporting an SVG icon from Sketch.

I am trying to export this mail icon that is made up of two masked triangles and an outer rectangle (all using an outside border):

enter image description here

The resulting SVG is misaligned, with some of the icon missing:

enter image description here

I am fairly new to Sketch and graphic design in general.

I suspect this has something to do with my groups, masks, or incorrectly 'flattening' the icon.

Any help is much appreciated.

Generated SVG Code

Edit 1 - Result when I Union all the layers:

enter image description here

Improve this question

1 Answer 1

Reset to default
1

Before you export it:

1) Select all the layers and then select Layer > Combine > Union (you may have already done this step)

2) Then, with your newly united shape (that still has multiple layers within it, Layer > Combine > Flatten. Your shape should now be a single layer / single vector path and you should have no problems when you export.

Improve this answer
3
  • When I Union all the layers it distorts the letter shape (I think because of the way I have used two triangles with borders and masks) - I've put the result in an edit of the main question. Is this a case where I have to try and construct the letter shape differently?
    – adamjoyce
    Commented Feb 14, 2019 at 10:24
  • I don't know how masks interact with Union; I'd suggest constructing this without masks. If you don't know how, check out this answer for some hints about deleting vector points (instead of masking): graphicdesign.stackexchange.com/questions/119722/…. If you still need help, let me know.
    – Brian R
    Commented Feb 14, 2019 at 17:28
  • 1
    For anyone struggling with a similar issue I can confirm that Unioning two shapes, each with a mask, does not produce the desired result. As Brian suggested I created the letter without the masks. I converted the triangles to outlines and then intersected them with the rectangles I was previously using as the masks. From here you can Union and flatten as described in Brian's answer.
    – adamjoyce
    Commented May 3, 2019 at 14:48

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.