./prontouso.com

UTILIDADES DE DISEÑO

Conversor de SVG a Data URI

Pega marcado SVG para crear una URI compacta data:image/svg+xml para CSS o HTML, o decodifica una data URI de SVG de vuelta a marcado.

Estado de la herramientaSe ejecuta en tu navegador
Vista previa

Convierte SVG en una data URI segura para CSS/HTML y viceversa.

Cómo funciona

  1. Ingresa tus datos

    Completa los valores, pega el texto o sube el archivo que necesita esta herramienta.

  2. Obtén el resultado al instante

    La mayoría de las herramientas se actualizan mientras escribes; algunas usan un solo botón. De cualquier forma, el resultado aparece aquí mismo.

  3. Usa tu resultado

    Copia, descarga o comparte lo que genere la herramienta — el control siempre es tuyo.

Privacidad y procesamiento — Se ejecuta localmente en tu navegador. Esta herramienta no sube tu entrada a ningún servidor.

¿Qué es Conversor de SVG a Data URI?

Codifica marcado SVG en una Data URI para CSS o HTML, o decodifica una Data URI de SVG existente de vuelta a marcado.

ENTIENDE LA HERRAMIENTA

Cómo convertir SVG a una Data URI

Para qué sirve

Las Data URI de SVG son útiles para íconos pequeños en línea, fondos CSS y prototipos compactos.

Conversión en ambos sentidos

  • Pega marcado SVG para codificarlo.
  • Pega una Data URI de SVG para decodificarla.
  • Copia el resultado para CSS o HTML.

Mantenlo pequeño

Las Data URI funcionan mejor con SVG pequeños. Las ilustraciones grandes suelen ser más fáciles de mantener como archivos separados.

Ejemplo de Data URI

Insertar un SVG pequeño inline

Un SVG válido empieza con el elemento svg, se eliminan los comentarios y el resto del markup se codifica después del prefijo data:image/svg+xml.

<svg viewBox="0 0 10 10"> -> data:image/svg+xml,%3Csvg...

Notas sobre Data URI

Las Data URI son convenientes para SVG pequeños. Una vez que la cadena codificada se vuelve larga, un archivo .svg separado suele ser más fácil de cachear, leer y mantener.

Preguntas frecuentes

¿Puedo usar el resultado en CSS?

Sí. La salida codificada está lista para usarse en CSS url(...) o en atributos HTML.

¿Sanea el SVG?

No. Solo convierte texto, así que revisa los SVG de fuentes no confiables antes de usarlos.

¿Puede decodificar cualquier Data URI?

Está enfocado en Data URI de SVG, no en formatos de archivo arbitrarios.

¿Minifica el SVG?

Solo se eliminan comentarios y espacios externos. El espaciado interno de texto se conserva para no cambiar el aspecto del SVG.

Herramientas relacionadas