Use quadratic beziers for smoooooooooooooth curves

[cameronmcefee]

It's been bugging me for a while that certain icons seemed to be having their paths adjusted when being converted to a font. After seeing a few tweets mentioning the "sloppy" vectors gasp I finally looked into what the cause was.

The source files look great, and after some testing, the SVG font looked fine. With some helpful advice I learned that there are two types of beziers: cubic and quadratic. It seems TTF files need the quadratic bezier, but when designing icons in Illustrator, there's nothing stopping you from creating cubic ones. We use https://github.com/fontello/svg2ttf to do the SVG -> TTF conversion, which attempts to do the cubic -> quadratic math, but in some cases it doesn't quite preserve the shapes.

Essentially it comes down to this:

Having a smooth curve on each end of the arc is important. Without it, the curve bends strangely on the end with the curve, and meets the other edge with a sharp corner when viewed as a TTF.

I've gone through the icons and fixed all of the offending vectors I can find. Things look pretty crisp in the TTF now. If you happen to see any others, let me know.

[arfon]

⚡ is this also the cause of the weird misalignment on the Octocat icon from a while ago?

[cameronmcefee]

I don't believe so. That issue resolved itself when I switched from the old build process to the new one a few months ago. During the switch, I changed from a library that did an SVG transformation to one that literally recalculates the curves. Since the strange cutoff you would see in that icon only happened at certain font sizes, I'm guessing that the original transformation was setting the icon a few units too high, just enough to mess with the aliasing.

[arfon]

That issue resolved itself when I switched from the old build process to the new one a few months ago.

Good stuff. Anyway, loving these quadratic bezier curves...