SVG Symbol

Una alternativa a los iconos basados en fuentes — uso de sprites de símbolo SVG para incrustar iconos escalables y multicolor directamente en HTML.

¿Qué son los sprites de símbolo SVG?

Los sprites de símbolo SVG agrupan múltiples iconos SVG en un solo archivo. Cada icono se define dentro de un elemento <symbol> con un id único. Para usar un icono, se referencia con <use href="#icon-id">. El sprite se carga una vez — ya sea inline o como archivo externo — y los iconos individuales se renderizan en cualquier parte de la página.

Este es un enfoque fundamentalmente diferente al de las fuentes de iconos. En lugar de mapear puntos de código Unicode a glifos de fuente, se usan elementos SVG nativos. Cada icono conserva todas sus capacidades SVG: múltiples colores, degradados, filtros y atributos de accesibilidad detallados. La contrapartida es un marcado y convenciones de estilo ligeramente más complejos en comparación con el enfoque CSS puro de los iconos de fuente.

Cómo funciona

Un archivo sprite es un documento SVG normal que contiene uno o más elementos <symbol>. Cada símbolo define un icono autocontenido con su propio viewBox:

icons.svg (el archivo sprite) 
<svg xmlns="http://www.w3.org/2000/svg" style="display:none">
  <symbol id="icon-home" viewBox="0 0 24 24">
    <path d="M3 12l9-9 9 9M5 10v10a1 1 0 001 1h3a1 1 0 001-1v-4..."/>
  </symbol>
  <symbol id="icon-search" viewBox="0 0 24 24">
    <path d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/>
  </symbol>
</svg>

El <svg> externo está oculto con style="display:none" para que no ocupe espacio en la página. Los símbolos dentro son invisibles hasta que se referencian. Para renderizar un icono, use el elemento <use>:

Uso de símbolos en HTML 
<svg class="icon"><use href="#icon-home"></use></svg>
<svg class="icon"><use href="#icon-search"></use></svg>

Estilice los iconos con CSS, usando fill y stroke en lugar de la propiedad color basada en fuentes:

CSS para iconos SVG 
.icon {
  width: 24px;
  height: 24px;
  fill: currentColor;
  stroke: none;
}

Usar fill: currentColor permite que el icono herede el color de texto de su elemento padre, similar a como funcionan los iconos de fuente con la propiedad color.

Símbolos vs. iconos de fuente

    Ventajas de los símbolos
  • Soporte multicolor — cada trayecto puede tener su propio relleno y trazo
  • Cada icono es un elemento SVG real con mejor accesibilidad
  • No se necesita mapeo Unicode — referenciar iconos por nombres legibles
  • Renderizado más nítido — sin problemas de hinting ni artefactos de subpíxel
  • Las partes individuales de los iconos se pueden animar de forma independiente
  • Funciona con cualquier característica SVG: degradados, filtros, trayectos de recorte, máscaras
    Inconvenientes de los símbolos
  • Marcado más detallado (<svg><use> vs. <i class="icon">)
  • No se puede estilizar fácilmente con CSS color — se necesita fill/stroke
  • Los sprites externos tienen implicaciones CORS para carga entre orígenes
  • Mayor tamaño total de archivo que los formatos de fuente comprimidos
  • Más peso HTML por uso de icono
  • Sin soporte para pseudo-elementos ::before/::after

Estrategias de carga

Hay tres formas principales de cargar un sprite de símbolo SVG en una página, cada una con diferentes compromisos:

Sprite inline

Pegue el sprite SVG completo directamente en el <body> HTML. Este es el enfoque más simple — sin problemas CORS, sin solicitud HTTP adicional. Los símbolos están disponibles inmediatamente para cualquier referencia <use> en la página. Funciona mejor para aplicaciones de una sola página o cuando tiene un conjunto de iconos pequeño (menos de ~50 iconos).

Sprite externo

