Skip to content

Instantly share code, notes, and snippets.

@i-like-robots
Last active December 18, 2015 15:39
Show Gist options
  • Save i-like-robots/0ae95435a4b68fbffd04 to your computer and use it in GitHub Desktop.
Save i-like-robots/0ae95435a4b68fbffd04 to your computer and use it in GitHub Desktop.
Comparison of SVG and font based icons

Webfont vs. SVG icons

Comparison

Font icons

Positives Negatives
Great browser support _
Easy for end users to implement _
Small file size _
_ No context if they fail to load...
_ ...Or user overrides fonts^1
_ Rendering inconsistent between systems (antialiasing)
_ Not supported in Opera Mini

SVG icons

Positives Negatives
No conflict with fonts _
Consistent rendering between systems _
Fixed colours and sizes* Fixed colours and sizes*
_ No context if they fail to load^2
_ Larger filesize, slower to render than a webfont
_ Slightly more complex for end users to implement
_ Advantages of SVG lost by need for fallback^3

* With a design leadership hat on this is a positive IMO

  1. Potentially solved by using ligatures but that drops support for <= IE9 (text-only fallback)
  2. Could be solved by forcing end-users to implement text by displaying an error with :empty pseudo-selector
  3. Could supply text-only fallback to non-SVG capable browsers (IE8, Android 2.x)

Anything I've missed?

@wheresrhys
Copy link

@rowanbeentje
Copy link

When using font icons it's incredibly easy to change colours using CSS. As you've pointed out for SVG this can be a negative as well (design consistency!) but it also makes it very easy to display different states, animate changes, or invert colours to provide a reasonable contrast with varying backgrounds.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment