Here’s a good comparison of inline SVG and icon-fonts.
The issue with inline SVG is that it isn’t supported in IE8 and lower. Otherwise, it should result in a smaller overall file size compared to downloading all the fontawesome icons.
3 Likes
Ah, I remember that article (from a while ago), thanks for the reminder.
We don’t need to support anything below IE9.
1 Like
Which gives stronger argument for SVG over Font-Awesome based on that article.
I just installed Dyslexie for testing purposes. First of all it’s quite annoying to install as you need to provide a home address before you can download it!
The installation recommends Firefox, but the instructions are out of date with the latest Firefox so I had to figure that out myself. Finally, I discovered that they make it work by having it override all fonts. So we can’t provide the fix @riking suggested into core as it is ignored.
I am not sure we should be bending over backwards for a solution to this proprietary font that forces people to make drastic changes to their browsing experience. I would be much more in favor of something open and standard such as adding WAI-aria tags.
Having said that, if someone wants to do the work to switch our icons to SVG and the PR shows that the performance does not degrade we would certainly accept it.
2 Likes
Try turning off the “override all fonts” setting and applying my CSS… does that work?
If you turn off “override all fonts” it doesn’t display at all on Discourse.
I like to think I am fairly good at imagining what an icon looks like by its name eg.
fa-book
fa-envelope-alt
fa-check
fa-eye-close
etc.
True not all are named so intuitively. But I think after hearing them or seeing that as alt a few times most would catch on
1 Like
SVGs are vector-based, like fonts, so they can be scaled to any size. This also means the exact same geometry a font icon uses can be used in an SVG. They can be made to be responsive in terms of scaling, but also in terms of complexity.
http://soqr.fr/testsvg/object-abs-svg-mq-bg.php
As far as file/download size, SVGs use a human readable XML variant so they can be slightly more verbose than, say, a binary file. There are ways of minifying them significantly. Traditional sprite sheeting techniques can be used with SVGs or the aforementioned “clown car” technique can also be applied for creating sprite stacks.
The only downside to SVGs over fonts that I’ve ever run into is that you can’t easily style inline SVGs the way you can fonts. For example, making them take on a different colour, text shadow, etc. This is often offset by the fact that you can use multiple colours in the icons, unlike fonts which are monochrome.
4 Likes
You leave the site, because stuff stops working.
Pretty simple solution, one I’ve used plenty of times.
Aria is invisible to most users. Which I currently blame browser vendors for, but that’s how it is today.
1 Like
ok but I can’t even begin to guess what it means (like, if it were on a button)
If we use inline SVG it’s (XMLish) markup and not image based, so it’ll work with images turned off completely… and also supports the <title> attribute, so if selected by a screen reader it’ll read whatever name we give the icon…
It’ll take a little work to implement, but we can include an SVG spritesheet in the head then call on icons like:
<svg class="icon">
<use xlink:href="#discourse" />
<title>Discourse logo</title>
</svg>
On a basic level we can generate a spritesheet of all the fontawesome icons we use today and include that file; down the road it’s probably totally possible to point to a folder of individual svg files and compile them into a spritesheet, so in theory we could have a feature where uploading new SVG icons and generating spritesheets is baked in?
12 Likes
Writeup of a big site that switched from icon fonts to SVG early 2016.
5 Likes
We did it! Introducing Font Awesome 5 and SVG icons