Cargue el sprite como archivo externo mediante <use href="icons.svg#home">. Esto mantiene su HTML limpio y permite al navegador almacenar en caché el sprite separadamente de la página. Sin embargo, tiene implicaciones CORS: el sprite debe servirse desde el mismo origen, o el servidor debe establecer los encabezados Access-Control-Allow-Origin apropiados. Tenga en cuenta que Internet Explorer no admite referencias <use> externas — use el polyfill svg4everybody si necesita soporte para IE.

Inyección JS

Cargue el archivo sprite mediante fetch() e inyéctelo en el DOM en tiempo de ejecución. Esto combina la capacidad de almacenamiento en caché de los sprites externos con la fiabilidad de los sprites inline — el SVG inyectado se convierte en parte del documento, por lo que las referencias <use> funcionan sin restricciones CORS. Bobcorn genera este enfoque: un archivo JS que recupera y registra todos los símbolos cuando se carga.

Enfoque de inyección JS (salida de Bobcorn) 
<!-- Load the generated JS sprite -->
<script src="icons-symbol.js"></script>

<!-- Then use normally: -->
<svg class="icon"><use href="#icon-home"></use></svg>
<svg class="icon"><use href="#icon-search"></use></svg>

El archivo JS crea un elemento <svg> oculto con todas las definiciones <symbol> y lo añade al cuerpo del documento. Una vez cargado, los iconos se referencian de manera idéntica al enfoque inline.

Cuándo usar SVG Symbols

Los sprites de símbolo SVG son la elección correcta cuando su proyecto necesita capacidades que los iconos de fuente no pueden proporcionar:

  • Iconos multicolor — cuando los iconos usan más de un color, degradados o rellenos complejos que una fuente de un solo glifo no puede representar
  • La accesibilidad es una prioridad máxima — cada icono puede incluir un elemento <title> y un atributo aria-label, dando a los lectores de pantalla descripciones significativas
  • Partes de iconos animadas — necesita animar trayectos o grupos individuales dentro de un icono (por ejemplo, un engranaje giratorio dentro de un icono de configuración)
  • Proyectos con uso intensivo de SVG — su aplicación ya usa SVG inline extensamente, por lo que los símbolos encajan naturalmente en la arquitectura existente
  • Máxima nitidez de renderizado — el hinting puede causar problemas de alineación en tamaños pequeños; los símbolos SVG se renderizan con precisión de píxel en cualquier dimensión

Cuándo preferir las fuentes de iconos

Las fuentes de iconos siguen siendo la mejor opción en varios escenarios comunes:

  • Conjuntos de iconos grandes (200+) — un archivo de fuente WOFF2 comprimido es significativamente más pequeño que un sprite SVG con el mismo número de iconos
  • Todos los iconos son monocromáticos — si cada icono tiene un solo color, las fuentes de iconos ofrecen la integración más simple sin compromisos
  • Integración solo con CSS — las fuentes de iconos solo requieren un enlace a la hoja de estilo y clases CSS, sin JavaScript ni marcado adicional
  • Sistemas heredados — los proyectos que ya usan fuentes de iconos no ganan suficiente al cambiar a símbolos para justificar el esfuerzo de migración
  • Soporte para pseudo-elementos — necesita iconos en pseudo-elementos ::before o ::after, que solo funcionan con glifos de fuente
En Bobcorn
Bobcorn puede exportar sus iconos como archivo sprite de símbolo JS junto a los archivos de fuente. Active la opción JS en el diálogo de exportación. El archivo generado crea un sprite SVG inline y registra todos los símbolos cuando se carga. Puede usar ambos enfoques en el mismo proyecto — fuentes para iconos de interfaz simples, símbolos para ilustraciones complejas en color.
Consejo
No tiene que elegir uno u otro. Muchos sistemas de diseño usan fuentes de iconos para la mayor parte de sus iconos de interfaz monocromáticos (botones, navegación, elementos de formulario) y símbolos SVG para un pequeño número de ilustraciones multicolor o iconos animados. El diálogo de exportación de Bobcorn le permite generar ambos en una sola exportación.