I keep hearing this debate over and over. Most of them are back-and-forth arguments about backwards-compatibility, accessibility, developer workflow, sharpness, colors, and other mostly developer-related issues. This happens when you compare apples to oranges.
Most web-masters care about speed first, customization second, browser-compatibility/accessibility last. So I’ve simplified it to this:
1. 2 or 3 Icons (svg)
All you need are 2 or 3 icons? Go SVG and you’re done.
2. Tiny everyday icons (icon font)
Most of you only need a speech cloud for the comment icon, hamburger menu, the “user” avatar, and some social media icons (10 icons or less). If this is the case, you can go with either one (icon font OR svg). Heck, you might even be able to get away with PNG.
Why is ICON FONT the best here? Because it’s easy to use, smaller size so it downloads faster, and also less complicated in the browser (loads faster to the user). You can even get a custom set at fontello of fontastic so that it loads faster (because you’re getting only the icons you want. Nobody needs the entire fontawesome library.
3. Custom icons (icon font OR svg)
Making your own custom icons, like material icons? It really depends. If you plan to have a bunch…say 30-40, font icon wins. If you plan to have 10, SVG is probably the way to go.
4. Large scalable images or multiple-colors (svg)
This is where SVG’s shine. You can make images that are intended to scale to larger sizes and use multiple colors to get a full visual graphic effect. For most folks, this isn’t even a requirement and should not be part of the usual icon font vs SVG debate!
I guess svg’s will always perform better since they can be lazyloaded. The difference might not be that big if you’re using a small icon font and utilize HTTP/2. You could test it. 🙂
twitter using icon font
I think we define “performance” differently. Lazyload doesn’t perform better to me in real world use. Loading images in a way that the user doesn’t perceive the load is the best UX. Making them wait as they skim your site quickly on mobile is annoying. And yes, I have tested it…driven our programmer mad with constant requests. Hahaha.
Our 3kb locally-loaded iconfont (only 15 icons) easily beats a bloated 70kb fontawesome 3rd party request, or even 15 super optimized SVG’s (20kb total). In case you’re wondering…it didn’t matter what we did with the SVG’s…loaded normally, base64 inline, SVG sprite. It was always heavier, more work to cache, and loaded slower.
Let me know if you’ve personally experienced different. I think at best, lazy-loaded SVG’s help you score 1% better on those page tests, have clearer rendering at large sizes, and users don’t notice their delay…but I’ve found custom iconfont to be better for me.