Should we switch to SVG icons?

nickcernis commented 8 years ago

Is it worth considering a switch to SVG icons instead of using an icon font?

The benefits

Some perks of SVG icons, largely from Tyler Sticka's Don't Use Icon Fonts:

They don't fail and render as boxes or empty space. (This continues to be a problem in support.)
Much better screenreader support.
Better experience for dyslexic readers (who sometimes change the default browser font).
Less likely to see conflicts with other unicode characters. (I haven't seen this in support yet, but apparently it's an issue with icon fonts, which resulted in the famous “four and a horse stars” bug.)

IcoMoon can already generate SVG icon packs instead of icon fonts, so it may not be too hard to manage.

Sara Soueidan also offers a very compelling list of benefits for SVGs over icon fonts in this article on the Adobe blog: http://blogs.adobe.com/dreamweaver/2015/09/css-vs-svg-the-final-roundup.html

SVGs are more semantic. An SVG is an image and the icon is thus marked up as one.

SVG icons look crisp and clear on all screen resolutions.

SVG icons provide you with more control over SVG icon styles (multi-color icons). Individual SVG shapes can be selected and styled using CSS. Sure, there are some limitations depending on the way you embed the SVG, but this is going to change in the future. (I wrote an article about that on Codrops.)

SVG icons can be animated & interactive. Shape morphing (see coming section) and other kinds of complex animations are not even close to possible in icon fonts.

You can provide PNG fallback for SVG. So those couple of browsers that don’t support it will always get something to fall back to.

SVGs are generally consistent across browsers (unlike icon fonts).

SVGs are easier to create, embed, and maintain.

SVGs are accessible. SVG comes with set of accessibility elements that improve the accessibility of its content. You can learn more about them here.

Chris Coyier has a detailed cage match of SVG vs icon fonts here: https://css-tricks.com/icon-fonts-vs-svg/. He concludes that SVGs are better for everything as long as you're targeting IE9+ and Android 3+. (If you need to target IE8 or older Android, icon fonts offer easier compatibility.)

GitHub is one of the companies moving from icon fonts to SVGs for the above reasons. (Ref: https://twitter.com/SaraSoueidan/status/674298533667807232 )

Edit: GitHub now has a post here that talks about the benefits of the switch and the method they used: https://github.com/blog/2112-delivering-octicons-with-svg

Solving the “can you add an icon for X?” problem

SVG icons could help us solve a big problem we currently have with extensibility. Users are increasingly asking us to add new icons to the plugin, some of which we only see one request for. (They are typically for social networks that only exist in one country, or for ones that turn out to be really popular that I've never even heard of, which makes me feel very old.)

With SVG icons, we could potentially offer the ability to drop an SVG in a user accessible folder (like themes/their-theme/simple-social-icons/hip-new-social-network.svg), scan that folder, then have that appear as a pickable icon in the widget area. This could help solve the problem of scaling up our icon support without creating clutter in the widget UI. (We could also let users override the default icons this way, by dropping a facebook.svg icon into that same folder, for example.)

Challenges

If we do go down this route, I think we'd need:

A new interface for the widget UI. I suggest we drop the labelled fields for each network. In their place, we could offer an “add new icon” button that would spawn a row containing an icon picker, an empty field to enter the URL, a draggable control for reordering, and a way of deleting that row. Users would pick their icon from a picker, fill in the URL, and save their changes, instead of having to find the relevant row for that network and leave a bunch of the others empty.
An approach to tackle upgrades. Many users have customised the plugin with the simple_social_default_glyphs filter. We need to make sure this still works, or that an alternative is presented and communicated. It may even be easier to launch this as a separate plugin and tell people about the upgrade via an update to the original plugin. (Although that has implications for Rainmaker.)

In short, it feels like SVGs could solve a lot of issues for us, while improving accessibility and reducing support requests in the long-term.

2aces commented 8 years ago

+1 for changing for SVG.

Let's not forget the page load speed improvement that it might bring.

bgardner commented 8 years ago

@nickcernis On Friday, @laurenmancke submitted a PR (https://github.com/copyblogger/simple-social-icons/pull/28) which replaces the icons with SVG support, and she also added icons that were requested.

I've pulled down and tested the latest version per her changes and just wanted to give you a chance to do the same before I give @nathanrice the go-ahead to merge the PR and update the plugin in the repo.

nickcernis commented 8 years ago

Thanks, @bgardner! I saw the note in Trello and plan to test this tomorrow at the latest. Will post an update here once that's done.

bgardner commented 8 years ago

Roger that @nickcernis, thanks!

nickcernis commented 7 years ago

@bgardner Reviewed and looks good. :-) Just a couple of small suggestions at https://github.com/copyblogger/simple-social-icons/pull/28#issuecomment-248262801 to smooth the upgrade process and removal of the simple_social_default_glyphs filter.

bgardner commented 7 years ago

Closing via https://github.com/copyblogger/simple-social-icons/commit/9a6e92242643f2834f026eee2321967503e208b1

osompress / simple-social-icons