SVG / Iconos

Generador de sprites SVG: símbolos y uso de iconos

Suelta varios iconos SVG para crear un sprite de símbolos. Depura el marcado, evita IDs duplicados de los nombres de archivo, conserva los viewBox, convierte opcionalmente los rellenos a currentColor y descarga sprite.svg.

Generador de sprites SVG: símbolos y uso de iconos: Suelta un conjunto de iconos SVG y obtén un único archivo sprite con un símbolo para cada uno, además del fragmento necesario para usar cada icono. Se eliminan los scripts, los recursos externos y cualquier elemento no seguro; los tamaños se convierten en un viewBox cuando es necesario, y los rellenos se pueden cambiar a currentColor para que los iconos sigan el color del texto. Funciona al 100 % en tu navegador, sin subir archivos a ningún servidor.

Categoría
Herramientas de desarrollo
Se ejecuta
En tu navegador
Coste
Gratis · sin registro
Disponibilidad
Lista para usar
Sprite de iconos SVGProcesamiento local

Funciona por completo en tu navegador

Hasta 60 iconos · 1 MB cada uno · seleccionar archivos sustituye el conjunto actual

Se eliminan los scripts, los controladores de eventos, los recursos externos, las imágenes incrustadas, el texto y los elementos no compatibles. Los estilos en línea básicos se convierten en atributos de presentación. Si falta viewBox, se usan la anchura y la altura numéricas, con 24 unidades como valor alternativo para cada dimensión ausente. Comprueba cada vista previa antes de usarla.

Editar un icono SVG

Símbolos y reutilización

SVG 2 especifica los elementos symbol y use, así como el comportamiento de viewBox: https://www.w3.org/TR/SVG2/struct.html#SymbolElement ; https://www.w3.org/TR/SVG2/struct.html#UseElement

Procesamiento local y relleno

Cada icono se reconstruye a partir de una lista de elementos y atributos SVG seguros, de modo que los scripts, los controladores de eventos y los recursos externos no pueden acceder al sprite. No se incluye ningún conjunto de iconos de terceros. SVG paint y currentColor se especifican en https://www.w3.org/TR/SVG2/painting.html . Las licencias de los iconos subidos siguen siendo responsabilidad del usuario.

Cómo se usa

  1. Suelta hasta 60 iconos SVG, de menos de 1 MB cada uno.
  2. Revisa las vistas previas depuradas y, opcionalmente, convierte los rellenos a currentColor.
  3. Descarga el sprite y selecciona un icono para copiar su fragmento de uso.

Privacidad y límites

Tus archivos SVG permanecen en local. La herramienta no obtiene las URL incrustadas ni sube los iconos.

Herramientas relacionadas

Editor SVGLimpiador SVGSVG a JSX

Preguntas frecuentes

¿Cómo uso el sprite?

Inserta su SVG una vez en un contenedor oculto de la página y usa después los fragmentos inline copiados. Para usar un archivo independiente, utiliza sprite.svg#id como href en su lugar.

¿Qué ocurre cuando falta viewBox?

El ancho y el alto numéricos, incluidas las unidades px, definen un nuevo viewBox. Cualquier dimensión ausente o no compatible toma 24 unidades por defecto. La vista previa señala los viewBox reparados para que puedas comprobar si se recortan.

¿Todos los iconos conservarán exactamente su aspecto?

No. Se conservan las formas básicas, los grupos, los degradados, los recortes y las máscaras, pero se eliminan los scripts, el texto, las imágenes incrustadas, los elementos use y los estilos no compatibles. Revisa la vista previa. Sigues siendo responsable de las licencias de las ilustraciones que subas.

Herramienta gratuita · se ejecuta en tu navegador · sin cuenta