SVG Fill Color Not Working

change color of svg background image
svg background-color
img svg fill not working
svg stroke color
svg color
svg fill=currentcolor
svg path background color
svg color properties

I'm new to using SVGs and can't figure out what I'm doing wrong here. For most of them, if I want to change the color, I use:

svg path {
   fill: blue;
}

But for this one - and other's I've come across - for some reason this way doesn't work.

Here's a fiddle demonstrating the problem

HTML

<div class="logo-wrapper">
    <?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 id="logo-personal-care"  width="100%" height="100%" viewBox="0 0 159 42" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:1.41421;"><g id="Pest-Peeve-Personal-Care-Logo"><g id="PERSONAL-CARE"><text x="19.199px" y="41px" style="font-family:Lucida Grande;font-size:11px;font-weight:500;fill:#fff;">P<tspan x="25.609px 31.901px 39.187px 45.441px 54.316px 62.773px 70.692px 76.887px 80.698px 88.639px 96.558px " y="41px 41px 41px 41px 41px 41px 41px 41px 41px 41px 41px ">ERSONAL CAR</tspan></text><text x="103.503px" y="41.007px" style="font-family:Lucida Grande;font-size:11px;font-weight:500;fill:#fff;">E</text></g><g id="PPLogo"><path id="Fill-1" d="M158.737,16.764l0,1.884c0,0.428 -0.348,0.777 -0.776,0.777l-12.385,0c-0.429,0 -0.777,-0.349 -0.777,-0.777l0,-15.298c0,-0.428 0.348,-0.776 0.777,-0.776l11.771,0c0.238,0 0.454,0.106 0.593,0.291c0.138,0.185 0.18,0.422 0.113,0.65l-0.552,1.897c-0.1,0.347 -0.436,0.599 -0.797,0.599l-8.178,0l0,3.437l6.969,0c0.428,0 0.776,0.348 0.776,0.777l0,1.772c0,0.428 -0.348,0.776 -0.776,0.776l-6.969,0l0,3.215l9.435,0c0.428,0 0.776,0.348 0.776,0.776M143.064,0.321c0.212,0.323 0.096,0.588 -0.215,1.295l-0.061,0.138l-7.178,16.408c-0.337,0.772 -0.434,0.979 -0.644,1.118c-0.146,0.095 -0.309,0.145 -0.472,0.145l-2.487,0c-0.325,0 -0.649,-0.207 -0.787,-0.502l-5.916,-12.756c-0.106,-0.229 -0.092,-0.489 0.039,-0.693c0.131,-0.205 0.36,-0.327 0.612,-0.327l2.688,0c0.331,0 0.656,0.212 0.789,0.515l3.785,8.588l5.486,-12.976c0.329,-0.778 0.424,-0.987 0.636,-1.128c0.144,-0.096 0.308,-0.146 0.473,-0.146l2.643,0c0.249,0 0.477,0.12 0.609,0.321M122.64,16.764l0,1.884c0,0.428 -0.349,0.777 -0.777,0.777l-11.771,0c-0.428,0 -0.777,-0.349 -0.777,-0.777l0,-15.298c0,-0.428 0.349,-0.776 0.777,-0.776l11.771,0c0.238,0 0.454,0.105 0.592,0.29c0.139,0.185 0.181,0.421 0.115,0.649l-0.553,1.899c-0.1,0.347 -0.436,0.599 -0.797,0.599l-8.177,0l0,3.437l6.968,0c0.428,0 0.776,0.348 0.776,0.777l0,1.772c0,0.428 -0.348,0.776 -0.776,0.776l-6.968,0l0,3.215l8.82,0c0.428,0 0.777,0.348 0.777,0.776M105.724,16.764l0,1.884c0,0.428 -0.348,0.777 -0.777,0.777l-11.771,0c-0.428,0 -0.777,-0.349 -0.777,-0.777l0,-15.298c0,-0.428 0.349,-0.776 0.777,-0.776l11.771,0c0.238,0 0.454,0.106 0.593,0.291c0.139,0.185 0.18,0.422 0.114,0.65l-0.553,1.897c-0.101,0.347 -0.436,0.599 -0.797,0.599l-8.178,0l0,3.437l6.969,0c0.428,0 0.776,0.348 0.776,0.777l0,1.772c0,0.428 -0.348,0.776 -0.776,0.776l-6.969,0l0,3.215l8.821,0c0.429,0 0.777,0.348 0.777,0.776M85.303,8.901c0,1.823 -0.924,2.6 -3.091,2.6l-3.895,0l0,-5.49l3.895,0c2.167,0 3.091,0.864 3.091,2.89M82.212,2.574l-6.845,0c-0.429,0 -0.777,0.348 -0.777,0.776l0,15.298c0,0.428 0.348,0.777 0.777,0.777l2.174,0c0.428,0 0.776,-0.349 0.776,-0.777l0,-3.709l3.895,0c4.44,0 6.886,-2.145 6.886,-6.038c0,-4.08 -2.446,-6.327 -6.886,-6.327M66.42,2.923c0.125,0.219 0.12,0.487 -0.014,0.715l-1.122,1.908c-0.156,0.265 -0.467,0.442 -0.774,0.442l-4.365,0l0,12.66c0,0.428 -0.348,0.777 -0.776,0.777l-2.175,0c-0.428,0 -0.776,-0.349 -0.776,-0.777l0,-12.66l-5.629,0c-0.429,0 -0.777,-0.348 -0.777,-0.776l0,-1.862c0,-0.428 0.348,-0.776 0.777,-0.776l15.008,0c0.264,0 0.498,0.13 0.623,0.349M48.228,14.481c0,2.552 -1.896,5.278 -7.22,5.278c-4.576,0 -6.712,-1.734 -7.257,-2.266c-0.134,-0.133 -0.218,-0.308 -0.238,-0.497c-0.028,-0.271 0.076,-0.457 0.52,-1.203l0.24,-0.402c0.411,-0.691 0.549,-0.924 0.899,-0.975c0.211,-0.032 0.429,0.032 0.597,0.175c0.473,0.4 2.253,1.709 5.239,1.709c0.772,0 3.292,-0.116 3.292,-1.618c0,-0.824 -0.14,-1.214 -3.47,-1.829c-3.504,-0.612 -6.93,-1.526 -6.93,-5.313c-0.012,-1.252 0.455,-2.395 1.351,-3.299c0.885,-0.893 2.613,-1.957 5.824,-1.957c3.644,0 5.978,1.23 6.606,1.607c0.338,0.203 0.478,0.632 0.327,0.998l-0.768,1.864c-0.085,0.207 -0.255,0.364 -0.466,0.43c-0.211,0.066 -0.442,0.032 -0.633,-0.092c-0.462,-0.3 -2.19,-1.281 -5.044,-1.281c-0.983,0 -3.27,0.148 -3.27,1.529c0,0.832 0.606,1.451 3.618,1.961c3.711,0.629 6.783,1.453 6.783,5.181M31.133,16.764l0,1.884c0,0.428 -0.348,0.777 -0.776,0.777l-11.772,0c-0.428,0 -0.776,-0.349 -0.776,-0.777l0,-15.298c0,-0.428 0.348,-0.776 0.776,-0.776l11.772,0c0.238,0 0.454,0.106 0.593,0.291c0.138,0.185 0.18,0.422 0.113,0.65l-0.552,1.897c-0.101,0.347 -0.436,0.599 -0.798,0.599l-8.177,0l0,3.437l6.968,0c0.428,0 0.777,0.348 0.777,0.777l0,1.772c0,0.428 -0.349,0.776 -0.777,0.776l-6.968,0l0,3.215l8.821,0c0.428,0 0.776,0.348 0.776,0.776M10.713,8.901c0,1.823 -0.924,2.6 -3.091,2.6l-3.895,0l0,-5.49l3.895,0c2.167,0 3.091,0.864 3.091,2.89M7.622,2.574l-6.846,0c-0.428,0 -0.776,0.348 -0.776,0.776l0,15.298c0,0.428 0.348,0.777 0.776,0.777l2.175,0c0.428,0 0.776,-0.349 0.776,-0.777l0,-3.709l3.895,0c4.44,0 6.885,-2.145 6.885,-6.038c0,-4.08 -2.445,-6.327 -6.885,-6.327" style="fill:#fff;"/></g></g></svg>
