Spritesheet SVG
Genere una hoja de sprites SVG con un mapa JSON
Organice los íconos SVG en una cuadrícula personalizada y exporte una hoja de sprites PNG, WebP o SVG con un mapa de marco JSON. Controle las columnas, el tamaño de celda, el relleno, el espaciado, la alineación, la escala y el orden de clasificación.
Vista previa
Sin vista previa. Añade y selecciona archivos para ver resultados.
Aún no hay archivos. Suelta archivos arriba o haz clic en SELECCIONAR ARCHIVOS.
¿Qué es un spritesheet SVG?
Un spritesheet es una sola imagen que contiene muchas imágenes más pequeñas dispuestas en una cuadrícula, más un mapa que indica dónde está cada una. Aquí los archivos de origen son SVG: cada uno se dibuja en su propia celda y la hoja terminada se exporta como PNG, WebP o un único lienzo SVG.
No es lo mismo que un símbolo sprite SVG. Un objeto de símbolo es un archivo SVG con un <symbol> por ícono al que las páginas hacen referencia por identificación con <use>, por lo que cada ícono permanece como marca vectorial y CSS aún puede colorearlo. Una hoja de sprites es un lienzo visual: todo lo que se consume, corta los fotogramas por coordenadas. Elija el símbolo sprite para los íconos HTML, la hoja de sprites para el lienzo, WebGL o los sprites de fondo CSS.
Cuándo usar un spritesheet
Un spritesheet reúne muchas imágenes pequeñas en un solo archivo, así que un juego o una aplicación hace una única petición y mantiene todos los fotogramas en una misma textura. Los renderizadores de canvas y WebGL dibujan desde él por rectángulos, CSS lo posiciona con background-position y el mapa JSON aporta las coordenadas, de modo que no hay que medir nada a mano. Recurre a él siempre que el destino trabaje en píxeles; si quieres iconos que escalen y hereden el color dentro del HTML, crea mejor un sprite de símbolos SVG.
Cómo crear un spritesheet a partir de archivos SVG
- 1
Suelta tus archivos SVG, o haz clic en SELECCIONAR ARCHIVOS, para añadirlos a la cola. Hasta 40 a la vez.
- 2
Define la cuadrícula (columnas, filas, tamaño de celda, padding, espaciado) y luego la alineación, la escala, la ordenación y el formato de salida. La hoja se redibuja a medida que los cambias.
- 3
Haz clic en GUARDAR TODO para descargar un único ZIP con la hoja y su mapa JSON de fotogramas.
Privacidad: tus archivos nunca salen del navegador
La conversión se ejecuta localmente en su navegador usando JavaScript y WebAssembly. No hay carga de archivos ni conversión del lado del servidor, por lo que los archivos que agrega permanecen en su dispositivo.
El procesamiento local ayuda a proteger logotipos confidenciales, documentos internos y obras de arte inéditas de los clientes. Las páginas y el código de conversión se almacenan en caché a medida que los utiliza, por lo que las herramientas que ya ha abierto pueden seguir funcionando sin una conexión de red.
Preguntas frecuentes
¿Conviene usar un spritesheet o un sprite de símbolos SVG?
Usa un sprite de símbolos cuando los iconos van dentro del HTML: sigue siendo vectorial, hereda la propiedad color de CSS y cada icono se referencia por id con <use>. Usa un spritesheet cuando algo dibuja píxeles a partir de coordenadas, como un juego de canvas o WebGL o un sprite de fondo en CSS. El mapa JSON del spritesheet te da x, y, width y height de cada fotograma.
¿Qué contiene el mapa JSON?
Una entrada por icono, con el nombre del archivo sin extensión como clave, por ejemplo {"home":{"x":0,"y":0,"width":64,"height":64}}. El rectángulo cubre toda la celda, incluido el padding, así que dibujar ese rectángulo reproduce el icono exactamente donde se colocó. Los nombres repetidos reciben los sufijos -2 y -3, de modo que cada clave sigue siendo única.
¿Qué tamaño puede tener la hoja?
El lienzo está limitado a 16.384 px por lado y a 64 megapíxeles en total, así que 40 iconos en celdas de 256 px caben holgadamente dentro del límite. Por encima de eso, la herramienta informa del tamaño en lugar de escribir una imagen en blanco. WebP además depende del navegador: cuando no puede codificar WebP obtienes un error, y no un PNG con la extensión equivocada.