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.