Material Icons Bezier Paths

Jim Parrillo
Jim Parrillo Posts: 10
in Technique and Theory
Has anyone else opened up the Google's Material Icons and looked inside them?

Does anyone know of a 'cleaned up' version that is available and not so... wonky?  :s


Comments

  • Adam Jagosz
    Adam Jagosz Posts: 689
    edited November 2019
    Icon fonts are quick and handy, but I usually go for the SVG solution. https://material.io/resources/icons/?search=help&icon=help_outline&style=baseline
    Your example is a TrueType (quadratic Bezier) export, try PostScript (cubic, .otf) if you can find any.
  • Jim Parrillo
    Jim Parrillo Posts: 10
    edited November 2019
    OK - Thanks. Yeah - I do the same with .svg whenever possible. I've only seen the font files available as .ttf on GitHub - never seen anyone post it as .otf

    I had to create some new specialized icons for the web dev team here, and the web exports looked fine, so I'm guessing I will just have to create a fork on Github and clean them up as a long term project. Not hard - just tedious. :# 
  • Adam Jagosz
    Adam Jagosz Posts: 689
    edited November 2019
    All I see there are SVGs (and a bunch of PNGS, XMLs... I didn't dive into all of it).
    By cleanup, do you mean conversion to PS? I don't see anything 'wonky' in the OP, just regular everyday normal TT outlines.
  • Adam Jagosz
    Adam Jagosz Posts: 689
    What software are you using to edit? Glyphs?
    This is how the svg is opened in Inkscape.



  • Thomas Phinney
    Thomas Phinney Posts: 2,899
    @Adam Jagosz There seem to be fonts here: https://github.com/google/material-design-icons/tree/master/iconfont

    SVG graphics can be designed with either cubic (PS style) or quadratic (TT style) curves. Opening one of the source SVG files, in this case, it see code for cubic curves.

    Although the circles are lovely in the quadratic version shown by @Jim Parrillo above (using the minimum 8 points vs the 12 in the cubics), I see how the inner curve of the question mark is ... janky. Looks kind of like something got rounded to grid during conversion, perhaps with not enough resolution.
  • Georg Seifert
    Georg Seifert Posts: 674
    I think the jankyness comes from a cubic to quadratic conversion that is not checking for the inflection point. Because that is quite difficult, it is easier to always add an explicit point at the inflection.
  • André G. Isaak
    André G. Isaak Posts: 634
    That particular glyph isn't at bad as some. Here's a slightly more heinous example (n.b. my file dates to 2015 — it may have been updated since then)


Categories