Consider: SVG for icons?

[jpdevries]

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)

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)

---

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

[jpdevries]

I took a swing at getting us one step closer to this in #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]

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]

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]

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!

#1562 (comment)

[ZoeBijl]

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:

[alastc]

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]

👍

@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]

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

[ZoeBijl]

Hey @Gargron, this ever gonna get fixed?

Here’s an example implementation on CodePen.

[nhoizey]

A good read, if reasons for switching to SVG are still needed:
https://cloudfour.com/thinks/seriously-dont-use-icon-fonts/

[mgifford]

SVG Images are just so powerful. They are particularly good when trying to deliver for dark mode.