¿Odias los anuncios? Ir Sin publicidad Hoy 

Generador de Hojas de Sprites SVG

DesarrolladorMatemáticas

ANUNCIO · ¿ELIMINAR?

APORTE

PROD.

Lado cliente

Carga archivos SVG y haz clic en Generar para crear una hoja de sprites.

Hoja de Sprites SVG

Tipo de Fragmento de Uso

Fragmentos de Uso

Fragmento HTML Interno

ANUNCIO · ¿ELIMINAR?

Guía

Generador de Hojas de Sprites SVG

Combina múltiples archivos SVG en una sola hoja de sprites para una carga eficiente de íconos. Carga tus SVGs mediante arrastrar y soltar, previsualízalos en una cuadrícula, edita los IDs de los símbolos y descarga un archivo de sprites combinado listo para producción. Obtén fragmentos de código de uso para enfoques de referencia externa, interna y como fondo CSS. Opcionalmente, elimina rellenos y trazos para íconos coloreables con CSS, y elimina metadatos del editor para reducir el tamaño del archivo.

Cómo Usar

Arrastra y suelta tus archivos de íconos SVG en el área de carga o haz clic para explorar. Cada SVG se analiza y se muestra en una cuadrícula de previsualización con su ID de símbolo autogenerado. Edita cualquier ID de símbolo haciendo clic en él. Activa las opciones de optimización para eliminar rellenos/trazos o metadatos. Haz clic en generar para combinar todos los íconos en una sola hoja de sprites. Descarga el archivo SVG combinado o copia el HTML interno. Utiliza los fragmentos de código generados para referenciar íconos individuales en tu proyecto.

Características

Carga por Arrastrar y Soltar – Carga múltiples archivos SVG a la vez con arrastrar y soltar o selector de archivos
Cuadrícula de Previsualización de Íconos – Ve todos los íconos cargados mostrados en una cuadrícula responsiva con etiquetas
IDs de Símbolos Editables – Autogenerados a partir de nombres de archivo, haz clic para personalizar antes de combinar
Generación de Hoja de Sprites – Combina SVGs en un solo archivo usando elementos de símbolo con preservación de viewBox
Fragmentos de Código de Uso – Obtén código listo para usar para referencia externa, referencia interna y métodos de fondo CSS
Eliminación de Relleno/Trazo – Elimina atributos de relleno y trazo para íconos que deseas colorear con CSS
Optimización – Elimina comentarios, metadatos y espacios de nombres del editor para minimizar el tamaño del archivo
Comparación de Tamaño de Archivo – Ve tamaños de archivo individuales vs combinados y los ahorros de espacio

ANUNCIO · ¿ELIMINAR?

 Preguntas frecuentes

¿Qué es una hoja de sprites SVG y por qué debería usar una?

Una hoja de sprites SVG es un archivo SVG único que contiene múltiples íconos definidos como elementos de símbolo. En lugar de cargar 20 archivos SVG separados (20 solicitudes HTTP), cargas un archivo de sprites y referencias íconos individuales con el elemento `use`. Esto reduce las solicitudes HTTP, mejora el rendimiento de carga de la página y facilita la gestión de íconos. Cada símbolo conserva su propio `viewBox` para que los íconos se rendericen en las proporciones correctas. Las hojas de sprites son especialmente valiosas para sitios web con muchos íconos en varias páginas.
¿Cuál es la diferencia entre referencias de sprites externas e internas?

La referencia externa utiliza un archivo SVG de sprites separado y referencia íconos con `href` apuntando a la ruta del archivo más el ID del símbolo, como `sprite.svg#nombre-del-icono`. El navegador carga el archivo de sprites una vez y lo almacena en caché. La referencia interna incrusta todo el SVG de sprites directamente en la página HTML (generalmente oculto) y referencia íconos solo con el hash y el ID. Los sprites internos funcionan inmediatamente sin una solicitud de archivo adicional, pero aumentan el tamaño del HTML y no se pueden almacenar en caché por separado. Los sprites externos son mejores para sitios de varias páginas, mientras que los internos funcionan bien para aplicaciones de una sola página.
¿Por qué eliminaría los rellenos y trazos de los íconos SVG?

Eliminar los atributos de relleno y trazo de los íconos SVG te permite controlar su color completamente con CSS. Esto es esencial para sistemas de íconos donde los íconos necesitan cambiar de color al pasar el mouse, en modo oscuro o en diferentes contextos de interfaz de usuario. Sin eliminar los atributos originales, los cambios de color de CSS pueden no funcionar porque los atributos SVG internos tienen una especificidad mayor que las reglas CSS. La opción de eliminación de relleno/trazo en esta herramienta elimina estos atributos para que puedas establecer colores usando las propiedades `fill` y `stroke` de CSS o la palabra clave `currentColor`.
¿Cómo se generan los IDs de símbolo a partir de los nombres de archivo?

La herramienta convierte cada nombre de archivo en un ID de símbolo seguro para URL eliminando la extensión `.svg`, convirtiendo a minúsculas, reemplazando espacios y caracteres especiales con guiones, y eliminando guiones consecutivos. Por ejemplo, `Mi Icono (v2).svg` se convierte en `mi-icono-v2`. Puedes editar cualquier ID generado antes de combinar. Cada ID debe ser único dentro de la hoja de sprites, ya que sirve como identificador de referencia al usar el ícono. IDs significativos como `icono-flecha-derecha` o `icono-cerrar` hacen que tu código sea más legible que los nombres genéricos.