6 ms·

I happen to really hate SVG. I've been feeling like it's a standard that should have gone away 20 years ago. So in many cases where I'm building a website for

I happen to really hate SVG. I've been feeling like it's a standard that should have gone away 20 years ago. So in many cases where I'm building a website for a brand where they have lots of icons that need to scale, I create a font with the outlines of all their icons. This is great for lots of reasons. The employees at the company can use the font when they need to drop in a corporate icon into a blog post. I can then maintain a repository for the font and the company can use those vector icons anytime in simple documents. So yeah, user-defined web fonts are the shizz.

bryanrasmussen 5y ago
>I happen to really hate SVG. I've been feeling like it's a standard that should have gone away 20 years ago. What vector format should have replaced it? I personally think the W3C should just have accepted VML, not because I think it is better but because it was already widely supported (IE, and with a little work Netscape on Windows) so at the time it would have taken less work to get Vector graphics (for Netscape to add support on other platforms). But then I am more a bazaar type of person than a cathedral type.
- noduerme 5y ago
  I'm not sure if the downvotes are because I like making fonts out of icon sets, (really: useful practice!) or because I went against SVG. Look, SVG is fine for moving shape files around if something won't handle EPS. But it's an all-purpose vector definition that is by design not optimized to any purpose. It's shitty for replacing fonts, backgrounds, or animations that could be done in more compact domain specific formats. As someone who came up doing animation in Flash, just... don't even bring up SVG. I'm a lot happier to animate all my beziers and points in code in something like PixiJS than lean into a bloated format designed for... what is SVG for? Uploading t-shirts to cafepress or something?
  - bryanrasmussen 5y ago
    don't know about the downvotes, maybe it's the use of the slang. I guess I like SVG fine enough, but probably that is because I am unfamiliar with working intensively with other formats. on edit: when saying maybe it's the use of the slang it's just to indicate my general feeling that HN downvotes are an insoluble mystery, even someone as wonderful as I gets downvoted at times, and is that fair? The answer is no, it sure isn't.
    - noduerme 5y ago
      Hah. Well I know, you're never supposed to ask on this board. Sometimes I just get taken by surprise though... like, there are really people with strongly positive views about SVG out there? Now I'm curious who they are and why they like it.
  - addaon 5y ago
    What's the story for accessibility in font-based icon sets? Do you bind the glyphs to long self-descriptive ligatures or something?
    - noduerme 5y ago
      No, generally we just have a few dozen at most per font, so we put them in the latin alphabet where they'll be relatively easy to find, and then keep a corresponding SCSS file where each is mapped to a single character of content by a descriptive name, similar to how FontAwesome does it.
      - addaon 5y ago
        What does a screen reader do with that? Not familiar with SCSS.
        noduerme 5y ago
        That's a reasonable question. I don't know. As a ::before content some readers might issue a verbal hiccup, but they're generally never used in inline text; they're isolated in a div tag of their own as graphical elements, the way an SVG graphic would be. I'm struggling to think of a case where they'd ever need to be read out loud, but if there was you could add aria tags. It's usually used inside a header or float that isn't meant to be printed or read aloud.
eesmith 5y ago
What little I know on the topic comes from Seren Davies talk "Death to icon fonts" from EpicFEL 2015 at https://www.youtube.com/watch?v=9xXBYcWgCHA https://www.youtube.com/watch?v=9xXBYcWgCHA . She points out a few failure cases with icon fonts, like 1) uninterpretable by screen readers for the blind, and 2) don't work well for dyslexic people who have configured their browser to use specialized fonts that are easier to read. How do you handle these cases?
- j16sdiz 5y ago
  Awesome font have a section on accessibility https://fontawesome.com/v5.15/how-to-use/on-the-web/other-topics/accessibility https://fontawesome.com/v5.15/how-to-use/on-the-web/other-to...
  - eesmith 5y ago
    Thanks! I see it's doable, with about the same effort as using SVGs.
    - noduerme 5y ago
      The great part is that unlike SVGs you don't need to include specific image files for each one, or worry about updating those files across lots of systems. Just update the font. Client wants to use their icons in their printed pieces? Just give them that font rather than a whole bunch of files. Include the font with articles for print, and the printer can outline all the graphics. Tl;dr, fonts are just a fantastic way to bundle lots of vector files on a per-client basis. Plus most clients feel super special and cool that they have their own font! And the tech we use is old. Old. We maintain these in FontForge, which is a Mac X11 app.