</div>

CSS

.logo-wrapper svg {
  width: 300px;
}
.logo-wrapper svg path{
  fill: green;
}

Thanks

you can just add !important beside fill

.logo-wrapper svg {
  width: 300px;
}

.logo-wrapper svg path{
  fill: green !important;
}
.logo-wrapper svg text{
  fill: green !important;
}

This is the Fiddle

5 Gotchas You're Gonna Face Getting Inline SVG Into Production , If you define a non-black fill, or, if you define a stroke (of any color including These styles will be global which may or may not be a problem–you'll have to� Icons with a fill color of #000, or rgb(0,0,0) will not brighten. You need to have a value greater than 0 in any of the rgb channels. fill: rgb(1,1,1) works great with a high brightness value such as brightness(1000), but even brightness(1000) will not work on pure black. This is not an issue with light colors and white. Adjusting Color

Your path has inline css on it with fill. This overrides your other css. Can be fixed with !important. Or you could remove the inline css.

svg path {
   fill: blue!important;
}

fill, The fill property in CSS is for filling in the color of a SVG shape. .eyeball { fill: This will not override an inline style e.g. <path style="fill: #fff;" . It’s not a huge deal though, because you can just: svg { fill: currentColor; } And that will ensure it snags the color from whatever you would normally expect it to. You can also apply the fill to the use, path, symbol, circle, rect, etc, but hitting the svg just kinda covers it all (which is nice for simple one-color use cases).

use !important;

.logo-wrapper svg {
  width: 300px;
}

.logo-wrapper svg path{
  fill: green !important;
}
<div class="logo-wrapper">
    <?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 id="logo-personal-care"  width="100%" height="100%" viewBox="0 0 159 42" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:1.41421;"><g id="Pest-Peeve-Personal-Care-Logo"><g id="PERSONAL-CARE"><text x="19.199px" y="41px" style="font-family:Lucida Grande;font-size:11px;font-weight:500;fill:#fff;">P<tspan x="25.609px 31.901px 39.187px 45.441px 54.316px 62.773px 70.692px 76.887px 80.698px 88.639px 96.558px " y="41px 41px 41px 41px 41px 41px 41px 41px 41px 41px 41px ">ERSONAL CAR</tspan></text><text x="103.503px" y="41.007px" style="font-family:Lucida Grande;font-size:11px;font-weight:500;fill:#fff;">E</text></g><g id="PPLogo"><path id="Fill-1" d="M158.737,16.764l0,1.884c0,0.428 -0.348,0.777 -0.776,0.777l-12.385,0c-0.429,0 -0.777,-0.349 -0.777,-0.777l0,-15.298c0,-0.428 0.348,-0.776 0.777,-0.776l11.771,0c0.238,0 0.454,0.106 0.593,0.291c0.138,0.185 0.18,0.422 0.113,0.65l-0.552,1.897c-0.1,0.347 -0.436,0.599 -0.797,0.599l-8.178,0l0,3.437l6.969,0c0.428,0 0.776,0.348 0.776,0.777l0,1.772c0,0.428 -0.348,0.776 -0.776,0.776l-6.969,0l0,3.215l9.435,0c0.428,0 0.776,0.348 0.776,0.776M143.064,0.321c0.212,0.323 0.096,0.588 -0.215,1.295l-0.061,0.138l-7.178,16.408c-0.337,0.772 -0.434,0.979 -0.644,1.118c-0.146,0.095 -0.309,0.145 -0.472,0.145l-2.487,0c-0.325,0 -0.649,-0.207 -0.787,-0.502l-5.916,-12.756c-0.106,-0.229 -0.092,-0.489 0.039,-0.693c0.131,-0.205 0.36,-0.327 0.612,-0.327l2.688,0c0.331,0 0.656,0.212 0.789,0.515l3.785,8.588l5.486,-12.976c0.329,-0.778 0.424,-0.987 0.636,-1.128c0.144,-0.096 0.308,-0.146 0.473,-0.146l2.643,0c0.249,0 0.477,0.12 0.609,0.321M122.64,16.764l0,1.884c0,0.428 -0.349,0.777 -0.777,0.777l-11.771,0c-0.428,0 -0.777,-0.349 -0.777,-0.777l0,-15.298c0,-0.428 0.349,-0.776 0.777,-0.776l11.771,0c0.238,0 0.454,0.105 0.592,0.29c0.139,0.185 0.181,0.421 0.115,0.649l-0.553,1.899c-0.1,0.347 -0.436,0.599 -0.797,0.599l-8.177,0l0,3.437l6.968,0c0.428,0 0.776,0.348 0.776,0.777l0,1.772c0,0.428 -0.348,0.776 -0.776,0.776l-6.968,0l0,3.215l8.82,0c0.428,0 0.777,0.348 0.777,0.776M105.724,16.764l0,1.884c0,0.428 -0.348,0.777 -0.777,0.777l-11.771,0c-0.428,0 -0.777,-0.349 -0.777,-0.777l0,-15.298c0,-0.428 0.349,-0.776 0.777,-0.776l11.771,0c0.238,0 0.454,0.106 0.593,0.291c0.139,0.185 0.18,0.422 0.114,0.65l-0.553,1.897c-0.101,0.347 -0.436,0.599 -0.797,0.599l-8.178,0l0,3.437l6.969,0c0.428,0 0.776,0.348 0.776,0.777l0,1.772c0,0.428 -0.348,0.776 -0.776,0.776l-6.969,0l0,3.215l8.821,0c0.429,0 0.777,0.348 0.777,0.776M85.303,8.901c0,1.823 -0.924,2.6 -3.091,2.6l-3.895,0l0,-5.49l3.895,0c2.167,0 3.091,0.864 3.091,2.89M82.212,2.574l-6.845,0c-0.429,0 -0.777,0.348 -0.777,0.776l0,15.298c0,0.428 0.348,0.777 0.777,0.777l2.174,0c0.428,0 0.776,-0.349 0.776,-0.777l0,-3.709l3.895,0c4.44,0 6.886,-2.145 6.886,-6.038c0,-4.08 -2.446,-6.327 -6.886,-6.327M66.42,2.923c0.125,0.219 0.12,0.487 -0.014,0.715l-1.122,1.908c-0.156,0.265 -0.467,0.442 -0.774,0.442l-4.365,0l0,12.66c0,0.428 -0.348,0.777 -0.776,0.777l-2.175,0c-0.428,0 -0.776,-0.349 -0.776,-0.777l0,-12.66l-5.629,0c-0.429,0 -0.777,-0.348 -0.777,-0.776l0,-1.862c0,-0.428 0.348,-0.776 0.777,-0.776l15.008,0c0.264,0 0.498,0.13 0.623,0.349M48.228,14.481c0,2.552 -1.896,5.278 -7.22,5.278c-4.576,0 -6.712,-1.734 -7.257,-2.266c-0.134,-0.133 -0.218,-0.308 -0.238,-0.497c-0.028,-0.271 0.076,-0.457 0.52,-1.203l0.24,-0.402c0.411,-0.691 0.549,-0.924 0.899,-0.975c0.211,-0.032 0.429,0.032 0.597,0.175c0.473,0.4 2.253,1.709 5.239,1.709c0.772,0 3.292,-0.116 3.292,-1.618c0,-0.824 -0.14,-1.214 -3.47,-1.829c-3.504,-0.612 -6.93,-1.526 -6.93,-5.313c-0.012,-1.252 0.455,-2.395 1.351,-3.299c0.885,-0.893 2.613,-1.957 5.824,-1.957c3.644,0 5.978,1.23 6.606,1.607c0.338,0.203 0.478,0.632 0.327,0.998l-0.768,1.864c-0.085,0.207 -0.255,0.364 -0.466,0.43c-0.211,0.066 -0.442,0.032 -0.633,-0.092c-0.462,-0.3 -2.19,-1.281 -5.044,-1.281c-0.983,0 -3.27,0.148 -3.27,1.529c0,0.832 0.606,1.451 3.618,1.961c3.711,0.629 6.783,1.453 6.783,5.181M31.133,16.764l0,1.884c0,0.428 -0.348,0.777 -0.776,0.777l-11.772,0c-0.428,0 -0.776,-0.349 -0.776,-0.777l0,-15.298c0,-0.428 0.348,-0.776 0.776,-0.776l11.772,0c0.238,0 0.454,0.106 0.593,0.291c0.138,0.185 0.18,0.422 0.113,0.65l-0.552,1.897c-0.101,0.347 -0.436,0.599 -0.798,0.599l-8.177,0l0,3.437l6.968,0c0.428,0 0.777,0.348 0.777,0.777l0,1.772c0,0.428 -0.349,0.776 -0.777,0.776l-6.968,0l0,3.215l8.821,0c0.428,0 0.776,0.348 0.776,0.776M10.713,8.901c0,1.823 -0.924,2.6 -3.091,2.6l-3.895,0l0,-5.49l3.895,0c2.167,0 3.091,0.864 3.091,2.89M7.622,2.574l-6.846,0c-0.428,0 -0.776,0.348 -0.776,0.776l0,15.298c0,0.428 0.348,0.777 0.776,0.777l2.175,0c0.428,0 0.776,-0.349 0.776,-0.777l0,-3.709l3.895,0c4.44,0 6.885,-2.145 6.885,-6.038c0,-4.08 -2.445,-6.327 -6.885,-6.327" style="fill:#fff;"/></g></g></svg>
</div>

Changing SVG icon color and size via CSS? � Issue #235 , .svg-icon { display: inline-block; width: 68px; height: 68px; fill: #ff0000; }. However , this is not working. Any idea how to achieve different sizes� As a bonus, fill also accepts the patterns of SVG shapes that are defined inside of a defs element:.module { fill: url(#pattern); } See the Pen fill property by CSS-Tricks (@css-tricks) on CodePen. A Use Case. A common use case for fill is changing the color of an SVG on hover, much like we do with color when styling link hovers.

Friendly advise, try to avoid using !important as much as possible, instead try to make your selectors more specific, remember inline > id > classes > elements.

this problem may be as easy as adding an additional class or if it is a single elements an id.

HTML

<div id="logo-wrapper">
    ...
</div>

CSS

#logo-wrapper {  fill: red }

for a more detailed explanation please read this article

Fill color doesn't work for background SVG images � Issue #26 , Hi, just to tell you that this point in the readme is not totally true. You should specify that there are many techniques to define and use icons. Why your approach doesn't work. In your example the svg is not part of the DOM. So you cannot use css to modify the attributes of the svg. What you are doing is adding an inline-style to the svg in your url. Since the browser does not recognise --primary-color as a color it doesn't work. An alternative approach

If you're not in control of your svg (coming from another source and you're re-theming it), you're stuck with !important to override the svg's fill property.

