Sprites de símbolos SVG: conserva IDs, viewBox y colores

Un sprite de símbolos SVG guarda definiciones de iconos con nombre en un único archivo SVG. Cada icono visible usa un elemento <use> para referenciar la definición necesaria. El empaquetado solo funciona si el ID del fragmento, el sistema de coordenadas y las reglas de color sobreviven al traslado desde los archivos individuales.

Empieza con dos iconos antes de combinar una carpeta completa. En este tutorial, una hoja usa un espacio de coordenadas cuadrado y una flecha hacia la derecha uno ancho. La hoja aparecerá en dos colores sin duplicar su trazado. La flecha conservará sus proporciones en lugar de ajustarse a la fuerza al lienzo de la hoja.

Si los iconos originales todavía necesitan formas, márgenes o peso óptico coherentes, termina primero el proceso de preparación de un kit de interfaz SVG. Un sprite organiza la ilustración; no la repara.

Crea dos definiciones de símbolos con nombre

Guarda este ejemplo original como sprite.svg:

<svg xmlns="http://www.w3.org/2000/svg">
  <symbol id="pv-leaf" viewBox="0 0 24 24">
    <path fill="currentColor"
      d="M5 19C2 10 9 4 20 4C20 15 14 22 5 19Z"/>
  </symbol>
  <symbol id="pv-arrow" viewBox="0 0 32 16">
    <path fill="currentColor"
      d="M2 5H21V1L30 8L21 15V11H2Z"/>
  </symbol>
</svg>

El nombre de la hoja es pv-leaf y el de la flecha pv-arrow. Son los identificadores que pedirá la página. MDN describe symbol como una definición gráfica reutilizable que se instancia mediante use. Un archivo que solo contiene símbolos puede verse vacío al abrirlo solo porque las definiciones no se renderizan directamente.

Conserva el viewBox junto a la ilustración que describe. Aquí la hoja usa 0 0 24 24 y la flecha 0 0 32 16. Esos números definen límites de coordenadas, no un tamaño obligatorio de visualización. Cambiar los límites de la flecha a 24 por 24 sin ajustar su geometría no es normalizarla. Consulta la referencia de viewBox de MDN para entender la correspondencia entre coordenadas y ventana gráfica.

Para una familia de iconos existente, conserva su cuadrícula acordada. Las formas distintas de este ejemplo muestran otra cuestión: empaquetar debe conservar el sistema de coordenadas ya aprobado. Si una flecha debe seguir el extremo de una línea o curva, usa marcadores SVG para puntas de flecha personalizadas alineadas para definir su punto de unión y dirección.

Referencia el sprite desde una página

Coloca sprite.svg, la página HTML e icons.css en el mismo directorio servido. Empieza con una vista previa HTTP del mismo origen para que una restricción de archivos locales o un host diferente no oculte un error básico de referencia.

Añade estas reglas a icons.css y carga esa hoja de estilos desde la página:

.icon {
  display: inline-block;
  width: 1.5rem;
  height: 1.5rem;
  vertical-align: middle;
}
.icon-wide {
  width: 3rem;
}
.garden-button {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: #167d8d;
}

Añade después estas instancias al cuerpo HTML:

<button class="garden-button" type="button">
  <svg class="icon" aria-hidden="true" focusable="false">
    <use href="./sprite.svg#pv-leaf"></use>
  </svg>
  Garden
</button>
 
<svg class="icon icon-wide" role="img" aria-label="Right direction"
  style="color: #233b63">
  <use href="./sprite.svg#pv-arrow"></use>
</svg>

La parte anterior a # localiza el archivo y la posterior selecciona el símbolo. El atributo moderno es href. La referencia de use de MDN documenta las referencias externas y advierte que los navegadores pueden rechazar cargas de otros orígenes. No asumas que trasladar un sprite que funciona a una CDN sea un cambio directo; prueba el lugar real de entrega.

