Usando SVG inline puedo hacer que se herede el color actual utilizando el valor currentColor
para la propiedad fill
. De este modo puedo hacer que mi imagen se adapte al color del elemento que lo contiene. Por ejemplo:
.rojo {
color:red;
}
.verde {
color:green;
}
<div class="rojo">
<svg width="10" height="10" viewBox="0 0 10 10" xmlns="http://www.w3.org/2000/svg">
<g id="dibujo">
<circle cx="5" cy="5" r="4" fill="currentColor" />
</g>
</svg>
Hola
</div>
<div class="verde">
<svg width="10" height="10" viewBox="0 0 10 10" xmlns="http://www.w3.org/2000/svg">
<g id="dibujo">
<circle cx="5" cy="5" r="4" fill="currentColor" />
</g>
</svg>
Adiós
</div>
Eso está genial porque funciona: los círculos se ven de diferente color incluso cuando el código para los SVG es el mismo en ambos casos. El problema es que no quiero tener el mismo código inline muchas veces.
Preferiría que estuviese en un archivo externo, como éste que llamaré miImagen-svg:
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="10" height="10" viewBox="0 0 10 10" xmlns="http://www.w3.org/2000/svg">
<g id="dibujo">
<circle cx="5" cy="5" r="4" fill="currentColor" />
</g>
</svg>
y entonces poder añadirlo de forma sencilla múltiples veces:
<div class="rojo">
<img src="./miImagen.svg" alt="Mi SVG en rojo" />
Hola
</div>
<div class="verde">
<img src="./miImagen.svg" alt="Mi SVG en verde" />
Adiós
</div>
Pero si hago eso, currentColor
deja de funcionar y se ven los círculos en negro (añado captura del resultado porque no me permite subir SVG):
¿Cómo puedo hacer para incluir un SVG "externo" y que se herede el valor de currentColor
?
Nota: la imagen con la que voy a trabajar es más grande y compleja que sólo un círculo que cambia color, tendría múltiples colores y líneas que cambiarían de color con
currentColor
. Me había planteado ponerla en una fuente e incluirla como los glyphicons de Bootstrap o FontAwesome, pero al ser grande y multicolor, no sé si esa opción es factible.