SVGView

SVG a Data URI

Genera Data URI desde SVG para incrustar en CSS o HTML sin archivos extra.

Arrastra y suelta tu archivo SVG

o haz clic para buscar, o pega el código SVG

Solo acepta archivos .svg
Pega el código SVG con Ctrl+V / Cmd+V

Por qué usar nuestro convertidor de SVG a Data URI

Base64 o URL-encoded

Cambia entre Base64 y codificación URL según compatibilidad y tamaño. URL-encoded suele ser más legible en diffs para SVGs simples.

Salida lista para copiar

Genera un data:image/svg+xml listo para usar y copiar. Evita tener que escapar manualmente caracteres como # o %.

Úsalo en cualquier sitio

Funciona en img src, CSS background-image, estilos inline o bloques HTML. Ideal para assets pequeños.

Procesamiento local

Sin subidas: el SVG se procesa en tu navegador.

Iteración rápida

Pega, convierte, copia y prueba en tu UI rápidamente.

Cómo convertir SVG a Data URI

1

Añade tu SVG

Arrastra y suelta o pega el marcado. Se carga localmente y conserva viewBox y colores.

2

Selecciona la codificación

Elige Base64 para compatibilidad máxima o URL-encoded para strings más cortos y editables.

3

Copia y embebe

Copia el resultado y pégalo en HTML, CSS o JSON.

Preguntas frecuentes: SVG Data URI

¿Qué es un Data URI y cuándo conviene usarlo?
Incrusta el SVG dentro de una cadena URL para usarlo inline sin alojar un archivo aparte. Útil para iconos y assets pequeños.
¿Base64 o URL-encoded?
Base64 es la opción más segura para cualquier contexto. URL-encoded suele ser más corto en SVGs simples y más fácil de leer en control de versiones.
¿Funciona en CSS background-image?
Sí. Pégalo dentro de background-image: url(...).
¿La conversión es privada?
Sí. Procesamiento local en el navegador; los archivos no se suben.
¿Cuál es el límite de tamaño?
Hasta 10MB. SVGs grandes generan strings largos; en esos casos puede ser mejor usar un archivo normal.
¿Conviene optimizar antes?
Sí. SVGs más pequeños producen strings más cortos y fiables.
¿Se conservan colores y viewBox?
Sí. Mantiene viewBox, fills y strokes para que el render coincida con el origen.
¿Es gratis?
Sí. Gratis y sin descargas.
¿Necesito cuenta?
No. Sin registro.

Herramientas SVG relacionadas

Previsualiza y optimiza antes de embebir para obtener strings más cortos y fiables.

SVG Viewer

Confirma tamaño, colores y viewBox antes de generar el Data URI.

Abrir herramienta

SVG Optimizer

Optimiza el SVG para acortar el string final.

Abrir herramienta

SVG a CSS

Genera snippets CSS listos para background-image y variables CSS.

Abrir herramienta

SVG a PNG

Usa PNG como fallback cuando el Data URI sea demasiado largo.

Abrir herramienta

SVG a React

Convierte a componente para comparar métodos de entrega en tu app.

Abrir herramienta

Blog SVG relacionado

Continúa con guías prácticas sobre flujos SVG, resolución de problemas y producción.