1

I go to export assets from Sketch as SVG files. I have a few problems...

  1. If I select the assets and it automatically slices it, I then save out the SVG file and it gets cut off. circle icon example

  2. Inserting into code looks crisp on safari but in Firefox and Chrome it looks blurry (only on a non retina desktop).

Anyone have problems like this? I thought it was because the icons are 1px lines but they look fantastic on my screen at 100%. I just don't get it.

Improve this question
2
  • Same problem - circle icons are cut off. Exporting png works fine with these icons, by the way.
    – pufflik
    Nov 24, 2014 at 11:51
  • Same problem, exporting as PNG solved it for now.
    – Gregory Bolkenstijn
    Dec 31, 2014 at 10:00

2 Answers 2

Reset to default
2

You need to make sure you vectorize all of your strokes when exporting to SVG. This will keep your circle icons from being cut off. There is no need to use a mask.

Follow Layer/Paths/Vectorize Stroke.

Improve this answer
1

So I have the same problem with clipping of icons in exporting svg.

Here is kind of a hack way I played around with that makes the clipping problem go away:

Create a mask layer (of the share you desire) under your icon layer. See screenshot below:

enter image description here

Improve this answer

Your Answer

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

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