Con el tamaño de fuente raíz predeterminado del navegador, estas reglas dan a la hoja una caja de 24 por 24 píxeles CSS y a la flecha una de 48 por 24. Los tamaños usan rem, así que cambiar la fuente raíz los modifica. Compara los iconos dentro del componente real y también ampliados: una caja correcta puede contener una ilustración con demasiado margen.

El botón anterior demuestra presentación y nombre del icono. Añade el controlador de acción de la aplicación cuando lo uses en un producto.

Elige la regla de color antes de combinar archivos

Los dos trazados del ejemplo usan explícitamente fill="currentColor". Esto permite que una instancia use el color del CSS circundante: el botón aporta verde azulado y la flecha azul marino. La referencia de color explica que currentColor puede proporcionar el valor usado por rellenos y trazos.

Para la segunda aparición de la hoja, usa la misma referencia pv-leaf y cambia el color de la instancia a coral. No dupliques el trazado solo para crear otro color de tema.

No sustituyas todos los rellenos de un logotipo multicolor por currentColor. Eso descarta deliberadamente la paleta. Si el archivo ya cambia de color antes de empaquetarlo, usa la guía de problemas de color SVG para aislar ese problema anterior.

Evita también crear una API de sprite basada en selectores arbitrarios de la página que accedan a los trazados referenciados. MDN señala limitaciones de estilos para el contenido clonado en use. Define el comportamiento de color previsto en la ilustración original y prueba el componente que la usa.

Evita IDs duplicados dentro de la ilustración

Los nombres únicos de símbolos son necesarios, pero un SVG exportado puede contener más IDs: degradados, máscaras, trazados de recorte u otras definiciones referenciadas. MDN exige que cada id SVG sea único en su árbol de nodos. Dos archivos antes separados pueden infringir esa regla al combinarse.

Por ejemplo, imagina que la exportación de una hoja y la de una insignia contienen ambas un degradado llamado paint0. Añade un prefijo al ID del degradado de la hoja y a su referencia correspondiente juntos:

