We still remember back in the days when we were first using jpg and png images for icons and a decade later came the CSS icons associated with fonts.
CSS icon fonts have been on the web for quite a while now and does add some appealing visual display to our website.
However, in terms of accessibility, one big issue is that they don’t convey any meaning unless we add invisible text so that it gets pick up by a screen reader. This is where SVG icons do a better job at being a semantic element that is recognized by screen readers. For the most part, it is also supported by all the major browsers.
- Accessibility
SVGs have a semantic structure which means we can add a meaning and it’s recognized by the screen reader
- Performance
Lots of people are complaining that we have to include all the icons from the font files such as FontAwesome but there are other alternatives out there where you can pick whatever icons you desire and create the files on the fly.
SVGs are added just like an image but remember, they are not cached by the browser.
- Compatibility
Most of the browsers support SVGs and also don’t forget to add this mime-type to the Apache server if it’s not there already.
- Flexibility
The color and animation can be manipulated easily on SVGs as opposed to CSS icon fonts
As a matter of fact, the major grid framework Bootstrap is already adopting SVG in their V4.0. We can tell that SVG icons will be the prefered way to go for the future but CSS icon fonts are far to be deprecated. They can and will still serve some purpose including decorative and dynamic controls where lots of SVGs could potentially slow down performance. We believe that it is important to analyze on a case by case basic in order to determine which one is better in terms of Accessibility, Performance, Compatibility and Flexibility.