bryanrasmussen 5y ago

>I happen to really hate SVG. I've been feeling like it's a standard that should have gone away 20 years ago. What vector format should have replaced it? I personally think the W3C should just have accepted VML, not because I think it is better but because it was already widely supported (IE, and with a little work Netscape on Windows) so at the time it would have taken less work to get Vector graphics (for Netscape to add support on other platforms). But then I am more a bazaar type of person than a cathedral type.

noduerme 5y ago
I'm not sure if the downvotes are because I like making fonts out of icon sets, (really: useful practice!) or because I went against SVG. Look, SVG is fine for moving shape files around if something won't handle EPS. But it's an all-purpose vector definition that is by design not optimized to any purpose. It's shitty for replacing fonts, backgrounds, or animations that could be done in more compact domain specific formats. As someone who came up doing animation in Flash, just... don't even bring up SVG. I'm a lot happier to animate all my beziers and points in code in something like PixiJS than lean into a bloated format designed for... what is SVG for? Uploading t-shirts to cafepress or something?
- bryanrasmussen 5y ago
  don't know about the downvotes, maybe it's the use of the slang. I guess I like SVG fine enough, but probably that is because I am unfamiliar with working intensively with other formats. on edit: when saying maybe it's the use of the slang it's just to indicate my general feeling that HN downvotes are an insoluble mystery, even someone as wonderful as I gets downvoted at times, and is that fair? The answer is no, it sure isn't.
  - noduerme 5y ago
    Hah. Well I know, you're never supposed to ask on this board. Sometimes I just get taken by surprise though... like, there are really people with strongly positive views about SVG out there? Now I'm curious who they are and why they like it.
- addaon 5y ago
  What's the story for accessibility in font-based icon sets? Do you bind the glyphs to long self-descriptive ligatures or something?
  - noduerme 5y ago
    No, generally we just have a few dozen at most per font, so we put them in the latin alphabet where they'll be relatively easy to find, and then keep a corresponding SCSS file where each is mapped to a single character of content by a descriptive name, similar to how FontAwesome does it.
    - addaon 5y ago
      What does a screen reader do with that? Not familiar with SCSS.
      - noduerme 5y ago
        That's a reasonable question. I don't know. As a ::before content some readers might issue a verbal hiccup, but they're generally never used in inline text; they're isolated in a div tag of their own as graphical elements, the way an SVG graphic would be. I'm struggling to think of a case where they'd ever need to be read out loud, but if there was you could add aria tags. It's usually used inside a header or float that isn't meant to be printed or read aloud.

eesmith 5y ago

What little I know on the topic comes from Seren Davies talk "Death to icon fonts" from EpicFEL 2015 at https://www.youtube.com/watch?v=9xXBYcWgCHA https://www.youtube.com/watch?v=9xXBYcWgCHA . She points out a few failure cases with icon fonts, like 1) uninterpretable by screen readers for the blind, and 2) don't work well for dyslexic people who have configured their browser to use specialized fonts that are easier to read. How do you handle these cases?

j16sdiz 5y ago
Awesome font have a section on accessibility https://fontawesome.com/v5.15/how-to-use/on-the-web/other-topics/accessibility https://fontawesome.com/v5.15/how-to-use/on-the-web/other-to...
- eesmith 5y ago
  Thanks! I see it's doable, with about the same effort as using SVGs.
  - noduerme 5y ago
    The great part is that unlike SVGs you don't need to include specific image files for each one, or worry about updating those files across lots of systems. Just update the font. Client wants to use their icons in their printed pieces? Just give them that font rather than a whole bunch of files. Include the font with articles for print, and the printer can outline all the graphics. Tl;dr, fonts are just a fantastic way to bundle lots of vector files on a per-client basis. Plus most clients feel super special and cool that they have their own font! And the tech we use is old. Old. We maintain these in FontForge, which is a Mac X11 app.