How to select the color fill for a svg image using css? (Not inline svg)

Question

How can you select the color "fill" for a svg image using css? I have the following img tag:

<img src="assets/images/folder.svg" class="svg" >

My .svg file is locking like this:

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="100%" height="100%" viewBox="0 0 25 19" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:1.41421;">
    <g transform="matrix(1,0,0,1,-87.34,-350.89)">
        <g transform="matrix(1,0,0,0.947605,-375.66,-124.574)">
            <g id="Mail-Icon" serif:id="Mail Icon" transform="matrix(1,0,0,1.05529,-47.0001,-2366.53)">
                <path d="M532.5,2737L511.5,2737C510.672,2737 510,2736.33 510,2735.5L510,2719.5C510,2718.67 510.672,2718 511.5,2718L518.065,2718L518.065,2720L532.5,2720C533.329,2720 534,2720.67 534,2721.5L534,2735.5C534,2736.33 533.329,2737 532.5,2737ZM531,2724L531,2722.43L513,2722.44L513,2724L531,2724Z" style="fill:rgb(131,147,167);"/>
            </g>
        </g>
    </g>
</svg>

I have tried this, but it does not work:

.svg {
    fill:rgb(18, 136, 222);
}

I have seen solutions where you add the svg code inside your HTML. Though I am looking for a solution where adding the svg inline is not required.

Put the CSS in the image file itself via a – Robert Longson May 30 '18 at 03:39 — Robert Longson, May 30 '18 at 03:39

Adam · Accepted Answer · 2018-05-30T03:31:18.490

0

The problem with both <img> and background-image, Is that you don't get to control the innards of the SVG with CSS like you can with using SVG as inline or Using SVG as an <object>.

svg path {
  fill: red;
}

<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 600 600"><title>Untitled-1</title><g id="Mail-Icon"><path d="M552,467.87H48a36,36,0,0,1-36-36v-384a36,36,0,0,1,36-36H205.56v48H552a36,36,0,0,1,36,36v336A36,36,0,0,1,552,467.87Zm-36-312V118.19l-432,.24v37.44Z"/></g></svg>

You can read more about it here

edited May 30 '18 at 03:31

answered May 29 '18 at 17:17

Adam

1,385
1
10
23

Sure that works. Though this solution require the svg to be inline right? I am looking for a solution where I do not have to copy the svg code into my HTML document. – iSebbeYT May 29 '18 at 17:20
the answer is no! you cant control it. maybe you can insert the SVG using javascript and then control the path color. or use svg as an object – Adam May 29 '18 at 17:30

score 0 · Answer 2 · answered May 29 '18 at 17:21

Similar question answered here: img src SVG changing the fill color

As you cannot modify an external ressource with a CSS file, and that using the <img> tag imports an external ressource, you cannot achieve what you want without putting the .svg content into you .html page.

Another option is to modify directly the svg code by adding the fill="rgb(18, 136, 222);" as an attribute of the <path> tag :

<path fill="red" d="M532.5 …

How to select the color fill for a svg image using css? (Not inline svg)

2 Answers2