Iconos SVG: marcado en línea, un sprite con use, o un elemento img

Qué es

Existen tres maneras de colocar un icono SVG. En línea: el marcado <svg> se sitúa en el HTML, de modo que fill="currentColor" sigue el color del texto y CSS puede alcanzar cada trazado. Sprite: un archivo define cada icono como <symbol id="check">…</symbol>, y cada aparición es <svg><use href="/icons.svg#check"></use></svg>; el archivo se solicita una sola vez y se almacena en caché, y el clon hereda color de su contexto. Imagen: <img src="icon.svg"> o un fondo CSS es lo más sencillo y cacheable, pero el SVG es una imagen opaca cuyo interior CSS no puede estilizar.

Por qué importa

Los iconos son numerosos, repetidos y coloreados según el contexto. El marcado en línea ofrece control total pero repite bytes en cada página y cada fila de tabla; el sprite ofrece almacenamiento en caché y una única definición bajo reglas de carga más estrictas; la imagen ofrece almacenamiento en caché y ningún estilizado. La elección determina si los iconos siguen el color del texto, los estados hover y el modo oscuro sin recursos adicionales.

Cómo aplicarlo

• Usar por defecto un sprite del mismo origen con <use href>. MDN señala que los navegadores pueden aplicar la política de mismo origen a <use> y rechazar URL de otro origen, así que hay que servir el sprite desde el origen de la página o incluir en línea el bloque <symbol> una vez al principio del documento.
• Poner fill="currentColor" (y stroke cuando corresponda) en los símbolos; MDN define currentColor como el valor de la propiedad color del elemento, así que color en el botón o el enlace estiliza el icono.
• Marcar los iconos decorativos con aria-hidden="true" y focusable="false". Dar un nombre a un icono que aparece solo: un elemento <title> dentro del SVG (el elemento de nombre accesible, que suele mostrarse también como información sobre herramientas) o un aria-label en el botón que lo rodea.
• Fijar width y height (atributos o CSS) en cada icono para que el diseño no se desplace antes de que llegue el sprite.
• Incluir en línea los dos o tres iconos necesarios para la primera pintura (logotipo, menú) y mantener el resto en el sprite; versionar la URL del sprite como cualquier otro recurso.
• Pasar los iconos por un optimizador y normalizar el viewBox para que todos los iconos compartan un mismo sistema de coordenadas.

Trampas

Las clases de la página no alcanzan el contenido clonado de <use>; solo cruzan las propiedades heredables y las propiedades personalizadas, así que los iconos multicolor necesitan currentColor más propiedades personalizadas, no selectores de clase. El clon no está en el DOM para los scripts. Un sprite que cambia los nombres de id rompe todas las páginas que referencian los antiguos hasta que las cachés caducan. Las fuentes de iconos, la alternativa más antigua, no se comparan aquí.