SVG Sprite & <symbol> Generator

Guía de Desarrollo: Generador de Sprites SVG y Paquetes de <symbol>

Agrupe múltiples iconos SVG en una sola hoja de sprites <symbol> con IDs limpios, preservación de viewBox y fragmentos de código HTML.

Presets:
Sprite Options:
Id prefix label:
8 Symbols Parsed
Input label8 icons
Lines: 47•Chars: 2,750•Size: 2.7 KB
8 Icons Parsed
<svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
  <symbol id="icon-home" viewBox="0 0 24 24">
    <path d="m3 9 9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/>
      <polyline points="9 22 9 12 15 12 15 22"/>
  </symbol>

  <symbol id="icon-search" viewBox="0 0 24 24">
    <circle cx="11" cy="11" r="8"/>
      <path d="m21 21-4.3-4.3"/>
  </symbol>

  <symbol id="icon-bell" viewBox="0 0 24 24">
    <path d="M6 8a6 6 0 0 1 12 0c0 7 3 9 3 9H3s3-2 3-9"/>
      <path d="M10.3 21a1.94 1.94 0 0 0 3.4 0"/>
  </symbol>

  <symbol id="icon-settings" viewBox="0 0 24 24">
    <circle cx="12" cy="12" r="3"/>
      <path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"/>
  </symbol>

  <symbol id="icon-user" viewBox="0 0 24 24">
    <path d="M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2"/>
      <circle cx="12" cy="7" r="4"/>
  </symbol>

  <symbol id="icon-check" viewBox="0 0 24 24">
    <polyline points="20 6 9 17 4 12"/>
  </symbol>

  <symbol id="icon-arrow-right" viewBox="0 0 24 24">
    <line x1="5" y1="12" x2="19" y2="12"/>
      <polyline points="12 5 19 12 12 19"/>
  </symbol>

  <symbol id="icon-menu" viewBox="0 0 24 24">
    <line x1="4" y1="12" x2="20" y2="12"/>
      <line x1="4" y1="6" x2="20" y2="6"/>
      <line x1="4" y1="18" x2="20" y2="18"/>
  </symbol>
</svg>
Bundle: 1.9 KB•Symbols: 8(-21% overhead)
HTTP: 1 Request vs 8
Stats card1
8Vector Assets Ready

Preserves exact SVG viewBox matrices and scales smoothly across any DPI.

Stats card2
100%Consolidated

1 shared sprite bundle instead of 8 separate network roundtrips.

Stats card3
1.9 KBOptimized Sprite

Eliminates XML declarations and metadata overhead from individual SVG files.

Client-Side Processing

High-performance processing executed entirely in browser memory.

Zero Server Upload Privacy

All data payloads remain strictly local with zero external server communication.

Production Ready Export

Clean, optimized output formats ready for immediate deployment.

Referencia técnica y guía de arquitectura

Guía de Desarrollo: Generador de Sprites SVG y Paquetes de <symbol> — Guía de referencia

Agrupe múltiples iconos SVG en una sola hoja de sprites <symbol> con IDs limpios, preservación de viewBox y fragmentos de código HTML.

Parámetros clave y controles

Prefijo de ID (ID Prefix)string

Prefijo que se antepone a los IDs de cada <symbol> generado (por ejemplo, 'icon-') para evitar colisiones en el DOM.

Por defecto: icon-
Normalización currentColorboolean

Reemplaza los colores fijos en fill y stroke por 'currentColor' para heredar dinámicamente el color del texto mediante CSS o Tailwind.

Por defecto: false
Modo Sprite Oculto (Inline Sprite)boolean

Configura el elemento raíz <svg> con style='display: none;' para insertarlo directamente en el documento HTML sin ocupar espacio visual.

Por defecto: true
Minificación de Salidaboolean

Elimina espacios en blanco, saltos de línea, comentarios y declaraciones XML superfluas para optimizar el peso del archivo.

Por defecto: false
Autosíntesis de viewBoxboolean

Calcula matrices viewBox precisas a partir de los atributos width y height cuando el SVG de origen carece de viewBox.

Por defecto: true

Consejos profesionales y mejores prácticas

Cero peticiones HTTP adicionales con inclusión inline

Incruste la hoja de sprites directamente dentro de la plantilla base o en el <body> del HTML para mostrar múltiples iconos mediante <svg><use href='#id'/></svg> sin sobrecarga de red.

Temas dinámicos y hover con currentColor

