3

I'm trying to export some vector icons I drew from sketch into SVG and PNG.

Here are my icons in sketch:

Sketch icons

All nice and crisp. The shapes are in a group and against a mask, like so:

layers

When I click export, I export them to SVG and PNG.

Here is the PNG's on a webpage:

pngs

These look great, exactly how I want them.

Here is the SVG's on a webpage:

svgs

The hexagons are no longer rounded, and at some points the stroke is thinner (eg - the bottom of the first icon) and some times it just completely disappears) also, the mouse cursor on the third icon has rotated to be facing straight up!

Does anyone know how I can make this export just like the PNG's but in SVG format? I can't seem to see any other option than 'export' so not sure what i'm doing wrong?

1

I am not familiar with Sketch, but based on my AI experience, the problem might be that the rounded corners of the hexagon might have been created using a feature that is not a standard SVG feature.

SVG is a vector format but it does not support every possible effect, shortcut and visual candy that the vector editing softwares include. Some effects are impossible to export to SVG because they are not part of the SVG definition.

In AI, for example, there is more than one way to make rounded corners. Some of them are very easy to use, like drawing a rectangle and applying a "rounded corner" effect, while some other ways are more time consuming, like painstakingly drawing every rounded corner using the pen and the anchor handles. The result is the same but the methods are quite different.

enter image description here

AI seems to be pretty good at saving SVGs so they don't loose any effect, but If I would find this problem in AI (try to export an effect and notice it does not make it to the SVG), I would try to make the illustration as basic as possible before saving it as an SVG. In AI I would try to "expand" the illustration which basically means "break all the complicated effects into simple shapes". This option would take, for example, the "rounded corner" effect and automatically convert it into a curve, as if I would have drawn it manually. If there is a similar option in Sketch, you could give that a try.

  • I'd second this. I've had problems with Sketch exporting to SVG and it's because I was using a mask or a merged shape or something. – elliottregan Mar 25 '15 at 1:19
1

I ran into same issue and while reading I experimented a few things. I was able to export the desired output by converting the shape into outlines (shortcut is Shift + Command + O`). It will create a combined shape but you can remove unnecessary shapes and when you export it will export with curves!

0

Even I had the same problem while exporting SVG from sketch. The only solution is, you have to make it as a combined shape while exporting. It works but it is really hard to achieve. Still Sketch(41.2) has that issue.

0

Make sure you update Sketch to the latest version. Then check if the icon you created has any borders which can easily go drail when exporting to SVG file. If you don't want to ruin the whole design but also don't want to remove the border, try to outline the border to convert it to a shape. Hope this is helpful :)

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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