css - How would I change my SVG color with media queries? -

i need change logo color black, instead of white, when screen small 992px. easier showing , hiding 2 different images, think.

i tried adding in .svg file style tags, seems use white fill , doesn't affected 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 help.

edit:

i should state i'm calling this, if makes difference:

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

i imagine there different approaches here one:

as per @media query, when screen width shrinks less 992px, logo change black image on white background white image on black background.

svg {  width: 414px;  height: 96px;  fill: rgb(0,0,0);  background-color: rgb(255,255,255);  }    @media screen , (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>