Generador de sprites SVG
Suelta varios iconos SVG y obtén una hoja de sprites <symbol> combinada,
con IDs generados automáticamente y sin colisiones.
Haz clic para elegir archivos .svg, o arrástralos hasta aquí
Selecciona varios iconos a la vez. Se quedan en tu dispositivo, no se sube nada.
Iconos
Cómo funciona
Cada SVG subido se analiza con el propio analizador DOM del navegador, se lee su
viewBox (o su width/height, si no hay viewBox definido) y su marcado interno
se envuelve en un elemento <symbol id="..." viewBox="...">. Todos los
símbolos se combinan luego en un único <svg> oculto, el patrón estándar
de "sprite SVG" usado para servir muchos iconos en una sola petición en lugar de muchos
archivos de imagen separados o copias en línea. Los IDs se derivan del nombre de cada
archivo y se de-duplican automáticamente si dos archivos colisionarían.
El análisis y la combinación ocurren por completo en el JavaScript de esta página. Nada de lo que subes se envía a ningún sitio.
Preguntas frecuentes
¿Cómo funciona un sprite de symbol?
Cada icono se convierte en un <symbol id="..."> dentro de un único <svg> oculto, colocado una sola vez en cualquier parte del HTML de tu página. Cualquier elemento renderiza luego ese icono con <svg><use href="#id"></use></svg>, así el navegador descarga y analiza el arte una sola vez sin importar cuántas veces se use.
¿Cómo se generan los IDs de los iconos?
A partir del nombre de cada archivo: en minúsculas, con los caracteres no alfanuméricos reemplazados por guiones, y la extensión eliminada. Si dos archivos generarían el mismo ID, se añade un sufijo numérico para que todos los símbolos sean direccionables.
¿Se suben mis iconos a algún sitio?
No. Los archivos se leen y combinan por completo en tu navegador usando la File API. No se sube nada.