CSS-Tricks
Inline SVG vs Icon Fonts [CAGEMATCH]
If you're building an icon system for a site, you have some options. If you know the icons need to be raster images, then you'll likely be using CSS sprites. If the icons will be vector images (much more common these days), you have some options. Two of those options are using inline SVG and using icon fonts.
Let's compare.
Icons are Vector
There are big advantages to vector icons: resizable up and down without losing quality, extra sharp on retina displays, and small file size among them.
| Icon Font | Inline SVG |
|---|---|
Browsers consider it text, so the icons are anti-aliased as such. Can lead to icons not being as sharp as you might expect. | Straight up vector |
In a recent personal example, while converting some icons from fonts to SVG on CodePen, some of the font icons were noticeably less sharp than the ones I converted over.
CSS Control
| Icon Font | Inline SVG |
|---|---|
You can control the size (via font-size), color, shadows, rotation, etc. via CSS. | You have all the same CSS control as with a font, but better, because you can 1) control individual parts of a multi-part icon and 2) use SVG-specific CSS like stroke properties. |
The big win for inline SVG here is probably multi-color icons.
Positioning
| Icon Font | Inline SVG |
|---|---|
It can be frustrating to position a font icon. The icons are inserted via pseudo element, and it depends on line-height, vertical-align, letter-spacing, word-spacing, how the font glyph is designed (does it naturally have space around it? does it have kerning information?). Then the pseudo elements display type affects if those properties have an effect or not. | SVG just is the size that it is. |
Weird Failures
| Icon Font | Inline SVG |
|---|---|
An icon font might fail because 1) it's being loaded cross-domain without the proper CORS headers and Firefox doesn't like that 2) for any reason, the font file fails to load (network hiccup, server failure, etc) 3) There is some weird Chrome bug that dumps the @font-face and shows a fallback font instead 4) Surprising browser doesn't support @font-face. Font failures are pretty common for a variety of reasons. | Inline SVG is right in the document. If the browser supports it, it displays it. |
Semantics
| Icon Font | Inline SVG |
|---|---|
To use responsibly, you're injecting the icon via a pseudo element on an (empty) <span>. Either bad or no semantics, depending on how you feel about that kind of thing. | Icons are little images. The semantics of <svg> says "I'm an image." Seems better to me. |
Accessibility
| Icon Font | Inline SVG |
|---|---|
You have to be quite careful with icon fonts to make sure you do it in an accessible way. You should basically do everything in this article. You're always fighting to make sure that the icon itself isn't read (but something else is) and that hard-to-detect fail states are handled. | I'm no expert, but research suggests using the proper combination of elements and attributes ( <title>, <desc>, and aria-labelledby) you can convey good information across the browser specturm. Plus no weird fail states. |
Ease of Use
| Icon Font | Inline SVG |
|---|---|
Using a pre-created icon font was never particularly responsible (too many unused icons). Creating your own icon font was never overly comfortable. I think the best were Pictos Server (limited to Pictos icons) and IcoMoon (free login to save projects). Fontello has an API I didn't see it used to make a good build tool. | The inline SVG system is easier because you can do it all by hand if needed. Or use a tool like IcoMoon (exports either way). Or use a build tool. |
Browser Support
| Icon Font | Inline SVG |
|---|---|
Very deep. Even IE 6. | Decent, but problems are IE 8- and Android 2.3-. Fallbacks doable but not wonderful. |
Winner
It all comes down to browser support. If you can go IE 9+ / Android 3+, inline SVG is better at pretty much everything than icon fonts. If you need the deeper browser support, I feel like an inline SVG fallback would be too big of a pain to be worth it (maintaining a PNG copy, inserting an additional element to display PNG version, hiding SVG element... it's weighty).
Inline SVG vs Icon Fonts [CAGEMATCH] is a post from CSS-Tricks
Keine Kommentare:
Kommentar veröffentlichen