If your svg is in your codebase, it's much better to set its fill="currentColor", and then set the css color property.

Your HTML:

<div class="logo-wrapper">
    <?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 id="logo-personal-care"  width="100%" height="100%" viewBox="0 0 159 42" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:1.41421;"><g id="Pest-Peeve-Personal-Care-Logo"><g id="PERSONAL-CARE"><text x="19.199px" y="41px" style="font-family:Lucida Grande;font-size:11px;font-weight:500;
fill:"currentColor";">
P<tspan x="25.609px 31.901px 39.187px 45.441px 54.316px 62.773px 70.692px 76.887px 80.698px 88.639px 96.558px " y="41px 41px 41px 41px 41px 41px 41px 41px 41px 41px 41px ">ERSONAL CAR</tspan></text><text x="103.503px" y="41.007px" style="font-family:Lucida Grande;font-size:11px;font-weight:500;fill:#fff;">E</text></g><g id="PPLogo"><path id="Fill-1" d="M158.737,16.764l0,1.884c0,0.428 -0.348,0.777 -0.776,0.777l-12.385,0c-0.429,0 -0.777,-0.349 -0.777,-0.777l0,-15.298c0,-0.428 0.348,-0.776 0.777,-0.776l11.771,0c0.238,0 0.454,0.106 0.593,0.291c0.138,0.185 0.18,0.422 0.113,0.65l-0.552,1.897c-0.1,0.347 -0.436,0.599 -0.797,0.599l-8.178,0l0,3.437l6.969,0c0.428,0 0.776,0.348 0.776,0.777l0,1.772c0,0.428 -0.348,0.776 -0.776,0.776l-6.969,0l0,3.215l9.435,0c0.428,0 0.776,0.348 0.776,0.776M143.064,0.321c0.212,0.323 0.096,0.588 -0.215,1.295l-0.061,0.138l-7.178,16.408c-0.337,0.772 -0.434,0.979 -0.644,1.118c-0.146,0.095 -0.309,0.145 -0.472,0.145l-2.487,0c-0.325,0 -0.649,-0.207 -0.787,-0.502l-5.916,-12.756c-0.106,-0.229 -0.092,-0.489 0.039,-0.693c0.131,-0.205 0.36,-0.327 0.612,-0.327l2.688,0c0.331,0 0.656,0.212 0.789,0.515l3.785,8.588l5.486,-12.976c0.329,-0.778 0.424,-0.987 0.636,-1.128c0.144,-0.096 0.308,-0.146 0.473,-0.146l2.643,0c0.249,0 0.477,0.12 0.609,0.321M122.64,16.764l0,1.884c0,0.428 -0.349,0.777 -0.777,0.777l-11.771,0c-0.428,0 -0.777,-0.349 -0.777,-0.777l0,-15.298c0,-0.428 0.349,-0.776 0.777,-0.776l11.771,0c0.238,0 0.454,0.105 0.592,0.29c0.139,0.185 0.181,0.421 0.115,0.649l-0.553,1.899c-0.1,0.347 -0.436,0.599 -0.797,0.599l-8.177,0l0,3.437l6.968,0c0.428,0 0.776,0.348 0.776,0.777l0,1.772c0,0.428 -0.348,0.776 -0.776,0.776l-6.968,0l0,3.215l8.82,0c0.428,0 0.777,0.348 0.777,0.776M105.724,16.764l0,1.884c0,0.428 -0.348,0.777 -0.777,0.777l-11.771,0c-0.428,0 -0.777,-0.349 -0.777,-0.777l0,-15.298c0,-0.428 0.349,-0.776 0.777,-0.776l11.771,0c0.238,0 0.454,0.106 0.593,0.291c0.139,0.185 0.18,0.422 0.114,0.65l-0.553,1.897c-0.101,0.347 -0.436,0.599 -0.797,0.599l-8.178,0l0,3.437l6.969,0c0.428,0 0.776,0.348 0.776,0.777l0,1.772c0,0.428 -0.348,0.776 -0.776,0.776l-6.969,0l0,3.215l8.821,0c0.429,0 0.777,0.348 0.777,0.776M85.303,8.901c0,1.823 -0.924,2.6 -3.091,2.6l-3.895,0l0,-5.49l3.895,0c2.167,0 3.091,0.864 3.091,2.89M82.212,2.574l-6.845,0c-0.429,0 -0.777,0.348 -0.777,0.776l0,15.298c0,0.428 0.348,0.777 0.777,0.777l2.174,0c0.428,0 0.776,-0.349 0.776,-0.777l0,-3.709l3.895,0c4.44,0 6.886,-2.145 6.886,-6.038c0,-4.08 -2.446,-6.327 -6.886,-6.327M66.42,2.923c0.125,0.219 0.12,0.487 -0.014,0.715l-1.122,1.908c-0.156,0.265 -0.467,0.442 -0.774,0.442l-4.365,0l0,12.66c0,0.428 -0.348,0.777 -0.776,0.777l-2.175,0c-0.428,0 -0.776,-0.349 -0.776,-0.777l0,-12.66l-5.629,0c-0.429,0 -0.777,-0.348 -0.777,-0.776l0,-1.862c0,-0.428 0.348,-0.776 0.777,-0.776l15.008,0c0.264,0 0.498,0.13 0.623,0.349M48.228,14.481c0,2.552 -1.896,5.278 -7.22,5.278c-4.576,0 -6.712,-1.734 -7.257,-2.266c-0.134,-0.133 -0.218,-0.308 -0.238,-0.497c-0.028,-0.271 0.076,-0.457 0.52,-1.203l0.24,-0.402c0.411,-0.691 0.549,-0.924 0.899,-0.975c0.211,-0.032 0.429,0.032 0.597,0.175c0.473,0.4 2.253,1.709 5.239,1.709c0.772,0 3.292,-0.116 3.292,-1.618c0,-0.824 -0.14,-1.214 -3.47,-1.829c-3.504,-0.612 -6.93,-1.526 -6.93,-5.313c-0.012,-1.252 0.455,-2.395 1.351,-3.299c0.885,-0.893 2.613,-1.957 5.824,-1.957c3.644,0 5.978,1.23 6.606,1.607c0.338,0.203 0.478,0.632 0.327,0.998l-0.768,1.864c-0.085,0.207 -0.255,0.364 -0.466,0.43c-0.211,0.066 -0.442,0.032 -0.633,-0.092c-0.462,-0.3 -2.19,-1.281 -5.044,-1.281c-0.983,0 -3.27,0.148 -3.27,1.529c0,0.832 0.606,1.451 3.618,1.961c3.711,0.629 6.783,1.453 6.783,5.181M31.133,16.764l0,1.884c0,0.428 -0.348,0.777 -0.776,0.777l-11.772,0c-0.428,0 -0.776,-0.349 -0.776,-0.777l0,-15.298c0,-0.428 0.348,-0.776 0.776,-0.776l11.772,0c0.238,0 0.454,0.106 0.593,0.291c0.138,0.185 0.18,0.422 0.113,0.65l-0.552,1.897c-0.101,0.347 -0.436,0.599 -0.798,0.599l-8.177,0l0,3.437l6.968,0c0.428,0 0.777,0.348 0.777,0.777l0,1.772c0,0.428 -0.349,0.776 -0.777,0.776l-6.968,0l0,3.215l8.821,0c0.428,0 0.776,0.348 0.776,0.776M10.713,8.901c0,1.823 -0.924,2.6 -3.091,2.6l-3.895,0l0,-5.49l3.895,0c2.167,0 3.091,0.864 3.091,2.89M7.622,2.574l-6.846,0c-0.428,0 -0.776,0.348 -0.776,0.776l0,15.298c0,0.428 0.348,0.777 0.776,0.777l2.175,0c0.428,0 0.776,-0.349 0.776,-0.777l0,-3.709l3.895,0c4.44,0 6.885,-2.145 6.885,-6.038c0,-4.08 -2.445,-6.327 -6.885,-6.327" style="fill:#fff;"/></g></g></svg>
</div>

