2

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):

Captura con los círculos en negro en lugar de con color

¿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.

0

2 respuestas 2

3

Encontré una posible solución que, en lugar de utilizar la etiqueta img, utiliza la etiqueta use dentro de un svg inline y que funciona como quiero.

Lo que hace la etiqueta use es que toma los nodos de dentro de un SVG y los duplica donde esté la etiqueta. Básicamente es como clonar el contenido del SVG enlazado dentro del SVG que lo enlaza mediante use. Y lo mejor es que parece que funciona en Chrome, IE y Firefox sin problemas.

Partiendo de una imagen SVG que he creado (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>

Lo que haría es crear una etiqueta svg inline, que incluya (use) el grupo con id #dibujo de miImagen.svg:

<svg>
  <use xlink:href="miImagen.svg#dibujo"></use>
</svg>

Al utilizar use, es como si el grupo con id #dibujo dentro de miImagen.svg se clonara y estuviese inline en el documento, por lo que los estilos CSS para el color se aplican gracias a currentColor y funciona tal como quiero.

Un problema es que el fichero enlazado con use está sujeto a ciertas reglas de seguridad y tanto el dominio, protocolo y puerto deben coincidir entra la página y el fichero SVG... por lo que no puedo poner un ejemplo que funcione del todo aquí.

Pero la idea sería la siguiente:

.rojo {
  color:red;
}

.verde {
  color:green;
}

svg {
  width:10px;
  height:10px;
}
<div class="rojo">
  <svg><use xlink:href="miImagen.svg#dibujo"></use></svg>
  Icono Rojo
</div>
<div class="verde">
  <svg><use xlink:href="miImagen.svg#dibujo"></use></svg>
  Icono Verde
</div>

No es tan sencillo como usar simplemente img pero se adapta bastante bien a lo que quiero y no es excesivamente complejo.


Una cosa buena de utilizar use es que se puede usar con recursos externos e internos, es decir, con elementos que ya están en la página. Así, otra opción sería poner mi SVG inline una vez y hacer referencia al mismo múltiples veces (pero entonces no aprovecharía la caché del navegador).

Aquí dejo un ejemplo:

#circulo-original {
  display:none;
}

.rojo {
  color:red;
}

.verde {
  color:green;
}

.circulo {
  width:10px;
  height:10px;
}
<!-- mi SVG original, inline y oculto -->
<svg id="circulo-original" 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>

<div class="rojo">
  <svg class="circulo"><use xlink:href="#dibujo"></use></svg>
  Icono Rojo
</div>

<div class="verde">
  <svg class="circulo"><use xlink:href="#dibujo"></use></svg>
  Icono Verde
</div>


Algunos enlaces que me ayudaron con esta solución:

1

No te voy a dar la respuesta exacta que pides porque sinceramente creo que no se puede, pero quizás esta te sirva. He tomado como elementos más importantes los siguientes:

  1. El archivo svg debe ser externo
  2. Debo poder cambiar el color de distintos elementos del svg
  3. Se debe heredar el color del elemento que lo contiene

Si con las dos primeras te vale sigue leyendo:

Se debe modificar el fichero svg para añadirle una hoja de estilos poniendo antes de la etiqueta svg lo siguiente:

<?xml-stylesheet type="text/css" href="estilo.css" ?>

Además si como en el caso que nos propones al final va a ser un svg "complejo" (pero no mucho para no morirte poniendo etiquetas) y quieres aplicar el cambio de color sólo a algunas partes debes de poner un atributo class a cada path que quieras modificar por CSS.

Una vez hecho esto la forma de cambiar el color será mediante la hoja de estilos, no por herencia:

.pathPrueba1 {
    fill: red;
}

Y finalmente para insertarlo en tu HTML debes añadirlo como un object:

<object type="image/svg+xml" data="mi.svg"></object>

Da igual el CSS que apliques al HTML, el estilo se lo está dando la referencia que tienes puesta en el archivo SVG. Si quieres aplicarle estilo en el HTML deberás pegar el contenido del svg dentro, pudiendo aplicar estilos libremente a cada parte como ya has hecho.

Todo esto lo he sacado del siguiente enlace: https://css-tricks.com/using-svg/

Viene algún truco más, a lo mejor tú puedes encontrar una solución que se adapte más a lo que quieres exactamente (incluye ejemplo con desenfoques y otras cosas).

2
  • No me termina de funcionar esta solución. Consigo añadir la hoja de estilos correctamente, ¿pero ahora cómo puedo usar eso para que con el mismo fichero se apliquen colores diferentes? Al estar la hoja de estilos definida, si incluyo dos veces el SVG en mi página, las dos veces tendrá el mismo color. Necesitaría dos archivos SVG (con diferentes hojas de estilo) para que me funcionase, ¿no? ¿o hay alguna manera de pasarle la hoja de estilo como parámetro?
    – Alvaro Montoro
    Commented el 23 nov. 2016 a las 0:46
  • No, lo que has dicho es correcto, es la pega de definirlo así, pero leyendo tu solución parece mejor @AlvaroMontoro.
    – Awes0meM4n
    Commented el 23 nov. 2016 a las 16:24

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.