Export from Sketch - vector to SVG strange output


Question

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
3
3/23/2015 2:05:00 PM

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.

1
3/23/2015 4:35:00 PM

Licensed under: CC-BY-SA with attribution
Not affiliated with: Stack Overflow
^