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
- Codificación
- UTF-8 (predeterminado) produce una data URI legible data:image/svg+xml, con URL encoding. Base64 usa data:image/svg+xml;base64, para herramientas o navegadores que esperan Base64. El snippet CSS de background sigue la misma codificación.
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.
- 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.
- Codificación
Codifica o decodifica Base64, componentes URL y entidades HTML — solo en el cliente.
- Serialización
Serializa y deserializa estructuras PHP junto a los flujos JSON.
- Herramientas JSON
Valida, formatea, compara y explora payloads JSON — complementarias a minificadores y convertidores.
- 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.
- 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 color y CSS
Comprobación de contraste WCAG pegada localmente con sintaxis de color CSS moderna — vistas de par y matriz, nunca se sube.
- 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.
- Herramientas HTTP
cURL, mensajes HTTP, URLs, HAR y Cookie / Set-Cookie pegados en el navegador — formatear e inspeccionar, nunca se envían.
- Herramientas SEO / Web
Genera meta tags, Open Graph y Twitter Card localmente — vistas simuladas desde tus entradas, nunca fetch de tu sitio en vivo.
- 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.
- Etiquetas de código de barras
Dibuja etiquetas Code 128, EAN-13 y UPC-A en el navegador — descarga PNG y SVG, no es un lookup GS1.