# Generador de sprite sheet SVG Sube hasta 30 iconos SVG y combínalos en un solo sprite sheet: modo para en línea, modo para fragmentos de archivo externo. Normaliza el viewBox (derivado de width/height), deduplica iconos, opcionalmente elimina fill/stroke para currentColor, siempre limpia y atributos on\*, y genera fragmentos de uso para HTML / React / Vue / CSS con vista previa en vivo de cada icono. > Página canónica: https://elysiatools.com/es/tools/svg-sprite-generator - **Categoría:** Media - **Palabras clave:** sprite svg, hoja de sprites, svg symbol, set de iconos, elemento use ## Descripción general Reglas de fusión: cada \`\` lleva el contenido interno del \`\` original (sin el elemento raíz); si falta el viewBox se deriva de width/height como 0 0 W H; el modo \`\` emite además un \`\` para referencias externas (\`\`). Los ID se depuran del nombre de archivo (caracteres fuera de \[A-Za-z0-9\_-\] → «-», prefijo i- si empieza por dígito, más el prefijo del usuario), con sufijo -2 en colisiones. La deduplicación usa un hash de viewBox + contenido con espacios comprimidos. Seguridad: siempre se eliminan \`\` y atributos on\*. ## Entradas - **Archivos SVG (hasta 30)** (file): Select up to 30 .svg icon files - **Tipo de sprite** (select) - **Prefijo de ID** (text): e.g. icon- - **Quitar fill/stroke (para currentColor)** (checkbox) - **Deduplicar iconos idénticos** (checkbox) ## Cuándo usarlo - Cuando quieras unificar varios iconos SVG en un solo archivo para reducir peticiones y mantener un set reutilizable. - Si necesitas referencias en línea (modo symbol) o a un archivo sprite externo (modo view). - Al preparar iconos que hereden el color del texto con currentColor y snippets listos para HTML, React o Vue. ## Cómo funciona - Sube hasta 30 archivos SVG (tipo image/svg+xml). - Elige el tipo de sprite (symbol o view), un prefijo de ID opcional, si quitar fill/stroke y si deduplicar iconos idénticos. - La herramienta deriva el viewBox, sanitiza los ID a partir del nombre de archivo, elimina y atributos on\*, y fusiona el contenido interno de cada SVG. - Recibes el sprite, IDs resultantes, fragmentos de uso para HTML / React / Vue / CSS y una vista previa en vivo de cada icono. ## Casos de uso - Crear un sprite de iconos de interfaz para usar con inline en una página o componente. - Generar un sprite.svg externo con fragmentos y para un design system. - Unificar un set de iconos en React o Vue con prefijo de ID, deduplicación y currentColor. ## Preguntas frecuentes ### ¿Cuántos archivos SVG puedo subir? Hasta 30 archivos SVG. ### ¿Qué diferencia hay entre modo symbol y modo view? Symbol genera para en la misma página. View genera y para referencias externas como . ### ¿Cómo se generan los ID de los iconos? Se depuran del nombre de archivo (caracteres fuera de [A-Za-z0-9_-] pasan a «-», prefijo i- si empieza por dígito, más tu prefijo). En colisión se añade el sufijo -2. ### ¿Se eliminan siempre los scripts? Sí. Siempre se eliminan elementos y atributos on\*. ### ¿Para qué sirve quitar fill y stroke? Elimina fill y stroke para que el icono use currentColor y herede el color del texto o del CSS. ## Herramientas relacionadas - [Generador de Data URI](https://elysiatools.com/es/tools/data-uri-generator): Convierte archivos en Data URIs (Base64 o porcentaje-codificado) para incrustar imágenes, fuentes y recursos directamente en HTML, CSS o Markdown - [Fragmentos de Encabezado/Pie PDF](https://elysiatools.com/es/tools/pdf-header-footer-snippets): Convierte HTML a PDF e inserta fragmentos de logo, título y fecha - [Generador de Favicon SVG](https://elysiatools.com/es/tools/svg-favicon-generator): Convierte un logo SVG o raster en un paquete favicon completo con ICO, variantes PNG, icono Apple Touch y web manifest - [Convertidor SVG a JPG](https://elysiatools.com/es/tools/svg-to-jpg): Convertir gráficos vectoriales SVG a formato raster JPG con opciones personalizables de resolución, calidad y fondo - [SVG a PDF](https://elysiatools.com/es/tools/svg-to-pdf): Convertir gráficos vectoriales SVG a documentos PDF para impresión y compartir - [Convertidor SVG a PNG](https://elysiatools.com/es/tools/svg-to-png): Convertir gráficos vectoriales SVG a formato raster PNG con opciones personalizables de resolución, calidad y transparencia - [Convertidor SVG a WebP](https://elysiatools.com/es/tools/svg-to-webp): Convertir gráficos vectoriales SVG a formato raster WebP con compresión moderna y soporte de transparencia - [Verificador de accesibilidad](https://elysiatools.com/es/tools/accessibility-checker): Detecta problemas comunes de WCAG 2.1 en HTML, paginas o imagenes de diseno y devuelve sugerencias accionables ## Ejemplos - [Muestras XML](https://elysiatools.com/es/samples/xml-viewer-samples): Archivos de muestra para el visor XML en el navegador - [Ejemplos de XML](https://elysiatools.com/es/samples/xml-samples): Ejemplos de formato XML (eXtensible Markup Language) desde estructuras simples hasta complejas - [Ejemplos SVG](https://elysiatools.com/es/samples/svg-samples): Ejemplos de Gráficos Vectoriales Escalables (SVG) que demuestran varias características y técnicas SVG - [Muestras SVG](https://elysiatools.com/es/samples/svg-viewer-samples): Gráficos vectoriales de muestra para el visor SVG en el navegador ## Contenido relacionado - [Herramientas de conversion de formatos de imagen y exportacion animada](https://elysiatools.com/es/hubs/image-convert): Compara convertidores de imagen para JPG, PNG, GIF, AVIF, WebP, TIFF, ICO, base64 y salidas pensadas para animacion en un solo hub. - [Herramientas de conversion, mapeo y XPath para XML](https://elysiatools.com/es/hubs/xml-convert): Herramientas reunidas para conversion, mapeo, union y extraccion XPath en XML en un solo hub. - [Herramientas de extracción, limpieza y exportación HTML a Markdown/PDF](https://elysiatools.com/es/hubs/html-convert): Compara herramientas de limpieza HTML, extracción de atributos, extracción de imágenes, HTML a Markdown y HTML a PDF en un solo hub para flujos de conversión de contenido web. - [Herramientas de limpieza, acabado y preparacion por lotes de imagenes](https://elysiatools.com/es/hubs/image-utility): Reune en un solo hub herramientas para limpiar imagenes, recortar bordes, agregar margen o marco, redimensionar y comprimir por lotes, poner marcas de agua y pulir activos visuales.