SVG a CSS

Por qué escapar es mejor que Base64

Base64 se diseñó para transportar datos binarios por canales de texto. Un SVG ya es texto, así que pasarlo por Base64 es dar un rodeo: crece un 33% y deja de ser legible.

Escapando únicamente los caracteres que romperían el CSS, el data URI queda más corto que el SVG original en Base64 y además se puede leer, buscar y editar directamente en la hoja de estilos. En un icono típico el ahorro ronda el 25%.

Cómo colorear un SVG desde CSS

Un SVG usado como background-image no se puede recolorear desde fuera: es una imagen y sus colores están dentro. Si necesitas que el icono cambie de color, la solución es usarlo como máscara:

.icono {
  background-color: currentColor;
  mask-image: url("data:image/svg+xml,…");
  mask-size: contain;
  mask-repeat: no-repeat;
}

Así el color lo pone background-color y el SVG solo define la forma. Elige la opción "mask-image" arriba y obtienes ese CSS ya montado. Es la técnica que usan la mayoría de sistemas de iconos actuales.