Sistema de Sprites SVG: Un solo archivo, todos tus iconos

Un cliente me contactó con un panel de control que se sentía lento. Pero no lo era: las respuestas de la API tardaban menos de 100 ms y el paquete JavaScript tenía un tamaño razonable. Sin embargo, el navegador realizaba 47 peticiones distintas únicamente para los iconos. Cada uno era un archivo SVG de 2 KB, cada uno con su propio recorrido de ida y vuelta HTTP. En una conexión 4G, eso suponía 600 ms adicionales de carga de página solo para descargar iconos pequeños.

Desarrollé un sistema de sprites SVG que fusionó los 47 iconos en un único archivo. La página pasó de 47 peticiones de iconos a una sola. Aquí explico cómo lo hice y por qué es más importante de lo que parece.

Qué es realmente un sprite SVG

Un sprite SVG es un único archivo SVG que contiene varios elementos <symbol>, cada uno con un identificador único. En lugar de cargar 47 archivos separados, cargas un solo archivo sprite una única vez (el navegador lo almacena en caché automáticamente) y llamas a cada icono individual mediante su ID:

<svg> <symbol id="icon-search" viewBox="0 0 24 24"> <path d="M15.5 14h-.79l-.28-.27A6.47..."/> </symbol> <symbol id="icon-user" viewBox="0 0 24 24"> <path d="M12 12c2.21 0 4-1.79..."/> </symbol> </svg>

Para usar un icono en cualquier parte de la página:

<svg><use href="/sprite.svg#icon-search"></use></svg>

Eso es todo. Una única petición HTTP para el archivo sprite, almacenado en caché indefinidamente, y cada referencia a un icono se carga al instante. El elemento <use> clona el símbolo en su posición sin realizar ninguna activid

Written by Jamie Park — UI/UX designer who measures things in HTTP requests. More about me →