Tyler Sticka profundiza aquí de la mejor manera posible: haciendo una página de prueba y midiendo literalmente el rendimiento. Tal vez 1,000 íconos sea un caso marginal, pero bueno, 250 filas de datos con cuatro íconos en cada uno lo llevan allí. Tyler cubre los matices cuidadosamente en el post. Las diferentes técnicas probadas: en línea <svg>, sprite del mismo documento <symbol>s, sprite de documento externo <symbol>s, <img> con una fuente externa, <img> con una URL de datos, <img> con un filter, <div> con un background-image de una fuente externa, <div> con un background-image de una URL de datos y una <div> con un mask. ¡Uf! Eso es mucho, y todas son técnicas útiles por derecho propio.
¿Qué técnica ganó? En línea <svg>, a menos que los SVG sean bastante complejos, entonces <img> es mejor. En eso habría apostado mi dinero. He estado en ese tren por un tiempo.
Enlace directo →