Test Paint Performance with 1'000 / 10'000 Icons.

Versions

• 1 SVG Inline <svg> (used iconmelon)
• 2 Icon Font (SVG, Woff, TTF - used fontcustom)
• 3a SVG Background background-image: url('path/to/icon.svg')
• 3b SVG Background Data background-image: url('data:image/svg+xml;...')
• 4a PNG Background background-image: url('path/to/icon.png');
• 4b PNG Background Data background-image: url('data:image/png;...')
• 5 WebP Background background-image: url('path/to/icon.webp');

Results

It's really hard to compare paint-performance in general. (Mostly just visual) For now I only tested in Chrome, as it is the only browser which allows you to track this kind of information. Still, to get universal results is almost impossible as the performance depends on so many factors. My results can roughly be summarized as the following (take these results with caution):

Chrome 32.0.1700.72 beta

Display 10'000 Icons

• Inline SVG and Icon Font rendered fastest
• PNG, WebP via background-image rendered approx. 33% slower
• SVG via background-image rendered approx. 100% slower

1 SVG Inline

2a Icon Font (SVG)

3a SVG Background

3b SVG Background Data

4a PNG Background

4b PNG Background Data

5 WebP Background

Chrome Beta 32.0.1700.94 (Android 4.4.2)

Display 1'000 Icons

• PNG, WebP via background-image rendered fastest
• Inline SVG and Icon Font rendered approx. 50% slower
• SVG via background-image rendered approx. 150% slower

1 SVG Inline

2a Icon Font (SVG)

3a SVG Background

4a PNG Background

5 WebP Background