Active la normalización currentColor para conjuntos de iconos monocromáticos. Esto permite modificar el color del icono con clases de texto como text-indigo-600 hover:text-indigo-500.

Aproveche la memoria caché del navegador con sprites externos

Guarde el archivo como /public/sprite.svg y enlace los símbolos con <use href='/sprite.svg#icon-id'/> para disfrutar de caché HTTP persistente en sitios con múltiples páginas.

Prevenga conflictos de IDs en degradados y máscaras

Si los SVG contienen <linearGradient> o <clipPath>, asegúrese de que sus IDs internos también lleven prefijo para evitar que un icono afecte el estilo visual de otro.

Errores comunes y solución de problemas

El icono no se visualiza o aparece con dimensiones 0x0 al usar <use>

Compruebe que el elemento <symbol> posea un atributo viewBox válido y que el contenedor <svg> receptor defina width y height explícitos o clases CSS como w-6 h-6.

Error de seguridad CORS al referenciar un sprite SVG externo

Las referencias externas <use href='/sprite.svg#id'> requieren estar alojadas en el mismo origen o disponer de cabeceras 'Access-Control-Allow-Origin: *' en el servidor o CDN.

Las reglas CSS de fill o stroke no modifican el color del icono

Los atributos fill o stroke incrustados en los paths anulan la cascada CSS. Active la opción 'Normalización currentColor' para habilitar el control por estilos CSS.

Preguntas frecuentes (FAQ)

¿Por qué utilizar un sprite SVG <symbol> en lugar de etiquetas <img> o fuentes de iconos?▼

Los sprites SVG <symbol> ofrecen la nitidez y flexibilidad de estilizado del SVG inline con el rendimiento de una sola petición HTTP. A diferencia de las fuentes de iconos, no sufren parpadeos de carga (FOUT), admiten múltiples colores y soportan accesibilidad ARIA nativa.

¿Cuál es la diferencia entre un sprite inline y un archivo de sprite externo?▼

Un sprite inline se incluye directamente en el HTML y se visualiza de forma instantánea sin peticiones de red secundarias. Un sprite externo se distribuye como un archivo independiente (.svg), permitiendo un almacenamiento en caché muy eficiente en el navegador.

¿Cómo se controla el tamaño y escalado de los iconos basados en <symbol>?▼

Dado que cada símbolo conserva su propio viewBox, el elemento <svg> contenedor define el tamaño real en pantalla. Asigne atributos width/height o clases CSS (como w-6 h-6) para redimensionar los iconos sin distorsión.

¿La herramienta soporta iconos SVG multicolor complejos?▼

Sí. Los iconos con múltiples capas de color, degradados y opacidades se conservan intactos. Para iconos multicolor, mantenga desactivada la opción 'Normalización currentColor' para preservar los colores originales.

¿Cómo se integra el sprite en proyectos de React, Next.js o Vue?▼

Puede utilizar las pestañas de exportación 'React' o 'Vue' para obtener componentes listos para producción con tipado TypeScript (<Icon name='icon-name' />), que ofrecen autocompletado para todos los símbolos generados.

Herramientas y utilidades relacionadas

Todas las herramientas →
Generador interactivo de gradientes CSSdesign

Creador visual de gradientes CSS con paradas de color, control de ángulos, formas radiales, paletas y exportación directa en un clic.

Abrir herramienta→
Limpiador y minificador interactivo de código SVGdesign

Limpia, minifica y elimina metadatos de gráficos SVG en el navegador para reducir drásticamente el tamaño sin perder calidad.

Abrir herramienta→
Extractor de paletas de colores y verificador de contrastedesign

Verificador de contraste accesible WCAG 2.1 y generador de paletas armónicas.

Abrir herramienta→
Generador CSS de efecto Glassmorphismdesign

Creador moderno de efectos de vidrio esmerilado con desenfoque de fondo, transparencia y bordes.

Abrir herramienta→
Calculadora de Relación de Aspecto y Códecs de Vídeodesign

Especificación de proporciones de pantalla, simplificación MCD euclidiana, alineación Mod 2/4/8 para códecs de vídeo y propiedad CSS aspect-ratio.

Abrir herramienta→
Generador de Favicon e Iconos de Aplicación Cheatsheetdesign

Referencia técnica completa para generar favicons de navegador, iconos Apple Touch, manifiestos PWA de Android y fragmentos HTML.

Abrir herramienta→