SVG a Data URI

¿Qué es un data URI de SVG?

Un data URI es una forma de incrustar un archivo directamente dentro de una URL en lugar de apuntar a un archivo aparte en un servidor. Para SVG se ve como data:image/svg+xml,... seguido del marcado codificado. Como la imagen viaja dentro de la propia URL, puedes colocarla directamente en el src de una img, en un atributo HTML en línea, en una variable de JavaScript, o pegarla en la barra de direcciones para ver el gráfico. No hay una petición de red adicional ni un archivo .svg aparte que alojar, lo que hace que los data URI sean prácticos para iconos pequeños y gráficos en línea.

Cómo convertir un SVG a un data URI

Convertir tu SVG en un data URI solo lleva unos pocos pasos:

1. Pega el código de tu SVG en el cuadro de entrada.
2. Elige codificación URL para el resultado más pequeño, o Base64 si lo necesitas.
3. Haz clic en Convertir a data URI.
4. Copia el data URI puro para el src de una img o para JavaScript, o copia la etiqueta img HTML ya lista.
5. Revisa la vista previa en vivo para confirmar que se renderiza como esperas.

Codificación URL o Base64: ¿cuál debería usar?

Ambas producen un data URI de SVG válido, pero codifican el marcado de forma distinta. La codificación URL solo escapa los caracteres que son inseguros en una URL, así que el resultado se mantiene mayormente legible y suele ser más pequeño que Base64 para SVG, motivo por el cual es la opción predeterminada recomendada. Base64 reescribe todo el archivo en un alfabeto compacto de letras y dígitos; es ligeramente más grande para SVG, pero es la opción más segura cuando una herramienta o un flujo de trabajo maneja mal los corchetes angulares y las comillas en bruto. Para la mayoría de los iconos y gráficos en línea, la codificación URL te da el resultado más pequeño y limpio.

¿Dónde puedo usar un data URI de SVG?

En cualquier lugar donde se acepte una URL. Los sitios más comunes son el src de un elemento img y el href de un enlace u object, pero también puedes pasar un data URI al constructor Image de JavaScript, guardarlo en una variable, usarlo como favicon o pegarlo en la barra de direcciones de tu navegador para previsualizar la ilustración. Si lo que quieres específicamente es un fragmento de CSS background-image: url(...), nuestra herramienta SVG a CSS envuelve ese mismo data URI en una declaración de CSS por ti.

¿Por qué usar este conversor de SVG a data URI?

• 100% gratis, sin anuncios, registro ni límites.
• Genera un data URI puro listo para el src de una img, un atributo HTML, JavaScript o la barra de direcciones.
• Elige codificación URL para el resultado más pequeño o Base64 cuando lo necesites.
• Copia una etiqueta img HTML completa con un solo clic.
• Muestra una vista previa en vivo y el tamaño en bytes del data URI.
• Se ejecuta por completo en tu navegador, así que tu SVG nunca sale de tu dispositivo.

Preguntas frecuentes