Tyler Sticka gräbt hier im bestmöglichen Sinne tief ein: indem er eine Testseite erstellt und die Leistung buchstäblich misst. Vielleicht sind 1.000 Icons ein *kleines bisschen* ein Grenzfall, aber hey, 250 Zeilen Daten mit jeweils vier Icons erreichen das Ziel. Tyler geht in dem Beitrag sorgfältig auf die Nuancen ein. Die getesteten verschiedenen Techniken: Inline <svg>, Same-Document Sprite <symbol>s, External-Document Sprite <symbol>s, <img> mit externer Quelle, <img> mit einer Daten-URL, <img> mit einem filter, <div> mit einem background-image einer externen Quelle, <div> mit einem background-image einer Daten-URL und ein <div> mit einer mask. Puh! Das ist eine ganze Menge – und sie sind alle nützliche Techniken für sich.
Welche Technik hat gewonnen? Inline <svg>, es sei denn, die SVGs sind eher komplex, dann ist <img> besser. Darauf hätte ich auch gesetzt. Ich bin schon eine Weile auf diesem Zug.