This is a basic comparison between an Inline SVG fonts and Font Icons based on Chris Coyier's article Inline SVG vs Icon Fonts and the comments within. Icons are from the Font Awesome icon set.
These tests are not a perfect 1:1 comparison (styles, colors, icon selection), but meant to demonstrate the differences in the two methods. Run your own network and performance tests to draw your own conclusions on each technique.
Feel free to fork and share your findings in the Issues.
- Inline SVG adds a lot of page weight. The incomplete Font Awesome set is nearly 300kb (uncacheable since it has to be inline)
- SVG renders a lot faster on the page, which may simply be related to the SVG being inline and the font as an external asset.
- Each icon has double the amount of markup as SVG (
<svg viewBox="0 0 34 32" class="fa fa-glass"><use xlink:href="#fa-glass"></use></svg>) versus Icon Font (
<i class="fa fa-glass"></i>).
- SVG Icons need the
viewBox attribute to display at the right size. Setting a general
viewBox means the icon may have extra spacing around it since some icons will be larger than others. Font icons are sized to fit the glyph.
- Font Awesome's icons are much sharper at small sizes as a font, would need additional optimization as SVG.
- With SVG
stroke, outline versions of icons can share the same path as the original icon, though it may not look as good as a real outlined path.
- The overall complexity seems a lot steeper when trying to implement an icon set as large as Font Awesome's using the Inline SVG Method. It wouldn't be nearly as easy to have full SVG icon libraries available for users to drop into their site, primarily due to the icon markup. For a small custom built site, the inline SVG method is pretty easy to manage.
- Someone smarter than I will need to run performance testing to see how SVG Icons fare versus Font Icons.