Sprite SVG de símbolos
Escriba los nombres home, search y user y obtenga un único sprite SVG oculto con un símbolo para cada uno, más el fragmento use de cada icono para pegarlo donde aparezca. Se rechazan las listas vacías, los duplicados y los nombres no válidos. Gratis en su navegador.
- Gratis
- Funciona en su navegador
- Sin registro
- Sus datos no salen de su equipo
Ejecutar — gratis
Ejemplo resuelto
- Ids
- home, search, user
- Cantidad
- 3
- viewBox
- 0 0 24 24
- Prefijo de ID
- ID de símbolos
- home, search, user
Los sprites SVG de símbolos mantienen los sistemas de iconos compactos, cacheables y accesibles: un documento oculto guarda símbolos reutilizables, y cada botón o elemento de navegación los apunta con un breve elemento use. Diseñadores e ingenieros front-end siguen perdiendo tiempo escribiendo a mano el contenedor, renombrando ids y sincronizando los puntos de uso cuando entra un icono nuevo. Esta capacidad acepta una lista no vacía de identificadores de icono, un viewBox y un prefijo de id opcionales, y devuelve el marcado del sprite de forma determinista más un fragmento use por cada id de símbolo final.
Qué es un sprite SVG de símbolos y por qué importan las listas de ids
Un sprite clásico de iconos SVG es un único elemento svg raíz, suele ocultarse con display none y marcarse aria-hidden para que la tecnología de asistencia omita el bloque de definiciones. Dentro, cada icono es un elemento symbol cuyo id es el nombre estable que su producto usa en todas partes: home, search, cart, user-settings.
Las rutas y la geometría viven como hijos de esos símbolos; esta herramienta emite las envolturas vacías de symbol con un viewBox compartido para que su canal de activos o la exportación del diseñador puedan inyectar la geometría después sin reescribir cada consumidor. En los puntos de llamada se referencia un símbolo con use y un fragmento href que coincide con el id del símbolo, normalmente envuelto en un svg pequeño para el tamaño y el estilo currentColor.
Mantener ese vocabulario de ids como una sola lista—no como marcado copiado—evita la deriva entre exportaciones Figma, componentes React, pies de correo y páginas de marketing estáticas.
Contrato de entrada, forma de la respuesta y reglas de validación
Cada entrada se recorta; los vacíos se rechazan. Todo id debe coincidir con un token de nombre SVG y XML práctico: letra o guion bajo al inicio, luego letras, dígitos, guion bajo, punto, dos puntos o guion. Esa regla bloquea espacios y caracteres que rompen atributos o referencias de fragmento.
Los valores de atributo se escapan para amp, comillas y corchetes angulares de modo que tokens raros pero legales sigan seguros dentro del marcado. La validación fallida no se factura.
Qué puede hacer con ella
Biblioteca de componentes y documentación Storybook
Mantenga los controles Storybook y los ejemplos del README alineados con ids de símbolo reales para que los desarrolladores no referencien un fragmento inexistente.
Shortcodes de CMS y páginas de marketing
Ofrezca a los autores de contenido marcado use listo para pegar en iconos de navegación y pie sin editar a mano las definiciones SVG.
Preguntas frecuentes
¿Qué devuelve el generador de sprites SVG de símbolos?
Usted añade la geometría de rutas dentro de los símbolos en su canal de activos.
¿Qué ocurre si la lista de ids está vacía?
Un catálogo vacío no es una publicación de sprite válida; corrija la lista e inténtelo de nuevo. La validación fallida no se factura.
¿Cómo establezco el viewBox de cada símbolo?
El ancho y el alto deben ser positivos.
¿Cómo añado un prefijo como icon- a todos los símbolos?
Indique el prefijo una sola vez y se colocará delante de cada nombre, de modo que home pasa a ser icon-home. Así sus iconos no chocan con un símbolo del mismo nombre que traiga otra biblioteca en la misma página.
¿Qué pasa si dos iconos acaban con el mismo nombre?
El sprite no se genera y usted recibe un mensaje claro, también cuando el choque solo aparece después de añadir el prefijo. Es más seguro corregir la lista que dejar que un símbolo sustituya a otro sin avisar en el navegador.
Herramientas relacionadas
Para desarrolladores — acceso por API
Todo lo de esta página está disponible por programación. Esta sección es para equipos que quieren integrarlo en sus sistemas; el resto puede usar la herramienta de arriba sin más.
Endpoint de API
¿Prefiere automatizarlo? Un POST autenticado crea la tarea; el resultado llega por webhook o enlace firmado. La misma capacidad también se ejecuta aquí en la web, por email y desde Telegram — y pronto también desde nuestra app.
Llámela desde su stack
curl -X POST https://api.kit.forhosting.com/web/svg-symbol-sprite-build \
-H "Authorization: Bearer $KIT_KEY" \
-H "Content-Type: application/json" \
-d '{"ids":["home","search","user"]}'const res = await fetch("https://api.kit.forhosting.com/web/svg-symbol-sprite-build", {
method: "POST",
headers: {
"Authorization": `Bearer ${process.env.KIT_KEY}`,
"Content-Type": "application/json"
},
body: JSON.stringify({
"ids": [
"home",
"search",
"user"
]
})
});
const { task_id } = await res.json();import os, requests
res = requests.post(
"https://api.kit.forhosting.com/web/svg-symbol-sprite-build",
headers={"Authorization": f"Bearer {os.environ['KIT_KEY']}"},
json={
"ids": [
"home",
"search",
"user"
]
},
)
task_id = res.json()["task_id"]<?php
$res = file_get_contents("https://api.kit.forhosting.com/web/svg-symbol-sprite-build", false, stream_context_create([
"http" => [
"method" => "POST",
"header" => "Authorization: Bearer " . getenv("KIT_KEY") . "\r\nContent-Type: application/json",
"content" => '{"ids":["home","search","user"]}',
],
]));
$task = json_decode($res, true);body := bytes.NewBufferString(`{"ids":["home","search","user"]}`)
req, _ := http.NewRequest("POST", "https://api.kit.forhosting.com/web/svg-symbol-sprite-build", body)
req.Header.Set("Authorization", "Bearer "+os.Getenv("KIT_KEY"))
req.Header.Set("Content-Type", "application/json")
res, _ := http.DefaultClient.Do(req)Ejemplo de solicitud
{
"ids": [
"home",
"search",
"user"
]
}Ejemplo de respuesta
{
"task_id": "tsk_a1b2c3d4e5f6a1b2c3d4e5f6",
"type": "web.svg_symbol_sprite_build",
"status": "queued",
"_links": {
"result": "/tasks/tsk_…/result"
}
}La API es asíncrona: la llamada devuelve un task_id al instante y el resultado llega por webhook. El polling está limitado a 1 req/s por tarea.
Precio
Precio publicado — sin tokens ni créditos inventados. Una tarea fallida no se cobra.
Límites
timeout_sec | 30 |
max_crawl_pages | 25 |
Errores
| HTTP | Código | Significado |
|---|---|---|
401 | unauthorized | API key ausente o inválida. |
402 | insufficient_balance | El saldo no cubre el precio de la tarea. |
404 | unknown_type | El tipo de tarea no existe. |
429 | rate_limited | Demasiadas peticiones. Use el webhook en vez de sondear. |
Notas técnicas
Las listas vacías fallan con invalid_input para que las canalizaciones no publiquen un sprite hueco.
Qué es un sprite SVG de símbolos y por qué importan las listas de ids
Cuando la lista está vacía no hay nada que publicar: este endpoint rechaza arrays de ids vacíos en lugar de devolver un sprite con cero símbolos, lo que pasaría un build descuidado y enviaría UI rota. El id_prefix opcional (por ejemplo icon-) permite a monorepos dar espacio de nombres a los símbolos para que widgets de terceros no colisionen con su propio id home. El view_box opcional usa por defecto el lienzo habitual 0 0 24 24 de conjuntos estilo Material, pero puede pasar cualquier viewBox de cuatro números para que artboards de 16 píxeles o personalizados se mantengan coherentes en todo el sprite.
Contrato de entrada, forma de la respuesta y reglas de validación
Envíe por POST un cuerpo JSON con ids, un array no vacío obligatorio de cadenas (se aceptan los alias icon_ids e icons). Los ids de símbolo finales duplicados—tras aplicar el id_prefix opcional—fallan con un mensaje invalid_input claro para que corrija el catálogo en lugar de sobrescribir símbolos en el navegador. view_box es opcional y por defecto es 0 0 24 24; si se proporciona debe ser cuatro números separados por espacios con ancho y alto positivos. id_prefix es opcional y vacío por defecto; si se define debe ser un token de nombre válido para que el id de símbolo concatenado siga siendo legal. En el éxito el cuerpo incluye count, el view_box e id_prefix normalizados, symbol_ids en el orden de entrada, sprite_markup como un svg oculto multilínea con un symbol vacío por id, use_snippets como objetos con campos id y snippet listos para pegar, y use_list_markup que une esos fragmentos con saltos de línea para demos rápidas. Las llamadas correctas consumen saldo KIT prepago al precio base publicado $0.002 porque es trabajo de parse puro, sin tokens de modelo ni red saliente.
Dónde la generación de sprite y use aporta valor real
Los equipos de design system generan la envoltura del sprite cuando cambia un archivo de tokens de iconos y abren un PR que solo añade hijos path dentro de los símbolos existentes. Sitios de marketing y temas CMS pegan fragmentos use en rich text o bibliotecas de shortcodes sin enseñar a los autores la sintaxis SVG completa. Mantenga las listas de ids en control de versiones, rechace publicaciones vacías, y obtendrá una fuente de verdad única para sprites SVG de símbolos sin levantar un CDN de iconos solo para el marcado de la envoltura. Las bibliotecas de componentes envían controles Storybook que listan ids de símbolo de la misma respuesta API para que la documentación no invente un id que el sprite no define. Las revisiones de accesibilidad comprueban que el bloque de definiciones es aria-hidden y que los uses decorativos llevan aria-hidden y focusable false como emite este endpoint por defecto—los autores aún añaden aria-label o title cuando un icono es el único nombre visible de un control. Productos multi-marca mapean prefijos de marca con id_prefix para que una sola canalización emita brand-a-home y brand-b-home sin bifurcar handlers. Workers de borde y generadores estáticos pueden llamar a la misma forma de módulo en la ruta gratuita del navegador para previsualizaciones y en la ruta API para reconstrucciones masivas tras un volcado de diseño.
Casos de integración
Exportaciones de design tokens y catálogo de iconos
Convierta una lista JSON de nombres de iconos en una envoltura de sprite SVG oculta y fragmentos use coincidentes cada vez que el catálogo cambie en CI.
Preguntas técnicas
¿Puedo dar espacio de nombres a los ids con un prefijo?
Sí. Defina id_prefix (por ejemplo icon-) para que home pase a icon-home. Los duplicados tras el prefijo se rechazan.
¿Cuánto cuesta generar un sprite SVG de símbolos?
La herramienta en el navegador es gratuita. Las peticiones API usan saldo KIT prepago a $0.002 por llamada correcta; la entrada inválida no se factura.