discussion: font icons vs SVG icons

[jackmakesthings]

Using SVGs for icons, rather than font files, is the new hotness as far as front-end best practices go. There are a number of tools we could use to automate switching over, and to make maintaining the icon set easy - I can share lots of resources.

Here's some background reading:

https://css-tricks.com/icon-fonts-vs-svg/ http://ianfeather.co.uk/ten-reasons-we-switched-from-an-icon-font-to-svg/

[andrewstec]

I actually really like the idea of SVG moving forward. It would be nice to experiment with CSS stylings on SVG to help modernize our branding, such as changing the colour of a particular SVG graphic.

Does anyone know of any accessibility downsides to using SVG? I don't know of any at the moment, but I have heard some chatter about there being pros and cons to using SVGs versus font icons.

Could we perhaps experiment with SVG moving forward? Why not follow agile and try to experiment and fail quickly, instead of not trying something new that could add to the branding experience?

[tomharrison]

We had a couple of jam sessions about using SVGs vs. an icon font, and key take-a-ways were:

• Caching the icons as an external asset is desirable, for caching
• Using an SVG from an external sprite was fixed in IE Edge, but Thorium supports IE 11.
• Inlining SVGs is commonly abstracted with server-side helper functions, but Thorium Core is limited to the browser.
• An icon font is easier to maintain for cross functional teams with both dev & design contributors
• An icon font could be used for a limited, core set of functional icons like what's currently provided, and SVG might be leveraged later, for a larger library of extraneous/decorative icons.

Thoughts?

[andrewstec]

I'd have to agree with those takeaways. I think IE 11 sets it as a reason to wait at the moment.

I would like to see dev and design contributors work together with SVGs and see what issues they run into. I think you're right that icons are easier to maintain in cross-functional teams. I wonder if one of the reasons that it is easier to maintain is less diverse design considerations are used as a result of using icons. That is my only concern. It could hinder creativity in design. I'll let the designers be the judge of that, however, as they are more aware of how SVGs are being used for regularly in creative design. It may not really apply to our design considerations at this moment though.

I'll continue to think about this issue. I have noticed that we do not commonly use SVGs, although I hear people raving about them. Thanks for bringing it up!

[jackmakesthings]

I'm not sure what our current icon font workflow looks like, but the ones I've typically seen involve a designer creating (or finding) an svg, giving that to the devs, then the devs have to add it to the icon font, commit the updated font, etc...ultimately, there's a bit of a process to work with an icon font, mitigated by the various tools out there.

SVGs are the same story, but I'd argue they're even a little easier to handle, partially because an svg file is something any designer or dev can easily open and inspect; can't say the same of a compiled icon font .otf or .woff. We'd need to find a good workflow, but fortunately, many people have already done the legwork on that. They've also laid out a bunch of reasons why this is worth doing:

https://github.com/blog/2112-delivering-octicons-with-svg http://ianfeather.co.uk/ten-reasons-we-switched-from-an-icon-font-to-svg/ https://css-tricks.com/icon-fonts-vs-svg/