SVG a Base64 - y por qué probablemente quieres la otra
Esta herramienta te da el base64 que venías buscando y después te enseña lo que casi todos los conversores omiten: para SVG, base64 es la peor de las dos formas de incrustar una imagen. Base64 existe para llevar datos binarios sanos y salvos por canales de texto. Un SVG ya es texto, así que codificarlo te cuesta un tercio de su tamaño por un problema que nunca tuvo. La codificación por porcentaje hace el mismo trabajo escapando el puñado de caracteres que romperían una URL y dejando el resto del archivo tal cual: más ligero en la red y todavía comprimible, cosa que base64 en buena medida no es. Aquí se producen ambas formas con sus cuentas de bytes en vivo al lado, así que puedes ver la diferencia en tu propio archivo en lugar de creernos. Todo se ejecuta en tu navegador, y el SVG se sanea antes de emitir nada.
Cómo usar esta herramienta
Suelta tu SVG
Arrastra un archivo a la caja de arriba o haz clic para elegirlo. Se comprueba por su contenido y no por su extensión, y cualquier script, manejador de eventos o referencia remota se elimina antes de codificar: esta salida va a tu página, así que primero se limpia.
Compara las dos codificaciones
El panel muestra juntos el tamaño de origen, el de la URI data: en base64 y el de la URI data: codificada en URL, con la diferencia porcentual. En los iconos que probamos, la forma codificada en URL quedó entre un 14 y un 18 por ciento por debajo.
Copia la forma que necesites
Cinco fragmentos, cada uno con su botón de copiar: el contenido base64 en bruto, las dos URI data:, una etiqueta <img> lista para usar y una declaración CSS background-image. Coge la que espere tu paso de compilación o tu campo del CMS.
Atiende al aviso de tamaño
A partir de unos 4 KB el panel te avisa. El marcado incrustado no puede cachearse aparte de la página que lo lleva, así que una URI data: grande se vuelve a descargar en cada página que la incluye: a ese tamaño, un archivo enlazado es casi siempre mejor opción.
Preguntas frecuentes
¿Cuánto más grande es base64 que el SVG original?
Entre un 36 % y un 43 % en los cuatro archivos que medimos. Un icono de 290 bytes se convirtió en una URI data: en base64 de 414 bytes; la versión codificada en URL fue de 339 bytes. Base64 usa cuatro caracteres por cada tres bytes por diseño, así que un tercio de ese crecimiento es estructural y el resto es el prefijo de la URI data:.
¿Por qué la codificación en URL es menor para SVG?
Porque solo hay que escapar unos pocos caracteres. La codificación por porcentaje paga tres bytes por cada %, #, corchete angular y salto de línea, y deja todo lo demás tal cual. Base64 paga un 33 % fijo sobre cada byte del archivo, sea el que sea. Para texto, el impuesto de escape es muchísimo menor que el impuesto fijo.
¿La versión codificada en URL funciona en todas partes?
Sí, en todos los navegadores en uso. Una URI data: sin el marcador base64 es simplemente texto codificado por porcentaje, la más antigua y mejor soportada de las dos formas. El único sitio donde base64 es realmente obligatorio es una cadena de herramientas que lo presupone, como ciertos campos de CMS y plugins de compilación antiguos.
¿Por qué habéis cambiado mis comillas dobles por apóstrofos?
Para no tener que escaparlas. Un SVG es sobre todo atributos, y codificar cada delimitador como %22 cuesta dos bytes por cabeza. Los delimitadores de atributo pasan a ser apóstrofos y el valor CSS se envuelve en comillas dobles, así que no hay que escapar ninguno. Los valores que ya contienen un apóstrofo se dejan intactos.
¿Debería incrustar o enlazar el archivo?
Incrusta iconos pequeños y muy usados; enlaza cualquier cosa mayor. Incrustar elimina una petición, pero los bytes pasan a vivir dentro de cada página u hoja de estilos que use el icono y no pueden cachearse por su cuenta. Alrededor de los 4 KB la cuenta se da la vuelta, y por eso el panel avisa ahí.
¿Gzip cambia la respuesta?
La amplía más que cerrarla. El SVG codificado por porcentaje sigue siendo texto reconocible con nombres de etiqueta y atributo repetidos, así que un compresor encuentra mucho con lo que trabajar. La salida en base64 se parece bastante al ruido desde el punto de vista de un compresor y apenas se reduce.
¿Se limpia mi SVG antes de codificarlo?
Sí, y aquí importa más que en un conversor que emite píxeles. Se eliminan los scripts, los manejadores de eventos on*, las referencias a imágenes remotas y las importaciones de hojas de estilo externas, y el panel lista lo que ha encontrado. Pegado en línea, un SVG sin sanear ejecuta todo lo que lleve dentro.
¿Puedo usar la URI data: como favicon o en un correo?
Como favicon no: los navegadores quieren una URL real ahí. En correo tampoco: todos los clientes importantes bloquean SVG por completo, con URI data: o sin ella. Las URI data: son para tus propias páginas web y hojas de estilo. Para correo, convierte antes el SVG a PNG y adjunta o aloja ese archivo.
¿Por qué mi icono se ve negro después de incrustarlo?
Porque usaba currentColor. Una URI data: es un documento aparte que no puede heredar el color del elemento que la referencia, así que currentColor cae a su valor inicial. Nuestra herramienta de SVG a CSS lo detecta y te entrega un fragmento con mask-image, que pinta la forma con el color de texto del propio elemento.
¿Para qué sirve la etiqueta <img> si ya tengo la URI data:?
Comodidad, y el atributo alt. El fragmento viene con alt="" ya puesto, que es el valor correcto para un icono decorativo y el que todo el mundo olvida: una imagen sin ningún atributo alt la anuncian los lectores de pantalla con su nombre de archivo, que en una URI data: es un muro de caracteres.
¿Se sube mi archivo a algún sitio?
No. La codificación son unas pocas líneas de aritmética que se ejecutan en tu navegador, así que tu archivo nunca se envía a un servidor, nunca se guarda y nunca lo vemos. Eso también significa que no hay cola ni más límite de tamaño que lo que tu propio dispositivo pueda mantener en memoria.
También podrías necesitar
¿Algo no funciona? Informar de un error