Ten reasons we switched from an icon font to SVG(ianfeather.co.uk)

over 8 years ago from Mikey Clarke, Designer/developer at BaseKit

  • Julian LloydJulian Lloyd, over 8 years ago

    I spent some time working with SVG in lieu of an icon font just this past week—and it was great.

    I ran into a couple oddities with CSS transforms and SVG in some places, but I’m sure with more tinkering I’ll iron the bugs out.

    1 point
    • Dirk HCM van BoxtelDirk HCM van Boxtel, over 8 years ago

      I wish I could share your enthusiasm, and I kind of do, but there's that gnawing browser-support issue in the back of my mind that makes SVG a bit of a "dirty" solution to me.

      Note those last two words, "to me". I'm stuck with several projects that have target audiences that use older browsers, so my opinion is biased as hell.

      Having said that, it's comments like yours that make me want to push forward on SVG icons. They're just so mouth-wateringly useful.

      1 point
      • Julian LloydJulian Lloyd, over 8 years ago

        Icon fonts are still easier to use for me, but I see things like this and like you say, I can’t deny SVG’s appeal.

        I’m sure you‘ve see this, but CSS Tricks goes over Using SVG (and some fallback techniques) that were helpful in getting things off the ground.

        1 point
        • Dirk HCM van BoxtelDirk HCM van Boxtel, over 8 years ago

          Yeahp. I used the color-changing kiwi bird SVG to illustrate a key reason why I wanted to use SVG to my manager. We have some white-label products where styling changes allow us to customize applications to fit specific brands. A sprite that changes color with a single line of CSS would be insanely useful.

          1 point
    • Tj TanTj Tan, over 8 years ago

      Visually I really like the rendering consistancy of SVG compared to icon fonts. But the front-end dev was a big advocate about the file size savings of icon fonts (About 100kb difference). Ultimately we went with icon fonts.

      1 point
      • joe andersonjoe anderson, over 8 years ago

        This doesn't sound right if the SVG is hardcoded with paths and doesn't need to be requested as a file. It's just a set of dom elements. You save a lot of time not making a request to fetch the font file.

        Hope someone else can chime in on this

        0 points
      • Marc EdwardsMarc Edwards, over 8 years ago

        But the front-end dev was a big advocate about the file size savings of icon fonts (About 100kb difference). Ultimately we went with icon fonts.

        Make sure you’re comparing apples with apples.

        Icon fonts are definitely small, but SVGs can be arranged in sprite sheets, can be optimised to remove some of the junk (if saved from Illustrator), and they can be gzipped. By the time you’ve done all that, I doubt there’s going to be much difference to the already tiny files.

        If your dev is citing this article as evidence, take note that there’s no mention of sprite sheets and that the file sizes show are all tiny for 50 icons.

        0 points