Hopefully some simple solution to this, but basically when I export an icon create in sketch it basically adds a pixel. Is this an export problem or a rendering issue in chrome for example? (or both).

Here's a screenshot of what's being exported:

enter image description here

As you can see it all aligns to the pixel grid etc.

Here is what I see in preview:

enter image description here

As you can see it's distinctly broken. I guess perhaps the arrow head is broken because the tip falls on a half pixel? But I can't explain the issue with the horizontal line at the top doubling in height! Please help!

  • 1
    That might just be a preview rendering error. What happens when you output it as a raster image, or as an SVG and view it in a browser? Previews are just previews . . . after all.
    – Billy Kerr
    Commented Dec 6, 2017 at 14:22
  • same problem in the browser. I've exported it from illustrator and it's seemingly fine so must be a sketch issue
    – Chris
    Commented Dec 6, 2017 at 15:50
  • Have you tried exporting to SVG? Check the generated SVG code and see if the dimensions are leaking off above the grid (if you find some really strange floating point decimals instead of exact integer values). Commented Dec 7, 2017 at 17:06

1 Answer 1


Try using the old export option (File>Export>Export As). This way you can define how many decimal places the SVG is rounded to. Try '2'. This can tidy things up a bit.

enter image description here.

  • Note that the smaller the viewBox the more decimals may be required. Commented Feb 16, 2022 at 14:25

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.