Reputation: 69
Hi I'm new to using SVG's but i thought the whole idea of SVG's is that you can change the background-color etc. Anyway i'm using the open sources clrs.cc and it has both svg fills and strokes built in but none work on my search icon.
<img src="ic_search_48px.svg" class="fill-navy" alt="This should be a search icon">
Here is what the CSS classes look like:
.fill-navy {
fill: #001F3F; }
Thanks for helping out!
Upvotes: 0
Views: 100
Reputation: 115383
Basically, you cannot change the color of an SVG used as an actual image or background-image.
CSS can only affect inline SVG in the page HTML.
EG.
.hidden {
display: none;
}
.icon {
width: 48px;
height: 48px;
}
.large {
width: 96px;
height: 96px;
}
.red {
fill: red;
}
.green {
fill: green;
}
<svg xmlns="http://www.w3.org/2000/svg" class="hidden">
<defs>
<g id="search" viewBox="0 0 48 48">
<path d="M31 28h-1.59l-.55-.55C30.82 25.18 32 22.23 32 19c0-7.18-5.82-13-13-13S6 11.82 6 19s5.82 13 13 13c3.23 0 6.18-1.18 8.45-3.13l.55.55V31l10 9.98L40.98 38 31 28zm-12 0c-4.97 0-9-4.03-9-9s4.03-9 9-9 9 4.03 9 9-4.03 9-9 9z" />
</g>
</defs>
</svg>
<svg class="icon" viewBox="0 0 48 48">>
<use xlink:href="#search" class="red" />
</svg>
<svg class="icon large" viewBox="0 0 48 48">>
<use xlink:href="#search" class="green" />
</svg>
Upvotes: 2