9

I am trying to export SVG icons from Sketch to import into Fontello, however the SVG's don't appear to be correct for the app (they also do not work in IcoMoon).

The icon I am trying to create as a test is a simple 'hamburger' style icon that is just a few lines, but they will not work correctly. It is frustrating to say the least.

Does anyone have any experience with this and could part with their knowledge? Thank you.

Improve this question
5
  • Can you put your svg file on the web somewhere and link to it? What exactly is the problem with icomoon? I've found if I don't merge my shapes down to bare minimal paths, that icomoon will do weird things.
    – chovy
    Sep 20, 2014 at 5:01
  • What exactly is the problem on icomoon?
    – chovy
    Sep 20, 2014 at 5:02
  • I figured it out, I was using borders on the SVG and I didn't realise that icon-fonts ignored them.
    – Alex McCabe
    Sep 20, 2014 at 11:44
  • I am having a similar (maybe the same) problem. Dragging the exported SVG file into Fontello does nothing. I can't tell if it is a bug with Fontello, or the file isn't recognized for some reason.
    – elliottregan
    Nov 7, 2014 at 3:39
  • I moved to using Icomoon. It seems to read the .svg files better. I also find that if you use borders it will throw the whole thing off.
    – Alex McCabe
    Nov 10, 2014 at 9:56

3 Answers 3

Reset to default
11

I figured out how to export SVG from sketch for icomoon correct importing:

Step 1

Prevent SVG from being made out of borders by selecting the path group and clicking on: layer > paths > vectorize stroke

To know that this has worked, the strokes where transformed to closed paths and the inspector now displays the fill color instead of the border color.

Step 2

Export each icon/svg by clicking on the Make Exportable tab on the inspector and selecting SVG format.

Step 3

Import the SVG icons to icomoon as usual, now the set should display the icons correctly and the grid size should be accurate. NOTE: Make sure that all of your SVG's on sketch have the same height.

UPDATE 2016 Thanks to @jackocnr for pointing out that:

In 2016, the Sketch menu option is Layer > Convert to Outlines

Improve this answer
3
  • I had completely forgotten about the vectorize stroke options. Thanks man!
    – Alex McCabe
    Dec 4, 2014 at 21:59
  • "...Make sure that all of your SVG's on sketch have the same height. " How you manage for example the minus ("-") symbol for this?
    – user45473
    Jun 18, 2015 at 9:42
  • 1
    In 2016, the Sketch menu option is Layer > Convert to Outlines
    – jackocnr
    May 5, 2016 at 0:55
1

This manual worked for me. it's very informative. he writer talks about sketch exporting problems. i'm quoting from his article in case the article will be removed.

Overall Solution

  1. Create an artboard for each icon (insert -> artboard).
  2. Make sure each artboard’s position has no half-pixels and is an even number.
  3. Remove all icon rotations.
  4. Remove any bounding boxes so Sketch doesn’t export unneeded code.
  5. Prevent SVG from being made out of borders layer > paths > vectorize stroke (thanks Gus)
  6. export Clean .svg

*this is the icon the writer tried to export

enter image description here

Sketch exporting bugs

Bug #1

fixed sketch transform export by changing the artboard position to an even number. This removes any transform in the code. On another note, since the position was off by half-pixels, Sketch changed the size of my viewbox to 0 0 25 25. My original artboard was 24 x 24px. This bug even added specs to the code. No bueno.

Bug #2

Problem: By design, each icon was set to width: 24px , height: 24px, and border-radius: 3px. The problem is, when exporting, the rectangle was added into the path, thus making it difficult to scale at any size by css.

Solution: Delete any transparent bounding box and let css do the magic. All the developers really needed was the viewbox set to 24 x 24px. They could add in the width, height, and border-radius.

Bug #3

Problem: Sketch exports a rotate(-180.000000).

<path d=”M16,7.4 L14.4864865,6 L8,12 L14.4864865,18 L16,16.6 L11.027027,12 L16,7.4 Z” fill=”#000000" transform=”translate(12.000000, 12.000000) rotate(-180.000000) translate(-12.000000, -12.000000) “></path>

Solution: Open up your .svg icon into Adobe Illustrator, rotate the icon, then drag & drop back into Sketch. This removes the rotation all together.

Bug #4 Problem: using the slice tool export translate and transforms again. Solution: Nothing. Just don’t do it. It takes too long to slice anyways and is a waste of time.

Improve this answer
0
0

If you are using sub-paths, flatten the shape before exporting. I still got an error in Fontello about creating compound paths manually, but it seems to have worked correctly.

(my shape was a circle with two shapes cut out of it.)

Improve this answer
3
  • Unfortunately, you can only flatten in the shapes intersect each other. If you are using subtract, it won't let you.
    – Alex McCabe
    Nov 10, 2014 at 9:55
  • @AlexMcCabe Any news on how to flatten paths that subtract eachother?
    – Guido Bouman
    Oct 7, 2015 at 14:21
  • There wasn't anything buddy, the best thing to do is simplify your shapes as much as possible, or hand join the lines. Which is a nightmare :/
    – Alex McCabe
    Oct 9, 2015 at 9:35

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