Codificador SVG Data URI
Pega código SVG y conviértelo al instante en una Data URI para usar en CSS o HTML. Previsualiza el gráfico y copia el resultado con un clic.
Cómo usar el codificador SVG
- Pega tu marcado SVG en el campo de entrada.
- Comprueba la vista previa para asegurarte de que el gráfico sigue viéndose bien.
- Copia la Data URI o el fragmento CSS ya preparado.
Por qué codificar SVG como Data URI
Una Data URI te permite incrustar SVG directamente en CSS o HTML sin depender de un archivo externo.
La codificación es importante porque SVG contiene caracteres que pueden romper URLs o atributos HTML si no se escapan correctamente.
La herramienta realiza todo el proceso localmente en tu navegador y devuelve tanto la URI como un ejemplo CSS listo para pegar.
Preguntas frecuentes
¿Qué es una Data URI? ▼
Es una forma de incrustar el contenido de un archivo directamente dentro de una cadena, sin usar una ruta externa.
¿Por qué no pegar SVG sin codificar en CSS? ▼
Porque el SVG suele contener caracteres que deben codificarse para que la URL sea válida.
¿Puedo usar el resultado en una etiqueta img? ▼
Sí. La Data URI generada sirve tanto para img src como para background-image en CSS.
¿Reduce el tamaño del archivo? ▼
A veces, pero la principal ventaja es la comodidad de incrustación.
¿Es privado? ▼
Sí. La conversión ocurre enteramente en tu navegador.