Icons - Font, Inline SVG or Background SVGs ?

Tl;dr; Which type of Icon is better - Font Icons, Inline SVGs, or Background SVGs ? View Results Below

Traditionally, icons on a web page have been drawn using bitmaps images (png, jpg, etc). These images are often stitched together to deliver them faster over the wire. However,  bitmaps do not scale well on different screen resolutions - a problem for responsive web pages.
Font Icons have proved to be a great alternative with many popular UI frameworks bundling fonts with icons. Another common alternative is to use SVG; the purpose of SVG is to draw scalable vector graphics anyway!
While there has been a good amount of research about optimizing network performance of Fonts Icons or SVGs, I could not find data that talks about the performance of these icons after they have been sent and rendered on the browser.

Background

It started out as a conversation on twitter and turned into a fascinating experiment.
The first set of tests were on a single icon, using this repository. To make the results more comprehensive, I expanded the tests to cover all the icons in the Ionic icon font.

The experiment

Which type of icon allows 60 frames per second - Font Icons, Inline SVG or SVG in CSS background images ?
The test candidates are
  • Font Icons - a font file embedded in a HTML page using <link> and the icon usually created using a class
  • Inline SVG - SVG markup for the icon embedded into the web page
  • Background SVG - SVG inserted as a data:uri in a class applied to repeated elements on the web page
The web page had each of these icons repeated multiple times making the page long enough to scroll.

Test environment

The tests were run on the Icons for Ionic that are available as SVGs and a Font.
For each icon, 3 web pages were created, one each using font, inline svg and background svg. These pages were hosted on a static web server and accessed from Chrome over a LAN. The tests were run on Chrome 41 on an Android Nexus 7 device, with all other applications closed.
The tests were driven by selenium using brower-perf. Each test waited till the page was loaded on chrome to eliminate network anomalies. Each page was then scrolled and data was collected from chrome timeline and tracing using browser-perf.
The repository is available on github, and the README file has instructions on running the tests in your environment to get results. If you have run the tests, please do ping me and we could compare the results.

Results  #

Running each test multiple times, and watching trends for each of 733+ icons should eliminate noise in the data we may have. Here are some of the trends that I noticed. Basically, the performance order was, from best to worst was
Font Icons > Background SVG > Inline SVG
  • The frame rates were best for Font Icons and worst for inline SVGs, when measured using request animation frame, and using tracing benchmarks. There were cases when fontIcons and backgroundSVG were pretty close.
  • While results for time spent for CompositeLayers was not conclusive,  Layouts and Paints showed consistently that inlineSVG took the max time. For paints, Background SVGs consumed the least time on painting, while the best candidate for Layout was not conclusive.
  • Background SVGs seem to have one paint event for each icon drawn on the screen.
  • Layout for all of them was steady since there was no change in the DOM positions of the icons once the page was loaded. 
  • Only the background SVG had a paint event, and a Paint Image event for each icon drawn on the web page
  • Inline SVGs are also rasterized the most.
  • Time for request animation frame was maximum for Inline SVGs, while time for FireAnimationFrame is it inverse
  • Background SVGs took the maximum time for updating Layers. 
The raw results can be downloaded and are available in this spreadsheet. The results are best viewed when the file is downloaded and opened in a spreadsheet program; I found the Web viewer too slow for so much data.

Extrapolating the results, I may conclude that
  • Background SVG and fonts are treated like images, and inline SVG is expensive possibly because of the extra DOM nodes that can be later modified.
  • Background SVGs data URIs are similar to png or other data URIs, just that they also scale.
  • Number of nodes in SVGs seems to have no correlation to the data, possibly because the number is very small to have a significant impact.

Conclusion 

Looking purely from a performance perspective, fontIcons seem to perform the best. However, they cannot be manipulated like inline SVG icons and are restricted to animating as a single unit. As with any web performance experiment, these are interesting results, but when using it on your site, may be they should be tested (with something like browser-perf), just to be sure !!
Watch out this space for my other experiments with performance. 



Posted by at
Labels: