Death to Icon Fonts(speakerdeck.com)

over 4 years ago from Catalin Cimpanu

  • Chris NewtonChris Newton, over 4 years ago

    If you draw your SVGs at the size they’ll appear, that’s not an issue.

    If you draw bitmap graphics at the size they’ll appear it’s not an issue either, but isn’t the major advantage of vector graphics in this context supposed to be that you only have to draw them once and they scale?

    I have never needed or wanted that requirement.

    Genuine question: Do you do a lot of work with icons? It’s not often that I could see using the same style at say 96x96px for a high-dpi display and 32x32px or even 16x16px on a low-dpi display. Like working with optical fonts designed for use with captions or large displayed text, you can use finer, more subtle details with larger pixel counts, but with smaller sizes I find a simpler design without a lot of detail or stylised effects often works better.

    Worth noting that you can do that with SVG as well.

    Not really, unfortunately. Those techniques are far from portable: having just tested before writing this, only some work with current Chrome, and none with current Firefox. Even if it worked everywhere, the same SVG with all possible variations is used with that sort of media query technique, which would be an issue if we want to use greater numbers of detailed images without wasting bandwidth.

    Really?

    I’m afraid so. Rendering glitches are widespread, even with the most simple things like putting an arrowhead on a line. There are clearly some rounding issues in how different shapes are positioned/joined in some browsers. Also, the performance of SVG leaves much to be desired in some browsers, most often Chrome and Firefox in my experience. A single image might work fine, but try working with many small images and doing things like animation or hooking up lots of events to make something interactive, and the cracks show all too easily. To give credit where it’s due, the browsers do seem to be getting a little better with time, but we’re a long way short of the ubiquitous, reliable support that something like PNG enjoys across all major browsers today.

    0 points
    • Marc EdwardsMarc Edwards, over 4 years ago

      If you draw bitmap graphics at the size they’ll appear it’s not an issue either, but isn’t the major advantage of vector graphics in this context supposed to be that you only have to draw them once and they scale?

      It’s common for the other resolution targets to be exact multiples. If you draw your SVG at 1×, you don’t have to worry about snapping to the 2× grid.

      Do you do a lot of work with icons?

      Yes.

      we’re a long way short of the ubiquitous, reliable support that something like PNG enjoys across all major browsers today.

      That’s a fair point, but I really haven’t had any issues that mattered. A big part of it is choosing when to use SVG vs a bitmap. I freely admit that icon fonts have their place as well, although I’m not as keen on using them as you are.

      0 points
      • Chris NewtonChris Newton, over 4 years ago (edited over 4 years ago )

        Thanks for linking to your site. I think I see why our experiences might differ now.

        I do a fair bit of work with user interfaces, mostly web-based lately, so I wouldn’t necessarily assume any convenient ratios between icon sizes — of course there are similarities, but each job has its own requirements. Sometimes I’d go down as small as maybe 20x20 or 16x16 pixels, perhaps for use on diagrams or charts, or maybe as an annotation that needs to fit with body text sizes.

        To borrow an example from your post, at such a small size it would be difficult to maintain the clarity you have at the sizes you show there. Directly scaling down to 16x16 would keep the current proportions and the stylised “S” shape would become just an antialiased smudge/dot in the middle. So in this case, it might make sense to use a modified design preserving that distinctive shape as the main part of the icon, probably at the expense of the circular frame and coloured background. I’d also experiment with whether to keep the subtle gaps in the letterform.

        I do appreciate that this icon looks like it’s used for branding rather than UI, so the kind of scenario I’m thinking of might not apply in this particular case and adapting the design might have concerns of its own, but please try to imagine similar issues as they might apply to, say, icons indicating that a certain behaviour is active or a certain warning condition exists in a UI, where preserving the meaning and the clarity of the basic symbol is paramount.

        I freely admit that icon fonts have their place as well, although I’m not as keen on using them as you are.

        Sorry, I’ve apparently given a misleading impression. I don’t much like icon fonts and rarely use them at all, because of the accessibility issues and the monochrome limitation. I think in principle SVG should be a much more appropriate tool for this kind of job, I’m just acknowledging that in practice scaling down to very small sizes has its limitations in SVG because of the lack of hinting and because of performance concerns if you use a lot of SVG images at once in some browsers.

        0 points