SVG a Data URI en línea — Generador CSS background
Transforma un SVG bruto en un data URI compacto para pegar en background-image CSS o HTML inline. Todo se hace en local.
Notas para desarrolladores
• Parsea un único <svg> raíz y normaliza el markup antes de codificar. • Ideal para iconos, badges e ilustraciones pequeñas incrustadas en CSS. • Conserva el artwork más grande como archivo independiente cuando el caché importa. • Combínalo primero con optimize-svg para data URI más cortas.
Opciones
Cuándo elegir esta herramienta
• Incrustar logos pequeños en background-image CSS. • Publicar iconos decorativos sin otra petición de red. • Construir badges de pseudo-elementos en design systems. • Comparar la salida codificada después de una limpieza SVGO.
Ejemplos prácticos
Badge listo para incrustar en CSS
Entrada de ejemplo
Salida
Optimizar primero, codificar después
Entrada de ejemplo
Salida
Explorar herramientas SVG relacionadas
Reduce primero la fuente con optimize SVG, inspecciona el tamaño en resize SVG o recorre el hub de herramientas SVG.
FAQ de SVG a Data URI
Codificación para backgrounds CSS
¿Cuándo debo usar una data URI?
Úsala para assets UI pequeños donde reducir peticiones importa más que cachear un archivo.
¿Debo optimizar el SVG primero?
Sí — un markup de origen más pequeño produce una URI más corta y un CSS más ligero.
¿Se sube mi SVG?
No. El parseo y la codificación ocurren en local en tu navegador.
Herramientas SVG
Previsualiza, optimiza con SVGO, exporta Data URI, redimensiona, embellece, convierte a JSX y valida SVG — todo en tu navegador.
Explorar otras categorías de herramientas
Minificar
Reduce código y assets para producción — minifica JavaScript, CSS, HTML, JSON y XML antes de gzip o un despliegue CDN.
Embellecer
Haz el código legible con una indentación coherente — embellece JavaScript, CSS, TypeScript, SCSS, LESS, Markdown, GraphQL, SQL, YAML y más en tu navegador.
Desminificar
Expande código minificado o comprimido — desminifica JavaScript, CSS, TypeScript, SCSS, LESS, SQL, YAML y otros formatos al depurar o revisar.
Conversión
Transforma datos entre JSON, YAML, XML y CSV en local — sin subidas a un servidor.
Preprocesadores CSS
Compila SCSS o LESS a CSS estándar en el navegador — combínalo con embellecer o minificar para un flujo de hoja de estilos completo.
Herramientas JSON
Valida, formatea, compara y explora payloads JSON — complementarias a minificadores y convertidores.
DevOps e Infra
Formato, validación y minificación de Terraform HCL, formato y lint de Dockerfile, validación de Docker Compose y .env.
CI/CD
GitHub Actions y GitLab CI — formatear YAML y comprobar la estructura de workflows/jobs en el navegador.
Logs y observabilidad
JSON/NDJSON línea a línea y access logs de Nginx/Apache — formato, filtro, validación y CSV/TSV.
Kubernetes
Manifiestos multi-doc, validación estructural, starters Ingress/Deployment y formato de values de Helm.
Red / IP
CIDR, subredes y ayudas IPv4/IPv6 — en tu navegador.
Seguridad y tokens
JWKS, certificados X.509 y escaneo de secretos — en local en el navegador.
API y esquemas
Herramientas OpenAPI para formatear, validar y analizar tus specs.
Codificación
Codifica o decodifica Base64, componentes URL y entidades HTML — solo en el cliente.
Utilidades para desarrolladores
Timestamps, UUID, ULID, Nanoid, cron, contraseñas, regex, slugify, bases numéricas, mayúsculas, diff de texto y chmod — todo en el cliente.
Texto y Markdown
Cuenta palabras, genera TOC Markdown y limpia listas de líneas — todo en tu navegador.
IA y LLM
Conteo de tokens, estimación de costes y ajuste a la ventana de contexto — 100 % en el navegador.
Datos de prueba
Valores de campo sintéticos para fixtures y seed de BD — primero números de teléfono en rangos reservados.
Serialización
Serializa y deserializa estructuras PHP junto a los flujos JSON.