SVG → Base64
Convierte un SVG en un data URI que puedes pegar directamente en HTML o CSS — Base64 y la forma con codificación URL, normalmente más pequeña, una al lado de la otra.
o haz clic para buscar — solo SVG
Funciona en cualquier sitio donde funcione una URL. Siempre es alrededor de un tercio más grande que el archivo original.
La misma imagen, normalmente más pequeña que en Base64 — y además legible, lo que ayuda al depurar CSS.
una petición menos
Un data URI mete la imagen dentro del propio HTML o CSS, así que el navegador nunca hace una segunda petición para conseguirla. En iconos pequeños, esa es la diferencia entre aparecer al instante y aparecer un momento después.
La contrapartida es la caché: un icono incrustado se vuelve a descargar con cada página que lo contiene y no se puede cachear por separado. Incrusta el puñado de iconos que importan para el primer pintado y deja el resto como archivos.
tres pasos
Elige un archivo .svg — se queda en tu dispositivo.
Copia el data URI en Base64 o con codificación URL.
Usa la etiqueta img o la regla de fondo CSS ya preparadas.
respuestas rápidas
Para SVG suele ser más pequeña la codificación URL, porque el SVG es texto y Base64 añade alrededor de un 33 % a todo lo que toca. Además la codificación URL es legible, así que reconoces la forma que buscabas dentro de la hoja de estilos. Usa Base64 cuando algo del proceso estropee los caracteres en crudo.
Base64 codifica tres bytes como cuatro caracteres, así que un tercio del crecimiento es inevitable. Pasa antes el archivo por el optimizador de SVG: los metadatos del editor y las coordenadas con demasiados decimales suelen pesar más que la propia codificación.
Sí — el bloque CSS está listo para pegar. Usa la forma con codificación URL dentro de comillas dobles, y por eso el codificador cambia las comillas dobles del propio SVG por comillas simples.
Casi siempre es una `#` sin codificar. Un color como `#fff` corta la URL en ese punto y todo lo que viene después se trata como fragmento. La salida de aquí ya lo escapa: el problema suele surgir cuando el data URI se edita a mano después.
No. La codificación es puro trabajo de cadenas de texto hecho en tu navegador.