Pega código SVG y obtén una data URI lista para CSS o HTML, gratis y privada.
Qué es una data URI y por qué te ahorra archivos
En una página web, cada imagen externa es una petición más al servidor y un archivo más que puede fallar. Una data URI rompe esa dependencia: la imagen viaja dentro del propio código, codificada como texto. Esta herramienta convierte tu código SVG en esa cadena lista para pegar en CSS o en HTML. Es gratis, funciona por completo en tu navegador y tu código nunca sale de tu dispositivo. Nada se sube, nada se guarda y nadie más lo ve.
El caso más habitual es un icono pequeño. Un logo en la cabecera, un patrón de fondo en un botón o un adorno en una lista pueden vivir dentro de la hoja de estilos, sin carpeta de imágenes ni enlaces que se rompan al mover el proyecto. Para gráficos pequeños, esa autonomía compensa con creces. Para ilustraciones grandes, en cambio, un archivo normal sigue siendo más práctico, y conviene saber distinguir ambos casos.
Dos formatos de salida según lo que necesites
La herramienta ofrece dos codificaciones. La primera es la codificación URL, más corta y legible, ideal para CSS moderno. La segunda es base64, algo más larga pero a prueba de caracteres problemáticos, útil cuando trabajas con sistemas estrictos o herramientas antiguas. La vista previa te confirma que el resultado es correcto antes de copiar nada, un paso que evita errores tontos en el proyecto.
Un detalle que causa muchos fallos es el carácter almohadilla en los colores. Un relleno como #0f766e debe convertirse en %230f766e; si no, el navegador corta la imagen justo ahí y el gráfico desaparece. El conversor hace ese trabajo por ti, junto con los ángulos, las comillas y los paréntesis. Por eso conviene usar una herramienta y no pegar SVG crudo en CSS a mano.
Cómo usarla paso a paso
Pega el código SVG en el cuadro. Si no tienes uno a mano, el botón de ejemplo carga un gráfico pequeño para probar al instante. Elige el formato, pulsa convertir y copia la cadena con el botón de copiar. En CSS se usa así: background-image: url(“data:image/svg+xml,…”). En HTML, la misma cadena va directa en el atributo src de una etiqueta img. Mantén las comillas en CSS, porque sin ellas algunos caracteres pueden cerrar el valor antes de tiempo.
Antes de usarla en producción, pega la cadena en una página de prueba y comprueba que el gráfico se ve igual que el original. Presta atención a los colores y a las proporciones. Si algo se ve distinto, revisa que el SVG original no dependa de fuentes externas o de estilos de otro archivo, porque una data URI viaja sola y no arrastra esas dependencias.
Usos prácticos que quizás no habías pensado
En correos electrónicos, donde muchos clientes bloquean imágenes externas, una data URI pequeña se muestra sin pedir permiso al lector. En plantillas y temas, un icono incrustado sobrevive a cambios de carpeta y a migraciones de servidor. En ejercicios y apuntes, un diagrama pequeño dentro del HTML se comparte como un único archivo, sin adjuntos que se pierdan.
También sirve para prototipos rápidos. Cuando diseñas una página y aún no tienes la carpeta de recursos organizada, incrustar los iconos te permite avanzar sin interrumpir el trabajo. Más adelante, si el gráfico crece o se reutiliza en muchas páginas, puedes extraerlo a un archivo normal. La herramienta no te ata a una decisión: te da velocidad ahora y libertad después.
Consejos para resultados limpios
Quita la declaración XML del principio del SVG cuando la tenga; el prefijo data:image/svg+xml ya indica al navegador qué es el contenido. Reduce el código antes de convertir: elimina comentarios, grupos vacíos y decimales innecesarios. Cada byte que ahorras en el SVG se ahorra también, multiplicado, en la cadena final.
La herramienta funciona en móvil, tableta y ordenador, sin cuentas ni instalaciones. Pega, convierte, copia y listo. Tu código permanece privado durante todo el proceso, y la URI resultante es tuya para usarla en cualquier proyecto, tantas veces como quieras.
Más Herramientas de Imagen Gratis
- Convertidor De Imagenes A Tga Gratis Archivos Tga Para Juegos
- Enfocar Fotos Borrosas Gratis Herramienta Para Nitidez Online
- Reducir Ruido De Fotos Con Grano Gratis Limpia Tus Imagenes
- Ajustar Balance De Blancos Gratis Corrige Fotos Amarillas O Azules
- Editor De Curvas De Tono Gratis Ajusta Sombras Y Luces Con Precision
- Mezclador De Canales Rgb Gratis Mezcla Rojo Verde Y Azul
- Creador De Apng Animados Gratis Png Animados Desde Fotos
- Animador De Sprite Sheets Gratis Reproduce Sprites Como Gif
- Comparador De Diferencias Entre Imagenes Gratis Encuentra Cambios Pixel A Pixel
- English version
Pingback: Ajustar Balance de Blancos Gratis - Corrige Fotos Amarillas o Azules