Consider: SVG for icons?

jpdevries commented 7 years ago

Really enjoying Mastodon's excellent user interface. I've noticed the interface uses icons in a critical manor, so I think browser support here is important.

Support Analytics

SVG actually has a better caniuse score than webfonts.

SVG 97.96% safe (screenshot)

Webfonts 95.3% safe (screenshot)

To be fair, while SVG itself is over 97% safe to use the SVG <use> syntax is not as safe:

IE9-Edge12, Safari 5.1-6, and UCWeb 11 do not support referencing external files via . Polyfills are available: server-side inlining + snippet - script

But polyfills take SVG <use> back up to 97.96% safe.

Note: Font Awesome 5 will ship with an SVG framework

The Un–Detectables

Users may leverage the user agent with user sheets or plugins that manipulate a web app's style to be more legible to them. Here is what the interface looks like when the FontAwesome font-face is overridden:

UI w/ icon font overriden (screenshot)

Mastodon Interface with empty squares where Icons should be

We have no way of detecting if a user has done this, so truth be told, web fonts are undetectably less than 95% safe to use.

Technical Difference

We'd be changing this:

<i class="fa fa-fw fa-globe"></i>

to something like this:

<svg class="icon icon-globe">
  <title>Federated Timeline</title>
  <use xlink:href="assets/img/icons.svg#icon-globe"></use>
</svg>

Pros

better browser support
- possible to achieve 100% browser support with an <image> fallback
better Art Direction
- the individual shapes of icons, not just the entire icons themselves, can be styled and animated
- the SVG sprite sheet can be generated from a folder of SVG source files, so it is easy to edit them or add custom icons
optimization, easier to include just the icons you need
<SVG> is more semantic for an icon. <SVG> is for graphics, <i> is for oblique text

Cons

icon sprite sheet can't be served from another domain (doesn't seem to matter in our case)
need to use a JS polfyill for IE (Mastodon requires JS anyways)

[x] I searched or browsed the repo’s other issues to ensure this is not a duplicate.

jpdevries commented 7 years ago

I took a swing at getting us one step closer to this in https://github.com/tootsuite/mastodon/issues/1562

One question I'd have for maintainers would be, is there a preferred toolkit for perhaps automating building a folder of SVGs into a SVG sprite? I've done this with Grunt in the past, but I know Grunt isn't used in this project.

Or would we rather include the entire font-awesome set?

nclm commented 7 years ago

Yes yes yes for SVG, it makes much more sense semantically and technically than a font. Icons fonts were sort of a hack when more browsers supported webfonts than SVG properly, but are kind of obsolete now.

That leads me to something I was thinking for a while already: move, eventually, from FontAwesome to custom designed icons. FontAwesome is fine for prototypes or when no designer is around, but at one point icons are a crucial element of visual identity, and we surely can create an icon set that is just for Mastondon. Would love to work on this!

jpdevries commented 7 years ago

move, eventually, from FontAwesome to custom designed icons

I'm all for it! Even if the first step is building our icon set from a folder of SVGs that starts off as FontAwesome SVG source files, and then we Art Direct from there.

jpdevries commented 7 years ago

The PR that takes a step towards SVG icons isn't looking like it will be merged at this time but is still up for discussion. If you 👍 or 👎 SVG icons let's discuss!

https://github.com/tootsuite/mastodon/pull/1562#issuecomment-298158538

ZoeBijl commented 7 years ago

We totally need SVG icons. I’ve web fonts disabled because internet in the uk is spotty at best. All I get on my phone is a bunch of squares when I open the Mastodon web app: Mastodon interface shows Unicode rectangles in place of web font icons

alastc commented 7 years ago

Font-icons can cause issues for people with low-vision who replace the document font-family, there are possible work-arounds but using SVG is the preferred option, so this gets my vote.

(NB: The upcoming update to WCAG might incorporate this aspect.)

hiwelo commented 7 years ago

:+1:

@alastc you can also add people with dyslexia who are using a specific font replacing all fonts on websites and web applications (it's not a low-vision issue).

And SVG offers also better ways to label the meaning of an icon which is a good thing for people with screen readers or autistic people.

ZoeBijl commented 6 years ago

What’s the status on this and is there anything I can do to help?

ZoeBijl commented 5 years ago

Hey @Gargron, this ever gonna get fixed?

Here’s an example implementation on CodePen.