SVG file that inherits the current color

I found a possible solution that, instead of using the img tag, uses the tag use within a svg inline and that works as I want.

What the use tag does is that it takes the nodes from within an SVG and duplicates them where the tag is. Basically it is like cloning the content of the linked SVG within the SVG that links it with use . And the best thing is that it seems to work in Chrome, IE and Firefox without problems.

Starting with an SVG image that I created (which I will call myImage.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>

What I would do is create a svg inline tag, that includes (use) the group with id #dibujo of myImage.svg:

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

When using use , it's as if the group with id #dibujo within myImage.svg was cloned and was inline in the document, so the CSS styles for the color were Apply thanks to currentColor and it works as I want.

  

One problem is that the file linked with use is subject to certain security rules and both the domain, protocol and port must match the page and the SVG file ... so I can not give an example that work completely here.

But the idea would be this:

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

It's not as simple as simply using img but it adapts quite well to what I want and it's not overly complex.

One good thing about using use is that it can be used with external and internal resources, that is, with elements that are already on the page. So, another option would be to put my SVG inline once and reference it multiple times (but then I would not take advantage of the browser's cache).

Here is an example:

#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>

Some links that helped me with this solution:

• MDN: <use>
• CSS Tricks: SVG use with External Source
• CSS Tricks: SVG use with External Source, Take 2
• SVG use external source not working on firefox

I will not give you the exact answer you ask because I sincerely believe that you can not, but maybe this will help you. I have taken the following as the most important elements:

If you use the first two, keep reading:

The svg file must be modified to add a stylesheet by putting the following before the svg tag:

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

Also, if as in the case that you propose at the end it is going to be a "complex" svg (but not much to not die putting labels) and you want to apply the color change only to some parts you must put an attribute class to each path that you want to modify by CSS.

Once this has been done the way to change the color will be through the stylesheet , not by inheritance:

.pathPrueba1 {
    fill: red;
}

And finally to insert it in your HTML you must add it as a object :

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

It does not matter which CSS you apply to HTML, the style is being given the reference you have in the SVG file. If you want to apply style in HTML you will have to paste the contents of the svg inside, being able to apply styles freely to each part as you have already done.

All this I have removed from the following link: link

There is some other trick, maybe you can find a solution that suits more exactly what you want (includes example with blurs and other things).