SVG a Base64

Cómo convertir SVG a Base64

1. Suelta un archivo .svg en el recuadro o elígelo con el selector de archivos.
2. Salida como empieza en CSS background-image. Cambia a Data URI, HTML <img>, Markdown o Base64 simple si necesitas otra forma.
3. Pulsa Copiar salida y pega la regla en tu hoja de estilos.

El SVG se codifica exactamente como está guardado. Aquí no hay opciones de tamaño ni de calidad, porque un vector no las necesita. Si quieres una cadena más corta, pasa antes el archivo por un optimizador de SVG; quitar los metadatos del editor suele ahorrar más que cualquier elección de codificación.

SVG en Base64 o codificado para URL

SVG es texto, así que no tiene por qué ir en Base64. Una data URI puede llevar el código directamente si se codifican por porcentajes unos pocos caracteres. Este es el mismo icono de triángulo de 104 bytes de las dos formas:

/* Base64: 140 characters of data */
.a { background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCI+PHBhdGggZD0iTTEyIDIgMiAyMmgyMHoiIGZpbGw9IiNmOTAiLz48L3N2Zz4="); }

/* URL-encoded: 118 characters of data */
.b { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2 2 22h20z' fill='%23f90'/%3E%3C/svg%3E"); }

La versión codificada para URL es más corta, y la diferencia crece tras gzip: las dos reglas de arriba se comprimen a 200 y 162 bytes. Con 20 iconos pequeños en una hoja de estilos, la versión Base64 ocupaba 4.421 bytes (801 con gzip) y la codificada para URL 3.720 bytes (615 con gzip). El código repetido se comprime bien, y Base64 desordena esa repetición.

Base64 no necesita reglas de escape, sobrevive en cualquier contexto que acepte una URL y es lo que esperan muchas API y herramientas de build. La forma codificada para URL se rompe si olvidas escapar # (inicia un fragmento de URL) o si mezclas el tipo de comillas con el url("...") que la rodea. SVG a data URI genera ambas versiones y muestra sus tamaños.

Requisitos de una data URI de SVG

• Tipo MIME image/svg+xml. Los navegadores detectan los datos PNG y JPEG incluso con un tipo incorrecto, pero no los SVG. Con cualquier otro tipo, la imagen no se renderiza.
• El atributo xmlns. Un <svg> incrustado en HTML funciona sin él, pero como imagen el elemento raíz debe declarar xmlns="http://www.w3.org/2000/svg". A muchos iconos escritos a mano les falta y fallan sin avisar.
• XML bien formado. Una etiqueta sin cerrar o un & sin escapar hacen fallar toda la imagen, sin renderizado parcial.

El Base64 de un SVG suele empezar por PHN2Zy (<svg) o PD94bWwg (<?xml ). Cualquier otra cosa al principio, como un comentario o una marca de orden de bytes, no molesta a los navegadores, pero hace que el formato sea más difícil de reconocer por el prefijo.

Estilos y colores

Un SVG usado como background-image o en <img> es un documento aparte. El CSS de tu página no puede entrar en él, así que los colores de hover y currentColor no funcionan. Dos soluciones habituales:

• Usa la data URI como máscara y coloréala con background-color:

.icon {
  width: 24px;
  height: 24px;
  background-color: currentColor;
  mask: url("data:image/svg+xml;base64,PHN2Zy...") center / contain no-repeat;
}

• Incrusta el código <svg> en el HTML cuando el icono tenga que cambiar según el estado o el tema.

Decodificar y corregir

Base64 a SVG convierte una cadena Base64 de nuevo en código que puedes leer y editar. Si un SVG se ve en un editor pero no como data URI, decodifícalo allí y comprueba primero si el elemento raíz tiene xmlns.

Preguntas frecuentes