Sprite de símbolos SVG
Combinar iconos SVG en un solo sprite de símbolos
Combine una carpeta de iconos SVG en un objeto reutilizable. Cada archivo se convierte en un <symbol> con un fragmento de <use> listo para usar, mientras que las ID internas prefijadas evitan que los degradados, las máscaras y las rutas de los clips colisionen.
Estas opciones se aplican a todo el sprite.
Vista previa del sprite
Añade archivos SVG para crear un sprite.
Aún no hay archivos. Suelta archivos arriba o haz clic en SELECCIONAR ARCHIVOS.
¿Sprite de símbolos o spritesheet?
Un sprite de símbolos es un único archivo SVG que contiene un <symbol> por icono. No se dibuja nada hasta que referencias un símbolo con <use>, así que los iconos siguen siendo vectores, se pueden seguir estilizando con CSS y se mantienen nítidos a cualquier tamaño. Es lo que quieres para un conjunto de iconos de interfaz.
Un spritesheet es una sola imagen con todos los iconos dispuestos en una cuadrícula, que se dibujan con background-position o con un mapa de fotogramas en JSON. Los iconos son píxeles en coordenadas fijas, que es lo que esperan los motores de juego y los renderizadores de lienzo, y lo que necesitas cuando el destino no puede usar <use> en absoluto.
Abrir el generador de spritesheets SVGCuándo usar un sprite de símbolos
Un objeto de símbolo mantiene un ícono configurado en un archivo SVG reutilizable, y cada instancia de ícono se convierte en un elemento corto <use> en lugar de un bloque repetido de rutas. Esto es útil para navegación, botones, tablas y otras interfaces que reutilizan los mismos iconos. Los símbolos siguen siendo marcas vectoriales, por lo que se mantienen nítidos y pueden heredar el color y el tamaño de CSS.
Cómo crear un sprite de símbolos SVG en línea
- 1
Suelta tus iconos SVG, o haz clic en SELECCIONAR ARCHIVOS, para añadirlos a la cola. Hasta 40 a la vez, y el orden de la lista es el orden de los símbolos.
- 2
Elige un sprite externo o uno en línea, decide si quieres optimizar los iconos y normalizar sus viewBox, y observa cómo la cuadrícula de iconos se reconstruye a partir del propio sprite.
- 3
Haz clic en GUARDAR TODO para descargar sprite.svg, o un ZIP con sprite.svg y usage.html cuando los ejemplos de uso están activados.
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
¿Qué pasa cuando dos archivos producen el mismo ID?
Los ID salen de la raíz del nombre del archivo, en minúsculas y convertida en slug, así que "Arrow Left.svg" se convierte en arrow-left. Cuando dos archivos producen el mismo ID, el primero se lo queda y los siguientes reciben -2, -3, y así sucesivamente. Renombrar un archivo de la lista cambia su ID al instante, igual que ordenar o arrastrar la lista, porque el primer archivo del orden es el que conserva el ID sin sufijo.
¿Conviene usar un sprite externo o uno en línea?
Un sprite externo es un archivo sprite.svg al que haces referencia con <use href="sprite.svg#icon-id">. Se guarda en caché como cualquier otro recurso y mantiene tu HTML pequeño, a costa de una petición extra, y tiene que venir del mismo origen salvo que CORS permita otra cosa. Un sprite en línea es ese mismo marcado pegado en la página dentro de un <svg> oculto y referenciado con <use href="#icon-id">. No necesita ninguna petición y siempre se resuelve, pero esos bytes se repiten en cada documento HTML que lo usa.
¿Crear un sprite cambia el aspecto de mis iconos?
No. El <svg> raíz de cada archivo se convierte en un <symbol> con el mismo viewBox y sus hijos se trasladan sin cambios, salvo por el prefijo de los ID. "Optimizar SVG" aplica el mismo conjunto de pasadas seguras que el Optimizador SVG, así que los comentarios, los metadatos del editor y los atributos redundantes desaparecen mientras la geometría se queda. "Normalizar viewBox" recentra cada icono en una caja de coordenadas cuadrada, lo que cambia la caja y no el dibujo. Los elementos <script> y los atributos on* se eliminan siempre, porque un sprite acaba insertado en tu página.