How would I change my SVG color with media queries?

Question

I need to change my logo color to black, instead of white, when the screen is small than 992px. Much easier than showing and hiding 2 different images, I think.

I tried adding this in the .svg file style tags, but it seems to just use the white fill and doesn't get affected with screen resize.

<style type="text/css">     
.logo-color{fill:#FFFFFF;}

    @media (min-width: 992px) {
      .logo-color {
        fill:#000000;
      }
    }
</style>
<path class="logo-color"...etc..

Thanks for any help.

Edit:

I should state that I'm calling it with this, if it makes a difference:

<img src="css/img/logo.svg" alt="Logo" width="150" style="width:150px;">

It should actually work. [Try it yourself](https://jsfiddle.net/gmj23ve2/). — insertusernamehere, Nov 17 '16 at 19:43
you mean 'max-width' not 'min-width' if you want it to take effect under 992px — MichaelB, Nov 17 '16 at 19:48
I added the full svg as per hungerstar request. Also, MichaelB, if I add max instead, it just turns to black and not affected by screensize. — KeepCool, Nov 17 '16 at 19:49
Possible duplicate of [img src SVG changing the fill color](http://stackoverflow.com/questions/24933430/img-src-svg-changing-the-fill-color) — hungerstar, Nov 17 '16 at 19:59
@hungerstar it still doesn't work after trying that jquery solution in your link. — KeepCool, Nov 17 '16 at 20:08
@KeepCool then you didn't do it right. The main problem you're facing is that you can't update the SVG via CSS when the SVG is being included into the page via an ``. You will need to inline your SVG to update the fill color as @insertusernamehere has demonstrated. Personally I wouldn't use the JS solution, just inline the SVG to begin with. Then apply CSS. — hungerstar, Nov 17 '16 at 20:25

score 1 · Answer 1 · answered Nov 17 '16 at 20:19

1

Embed svg code in html instead add it as image and it will work

answered Nov 17 '16 at 20:19

Vel

731
4
15

Thanks. How do I embed it in my html but then insert it as an image also. Not sure I understand. – KeepCool Nov 17 '16 at 20:32
2

@KeepCool You can't. If you want to style the contents of the SVG it has to be inline. – Turnip Nov 17 '16 at 20:36

Rounin · Accepted Answer · 2016-11-17T20:54:15.747

I imagine there are different approaches to this but here is one:

As per the @media query, when the screen width shrinks to less than 992px, the logo will change from a black image on a white background to a white image on a black background.

svg {
width: 414px;
height: 96px;
fill: rgb(0,0,0);
background-color: rgb(255,255,255);
}

@media only screen and (max-width:992px) {
svg {
fill: rgb(255,255,255);
background-color: rgb(0,0,0);
}
}

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 413.1 96">
<path d="M0.7,81.8L0.7,81.8v-0.9c0.2-3.2,1.4-5,3.5-5.5h15.6c2.2,0.4,3.4,2.6,3.5,6.4h-2.8c-0.1-2.4-0.8-3.5-2.1-3.5
    H5.7c-1.2,0-1.9,1.1-2.1,3.2c0.2,1.9,0.9,2.8,2.1,2.8h14.2c2.1,0.5,3.3,2.2,3.5,5.3v0.7c-0.2,3.3-1.4,5.2-3.5,5.7H4.2
    c-2.2-0.4-3.4-2.6-3.5-6.4h2.8c0.1,2.4,0.8,3.5,2.1,3.5h12.7c1.2,0,1.9-1.1,2.1-3.2c-0.2-1.9-0.9-2.8-2.1-2.8H4.2
    C2.1,86.6,1,84.8,0.7,81.8L0.7,81.8z M81.2,95.9h-2.8V78.2h-8.5v-2.8h19.8v2.8h-8.5V95.9L81.2,95.9z M157.5,75.4v17
    c-0.5,2.4-2.8,3.5-7.1,3.5h-7.1c-4.3,0-6.6-1.2-7.1-3.5v-17h2.8V91c0,1.4,1.4,2.1,4.3,2.1h7.1c2.8,0,4.2-0.7,4.2-2.1V75.4H157.5
    L157.5,75.4z M206.9,78.2v14.9h13.4c1.4,0,2.1-1.4,2.1-4.3v-6.4c0-2.8-0.7-4.2-2.1-4.2H206.9L206.9,78.2z M204,95.9V75.4h17.7
    c2.4,0.5,3.5,2.8,3.5,7.1v6.4c0,4.3-1.2,6.6-3.5,7.1L204,95.9L204,95.9z M274.6,95.9h-2.8V75.4h2.8V95.9L274.6,95.9z M326.1,78.2
    c-1.4,0-2.1,1.4-2.1,4.2v6.4c0,2.8,0.7,4.3,2.1,4.3h12.7c1.4,0,2.1-1.4,2.1-4.3v-6.4c0-2.8-0.7-4.2-2.1-4.2H326.1L326.1,78.2z
     M324.7,95.9c-2.4-0.5-3.5-2.8-3.5-7.1v-6.4c0-4.2,1.2-6.6,3.5-7.1h15.6c2.4,0.5,3.5,2.8,3.5,7.1v6.4c0,4.3-1.2,6.6-3.5,7.1H324.7
    L324.7,95.9z M390.4,81.8L390.4,81.8v-0.9c0.2-3.2,1.4-5,3.5-5.5h15.6c2.2,0.4,3.4,2.6,3.5,6.4h-2.8c-0.1-2.4-0.8-3.5-2.1-3.5h-12.7
    c-1.2,0-1.9,1.1-2.1,3.2c0.2,1.9,0.9,2.8,2.1,2.8h14.2c2.1,0.5,3.3,2.2,3.5,5.3v0.7c-0.2,3.3-1.4,5.2-3.5,5.7H394
    c-2.2-0.4-3.4-2.6-3.5-6.4h2.8c0.1,2.4,0.8,3.5,2.1,3.5H408c1.2,0,1.9-1.1,2.1-3.2c-0.2-1.9-0.9-2.8-2.1-2.8h-14.2
    C391.8,86.6,390.6,84.8,390.4,81.8z" />
<path d="M20.5,24.1h43.2c26.7,0,26.6,36.6,0,36.6H1.2v-11h59.6c9.8,0,9.7-13.8,1-13.8H19.9C-6.6,35.9-6.6,0,19.9,0
    c57.7,0,114.6,0,172.2,0c6,0,10.3,0.9,13,2.8c2.7,1.8,4.1,4.8,4.1,9V26c0,4.1-1.3,7.2-4.1,9.1c-2.7,1.9-7,2.8-13,2.8h-9.9l34.9,22.9
    h-25.2l-44.5-33.3h36.9c3,0,5.1-0.3,6.3-1.1c1.1-0.7,1.7-2,1.7-3.8v-7.3c0-1.8-0.5-3-1.7-3.7c-1.1-0.7-3.2-1.1-6.3-1.1
    c-21.1,0-40.7,0.8-61.9,0.8v49.5h-17.6V11.3C76.7,11.3,49,11,20.7,11C13.7,11,13.8,24.1,20.5,24.1L20.5,24.1z M354,23.9l0.1-8
    c0.1-7.2,5.5-5.3,10.7-5.6h46.8V0h-50.9h-6.9c-6,0-10.4,1-13.1,2.8c-2.7,1.9-4.1,4.9-4.1,9.1v11.6v14.2v11.6c0,4.1,1.4,7.2,4.1,9.1
    c2.7,1.9,7,2.8,13.1,2.8l14-0.4h44.6V49.3l-51.6,1.2c-4.9-0.1-6.4-0.1-6.6-5.1c-0.1-1.5-0.2-9.7-0.2-11.2h57.3V23.9H354L354,23.9z
     M306.3,10.6c-19,0-37.9-0.1-56.8-0.1V0h64.6c6,0,10.4,1,13.1,2.8c2.7,1.9,4.1,4.9,4.1,9.1v13.5c0,4.1-1.4,7.1-4.1,9
    s-7,2.8-13.1,2.8h-47.3v23.6h-17.3V26.5c19,0,37.8,0.2,56.8,0.2c3,0,5.1-0.4,6.2-1.1s1.7-2,1.7-3.7v-6.5c0-1.8-0.6-3-1.7-3.7
    C311.4,10.9,309.3,10.6,306.3,10.6L306.3,10.6z M224,60.7V0h17.6v60.7H224z" />
</svg>

This worked! Thanks. To anyone else who has the same issue in the future, I put the plain svg code directly in the html (without all the xml stuff and styling), then put the css either in the head or the css file. I also put the background-color to "none" so it keeps it's transparency. Thanks Rounin! — KeepCool, Nov 17 '16 at 20:44
This won't work if the SVG is used as an image i.e. via an tag. — Robert Longson, Nov 17 '16 at 20:45
Note: When _"inline the SVG"_ is mentioned, this means the SVG should be embedded in the html. — hungerstar, Nov 17 '16 at 20:56

How would I change my SVG color with media queries?

2 Answers2