Qué son, cómo crear y utilizar sprites de SVG

Cuando inicias un proyecto todo es campo y hay cantidad de posibilidades y dudas razonables que te abordan. En nuestro caso suelen ser relacionadas con la madurez de los navegadores web; si soportarán Grid Layout o tal o cuál método de JavaScript y cosas por el estilo, porque por un lado nos gusta premiar a los usuarios con una mejor experiencia y por otro, nos gusta probar cosas nuevas.

Durante algún tiempo debatimos si era el momento de dejar de lado las fuentes de iconos (que tan buenos ratos nos han dado) y empezar a utilizar sprites de svg, y desde hace más de un año ese tema quedó zanjado :D

Lo básico de los sprites de imágenes y los sprites de svg

El sprite de imágenes es un concepto importado del desarrollo de videojuegos que consiste en unir en una única imagen todas las imágenes que vamos a necesitar, por ejemplo para animar un personaje. En ésta imagen están todas las posiciones posibles del personaje y se mueve el sprite en un contenedor para generar la sensación de movimiento.

Sprite de imágenes de Sonic

En el desarrollo web se ha utilizado de la misma manera. Una imagen contiene los recursos necesarios; iconografía, imágenes de fondo, etc. Y la usamos posteriormente con las propiedades CSS background-image y background-position. Existe también la posibilidad de animarlas creando una secuencia con steps().

Sprite de imágenes de Google

Pero el sprite de svg es diferente principalmente porque no lo usamos a través de CSS sino que incluimos las imágenes en el HTML con las etiquetas <svg> y <use>.

En ambos casos, la gracia es que aunque es una imagen más grande también es una única petición al servidor, lo cuál suele suponer un gran ahorro y una mejora en la performance de la página.

Por qué pasar de las fuentes de iconos

Aunque hay alguna razón para ser más conservadores, la verdad es que existe una buena lista de razones para utilizar el sprite en lugar de la fuente tipográfica:

Ventajas

Desventajas

Cómo crear un Sprite de SVG

Captura de código de un sprite de svg

Cómo seguir utilizando degradados

Si nuestras imágenes usan degradados o filtros, podemos incluirlos en el sprite igualmente, solo tenemos que agrupar todos estos efectos en una etiqueta <defs>, identificar con una id única para después aplicar a cada <symbol>.

Captura de código de un sprite de svg con degradados

Cómo llamarlo. Fichero externo o en el propio HTML

Para incluir un icono de nuestro set en nuestro HTML lo hacemos con el atributo [xlink:href] de la etiqueta <use> apuntando al id del icono. Sólo tenemos que tener en cuenta si el sprite es un fichero externo o estará incluido en nuestro documento. Ambas tienen sus particularidades por lo que habrá que analizarlas por separado.

Si optamos por utilizar un fichero externo tenemos que valorar que:

Captura de código de un sprite como fichero externo

Soporte a IE11

Si vamos dar soporte a IE11 lo mejor es añadir el sprite en el HTML en un contenedor <div> y hacer que no sea visible

Captura de código de un sprite de svg con degradados

Pero si elegimos usarlo como fichero externo podemos usar librerías como svgforeverybody que es polyfill y entrará en juego cuando el navegador no sea capaz de renderizar las imágenes.

Demo

Aquí tenéis una sencilla demo de este enfoque.

Conclusión

Los sprite de svg son muy atractivos porque combinan una técnica tradicional y una moderna especificación pero antes de tomar una decisión sobre si usar sprites, fuentes de iconos o imágenes, pensad a quién va dirigido, cómo es ese usuario y con qué dispositivo y navegador va a consumir esa información.

Conocer tu audiencia es difícil y requiere métricas pero pensar en el usuario es fácil. Cierto que os podéis equivocar pero lo haréis igualmente si no pensáis más que en vosotros mismos como usuarios tipo.

Dicho esto, valorad la complejidad de los iconos; si son monocromáticos, si requieren animación, transición o ninguna de estas dos, si el set es amplio o si es susceptible de ser actualizado, además pensad en el navegador más viejito que tendrá que soportarlo y si te compensa utilizar una librería externa o tener más HTML en cada página… todo esto te darán excelentes pistas para elegir el mejor enfoque.

Si te ha parecido interesante

Si tienes alguna duda o quieres discutir sobre esto, si el contenido o nuestros perfiles te parecen interesantes y crees que pdemos hacer algo juntos, no dudes en ponerte en contacto con nosotros a través de twitter o por email