Your CSS:

.logo-wrapper {
  color: green;
}

hat tip: fill property of SVG does not working in Chrome

SVG hover fill not working : webdev, Hello, I've been trying to make the SVG fill color change on hover for a while now, but without any success. This is my current code: CSS (SCSS) … Trouble is that I can't set value (color) in fill property in Chrome, but in Firefox it works. I tried a lot ways to do it, but there is no result. The only way I see to change color of SVG icon is via jQuery (or JavaScript) by changing id of <symbol>, which is below. Please help me solve this problem!

Fills and Strokes, Most SVG you'll find around the web use inline CSS, but there are Join the MDN community � Report a content problem � Report an issue Using fill sets the color inside the object and stroke sets the color of the line drawn around the object. The former can be modified with CSS, the latter not. svg.icon { fill: tomato; } svg.icon:hover { stroke: darkred; } The graphics within each icon will inherit the styles. Of course, this only works for simple, one-color icons. If you want more nuanced control, you’ll need to get into the code and get to know the SVG style cascade rules.

SVG fill , change SVG color with VUE, Hello , I have been tryng to change a color of a SVG , with fill , but it is not working . I am doing like this - <img :src="'/assets/images/ I'm loading an SVG URL into a web page using a CSS class. This works in every browser I've tested except Firefox 35.0.1 (and probably earlier versions of Firefox). I've noticed that when using an actual color name, e.g., white, for the stroke, it works as expected, but when I use a hex value, e.g, #ffffff, it does not show a stroke at all.

Color of the SVG image with the css, A question how can I change the color of the SVG image with the css? you just need to target the right class of your element and apply the color or fill color. How to change the objects inside the SVG file is clear to me, this is not a problem. Stack Overflow Public questions and answers; Teams Private questions and answers for your team; Enterprise Private self-hosted questions and answers for your enterprise; Jobs Programming and related technical career opportunities

Comments
  • Thanks! My other problem was that I didn't know to target "svg txt", but now it makes sense :)
  • @HonsaStunna It's because inline styles (as used by the SVG) by default override external CSS styles.
  • seems the svg has fill property, so if you don't have control of the svg (ie. theming), css override would be needed