El fragmento debe seguir apuntando a la definición prevista. Los ejemplos de fill de MDN muestran la relación entre un ID de degradado y url(#...). Da a la insignia su propio prefijo en lugar de hacer que ambas referencias apunten al degradado de la hoja.

Nuestro ejemplo de dos trazados no tiene definiciones anidadas, lo que lo hace útil para la primera comprobación. Para una exportación real, inventaria todos los IDs y referencias locales antes de combinar archivos. Después de ejecutar cualquier optimizador o generador, repite ese inventario en el sprite entregado. Renombrar solo el símbolo exterior no resuelve IDs internos duplicados.

Da nombre a cada instancia visible según su contexto

La hoja junto a la palabra visible «Garden» repite información que ya aporta el botón. Su SVG usa aria-hidden="true" y deja que el texto del botón proporcione el nombre. Conserva ese atributo en el SVG decorativo, no en el botón interactivo. La guía de aria-hidden de MDN trata el contenido decorativo y advierte que no deben ocultarse elementos que puedan recibir el foco.

La flecha independiente cumple otra función: comunica dirección sin texto cercano. Su SVG exterior usa role="img" y aria-label="Right direction", siguiendo las indicaciones de MDN para dar nombre a una imagen SVG integrada.

Decide la etiqueta donde se use. Una hoja reutilizable podría significar «Jardín», «De origen vegetal» o solo decorar distintas interfaces. Prueba el nombre accesible del componente final con las herramientas de inspección de accesibilidad del navegador y la tecnología de asistencia de destino; un símbolo reutilizable por sí solo no establece ese contexto.

Comprueba el sprite entregado, no solo los originales

Comprobamos este ejemplo original en una muestra de navegador del mismo origen. La hoja se renderizó en verde azulado y coral, la flecha ancha conservó su forma y un fragmento deliberadamente ausente produjo una caja vacía. El árbol de accesibilidad del navegador mostró el botón Garden y la flecha con nombre. Es una comprobación de esta muestra, no una certificación entre navegadores o lectores de pantalla.

Usa las mismas comprobaciones después de empaquetar:

1. Archivo: confirma que la página carga el sprite previsto desde la URL final.
2. Fragmento: compara cada fragmento de href con el ID del símbolo entregado, incluidas mayúsculas y minúsculas.
3. Límites: compara el componente pequeño y la ilustración ampliada para detectar recorte, márgenes y relación de aspecto.
4. Color: renderiza un icono de un color en dos colores de tema e inspecciona por separado las ilustraciones con colores fijos.
5. Referencias internas: comprueba que las referencias con prefijos a colores, máscaras y recortes sigan resolviéndose tras optimizar.
6. Significado: inspecciona el nombre de cada componente interactivo y la etiqueta de cada imagen independiente significativa.

Si carga el archivo, pero una instancia queda vacía, comprueba el fragmento antes de cambiar la geometría. Si la misma ilustración también queda vacía como SVG normal, sigue las comprobaciones generales de SVG vacío. Si se pixela al ampliar, busca una imagen rasterizada incrustada antes de asumir que el sprite causó el problema.

Cuando el único original es un icono PNG

Si un icono sencillo solo se conserva como PNG, convierte ese PNG a SVG con PerfectVector antes de empaquetarlo. Inspecciona la silueta, los huecos y las zonas de color frente al original y aprueba después sus límites de coordenadas y regla de color. Finalmente, asigna IDs estables a la ilustración aprobada y añádela al sprite. La conversión proporciona una ilustración vectorial; no elige los nombres de símbolos, la semántica del componente ni la arquitectura de entrega.

Si existe un SVG original limpio, úsalo. Volver a trazarlo introduce otro paso de recuperación de formas sin resolver una referencia de fragmento rota. Consulta las guías de edición y preparación SVG cuando el problema pendiente esté en la ilustración, no en su empaquetado.

Preguntas frecuentes

¿Por qué mi sprite SVG está vacío al abrirlo directamente? Un sprite que solo contiene definiciones de símbolos no los muestra directamente. Pruébalo mediante una instancia SVG use con la ruta y el ID de fragmento correctos antes de considerar dañado el documento vacío.

¿Necesitan todos los símbolos el mismo viewBox? No. Conserva cada sistema de coordenadas aprobado al empaquetar. Los iconos que comparten la cuadrícula de un sistema de diseño pueden usar los mismos límites, pero un símbolo ancho no se vuelve cuadrado solo por cambiar los números de su viewBox.

¿Por qué cambiar el color de la página no cambia el del icono? Comprueba la regla de color del original. Un relleno fijo es distinto de un trazado creado con currentColor. Conserva las ilustraciones multicolor intencionales y elige explícitamente qué rellenos o trazos deben heredar el color de la instancia.

¿Puedo colocar el sprite en otro dominio? No asumas que una referencia externa use funcionará entre orígenes. Empieza con una muestra del mismo origen y prueba después el host real y los navegadores de destino antes de cambiar la entrega. Un ejemplo local correcto no demuestra compatibilidad entre orígenes.

Fuentes

1. MDN — symbol — Definiciones reutilizables y renderizado indirecto.
2. MDN — use — Fragmentos externos, límites de estilo y restricciones de origen.
3. MDN — viewBox — Relación entre límites de coordenadas y ventana gráfica.
4. MDN — color — currentColor como entrada para el color SVG.
5. MDN — id — Unicidad de identificadores dentro del árbol del documento.
6. MDN — fill — Referencias a definiciones de color, como URL de degradados.
7. MDN — aria-hidden — Contenido decorativo y precauciones con elementos que reciben el foco.
8. MDN — Rol img — SVG exterior etiquetado para una imagen significativa.

Empieza con dos iconos aprobados y prueba sus nombres, límites y colores en el componente real. Si un original solo existe como imagen rasterizada adecuada, recupera sus trazados SVG, inspecciona la ilustración y añade después el resultado aceptado al sprite.