Toolipedia
ES
← Todas las herramientas de texto

SVG a data URI

Convierte un SVG en un data URI para fondos CSS o etiquetas <img>.

  • Gratis
  • Sin registro
  • Funciona en cualquier dispositivo

Acerca de SVG a data URI

Convierte un SVG en un data URI para usarlo en un background-image de CSS o en el src de un img, evitando una solicitud de archivo adicional. El SVG codificado como URL suele ser más pequeño que Base64, que añade aproximadamente un tercio. Los iconos pequeños se adaptan bien a la incrustación, mientras que las imágenes grandes es mejor tenerlas como archivos separados que se puedan almacenar en caché.

Cómo usar SVG a data URI

  1. Pega tu código SVG.
  2. Elige la codificación y el tipo de salida, como fondo CSS o img src.
  3. Copia el data URI en tu hoja de estilos o HTML.

¿Por qué usar esta herramienta?

También conocida como

Preguntas frecuentes

¿Es más pequeño el SVG en Base64 o codificado como URL?

Lo codificado como URL suele ser más pequeño, porque Base64 aumenta los datos en alrededor de un 33 %. Aun así, Base64 es más seguro en algunas herramientas antiguas.

¿Por qué mi data URI no funciona en CSS?

Las comillas dentro del SVG pueden chocar con las comillas alrededor de la URL. Usa la opción de salida CSS, que maneja las comillas por ti.

¿Puedo cambiar el color de un SVG usado como data URI?

No con el color de CSS, porque la imagen se trata como una imagen. Cambia el relleno en el SVG antes de codificarlo.

¿Es gratis SVG a data URI?

Sí. SVG a data URI de Toolipedia es de uso gratuito, sin registro y sin marca de agua.

¿Es seguro usarlo?

Sí. Todo se calcula en tu navegador y nada de lo que introduces se envía a nuestro servidor.

¿Funciona en mi teléfono?

Sí. Funciona en cualquier navegador moderno en Android y iPhone, y también en tabletas y computadoras. No hay que instalar nada.

¿Necesito una cuenta?

No. Solo abre la página y usa la herramienta. No hace falta registrarse ni dar un correo electrónico.

¿Puedo poner SVG a data URI en mi propio sitio web?

Sí. Usa el botón «Insertar en tu sitio» debajo de la herramienta para copiar un fragmento corto de código y pegarlo en tu página. Es gratis, no necesita cuenta y la herramienta sigue funcionando dentro de tu página.

Herramientas relacionadas