Cambiar el color de los elementos SVG
Una de las preguntas que aparecen a menudo en Stack Overflow es como cambiar el color de relleno ( fill ) o de los trazados ( stroke ) de un elemento SVG, por ejemplo un icono.
Lo más fácil sería utilizar el svg "inline" o sea dentro del documento HTML.
El más importante de los argumentos contra esta técnica es que muchas veces el SVG es muy verboso y por lo tanto abulta mucho.
La solución a este problema sería crear un elemento SVG raíz donde guardar los trazados SVG a utilizar en la página. Este elemento raíz puede tener: width:0; height:0; position:absolute; left:-10em;. Esto prácticamente lo hecha fuera de la ventana para no molestar en la página.
En el código podemos poner este elemento raíz en el <body> al inicio o justo antes del cierre </body>. De esta manera lo tenemos todo ordenado y no molesta al leer el código.
Después podemos utilizar estos trazados con <use>:
#svgraiz{
width:0;
height:0;
position:absolute;
left:-10em;
}A otro perro con ese !!!
A otro perro con ese !!!
En mi opinión esta es la mejor solución, la que utilizaría en 90% de los casos.
Sin embargo hay situaciones en los cuales tenemos todos los elementos SVG en una carpeta y necesitamos utilizar los elementos SVG como imágenes o como objetos. ¿Cómo cambiar el color de los trazados en este caso?
Utilizar mascaras
Una posibilidad sería utilizar los iconos svg como mascara mask. El problema es que las mascaras CSS no están soportadas en IE y en los navegadores antiguos. Sin embargo podemos utilizar la regla @supports y dejar los iconos negros en los navegadores que no soportan mask
See the Pen eb3ad81f65113d4d9efd34807611efc9 by Gabi (@enxaneta) on CodePen.
Utilizar filtros
Pero que pasa si los iconos son negros i el fondo (background) también. En este caso podemos utilizar filtros para cambiar el color de los iconos de negro a blanco por ejemplo:
filter: invert(100%);
o filtros más elaborados como:
filter: invert(20%) sepia(100%) saturate(4000%);
para cambiar el negro a rojo ardiente.
Los filtros están mejor soportados en los navegadores aunque no están soportados en IE. También en este caso podemos utilizar la regla @supports para dejar los iconos negros y el fondo blanco en los navegadores que no soportan los filtros.
See the Pen SVG filtrado*** by Gabi (@enxaneta) on CodePen.