How to modify the fill color of an SVG image when being served as background image?
I needed something similar and wanted to stick with CSS. Here are LESS and SCSS mixins as well as plain CSS that can help you with this. Unfortunately, it's browser support is a bit lax. See below for details on browser support.
LESS mixin:
.element-color(@color) {
background-image: url('data:image/svg+xml;utf8,<svg ...><g stroke="@{color}" ... /></g></svg>');
}
LESS usage:
.element-color(#fff);
SCSS mixin:
@mixin element-color($color) {
background-image: url('data:image/svg+xml;utf8,<svg ...><g stroke="#{$color}" ... /></g></svg>');
}
SCSS usage:
@include element-color(#fff);
CSS:
// color: red
background-image: url('data:image/svg+xml;utf8,<svg ...><g stroke="red" ... /></g></svg>');
Here is more info on embedding the full SVG code into your CSS file. It also mentioned browser compatibility which is a bit too small for this to be a viable option.
How to change the color of an svg element?
You can't change the color of an image that way. If you load SVG as an image, you can't change how it is displayed using CSS or Javascript in the browser.
If you want to change your SVG image, you have to load it using <object>
, <iframe>
or using <svg>
inline.
If you want to use the techniques in the page, you need the Modernizr library, where you can check for SVG support and conditionally display or not a fallback image. You can then inline your SVG and apply the styles you need.
See :
#time-3-icon { fill: green;}
.my-svg-alternate { display: none;}.no-svg .my-svg-alternate { display: block; width: 100px; height: 100px; background-image: url(image.png);}
<svg width="96px" height="96px" viewBox="0 0 512 512" enable-background="new 0 0 512 512" xml:space="preserve"><path id="time-3-icon" d="M256,50C142.229,50,50,142.229,50,256c0,113.77,92.229,206,206,206c113.77,0,206-92.23,206-206 C462,142.229,369.77,50,256,50z M256,417c-88.977,0-161-72.008-161-161c0-88.979,72.008-161,161-161c88.977,0,161,72.007,161,161 C417,344.977,344.992,417,256,417z M382.816,265.785c1.711,0.297,2.961,1.781,2.961,3.518v0.093c0,1.72-1.223,3.188-2.914,3.505 c-37.093,6.938-124.97,21.35-134.613,21.35c-13.808,0-25-11.192-25-25c0-9.832,14.79-104.675,21.618-143.081 c0.274-1.542,1.615-2.669,3.181-2.669h0.008c1.709,0,3.164,1.243,3.431,2.932l18.933,119.904L382.816,265.785z"/></svg>
<image class="my-svg-alternate" width="96" height="96" src="ppngfallback.png" />
Change fill color of SVG image loaded via background-image
Edit it in an XML editor and if you know the color values, just change it.
Or, you can go to THIS LINK and make your edit.
Hope this helps.
How to change ::before SVG background-image color on hover, focus, active
The problem is that you are using SVG's data URI as a background image, meaning that its properties and styles cannot be modified—the SVG markup is not part of the DOM and therefore untouchable with CSS. It is akin to referencing a .svg
image path in your background-image
property.
The only solution is—as you have suspected—to simply encode a brand new SVG for the hover state:
.field { width: 100px; height: 100px; display: flex; justify-content: center; align-items: center; background-color: #849d8f;}
.field__search { width: 35px; height: 35px; background-color: rgba(255, 255, 255, 0.2); border-radius: 66px; position: relative;}
.field__search::before { content: ""; position: absolute; top: 8px; left: 8px; width: 22px; height: 22px; background-image: url("data:image/svg+xml;utf8, <svg xmlns='http://www.w3.org/2000/svg' width='16.687' height='16.688' viewBox='0 0 16.687 16.688'><path class='cls-1' d='M931.155,40.747H930.4l-0.264-.261a6.212,6.212,0,1,0-.675.675l0.263,0.262v0.755l4.773,4.76,1.423-1.422Zm-5.731,0a4.291,4.291,0,1,1,4.3-4.291A4.294,4.294,0,0,1,925.424,40.747Z' transform='translate(-919.219 -30.25)' fill='#fff' /></svg>"); background-repeat: no-repeat; background-position: 0 0; opacity: 1;}
.field__search:hover::before,.field__search:focus::before,.field__search:active::before { background-image: url("data:image/svg+xml;utf8, <svg xmlns='http://www.w3.org/2000/svg' width='16.687' height='16.688' viewBox='0 0 16.687 16.688'><path class='cls-1' d='M931.155,40.747H930.4l-0.264-.261a6.212,6.212,0,1,0-.675.675l0.263,0.262v0.755l4.773,4.76,1.423-1.422Zm-5.731,0a4.291,4.291,0,1,1,4.3-4.291A4.294,4.294,0,0,1,925.424,40.747Z' transform='translate(-919.219 -30.25)' fill='#000' /></svg>");}
<div class="field"> <div class="field__search"></div></div>
Change color/fill of a SVG path when used in the content of a ::before pseudo-element
You could use a mask.
div::before {
display: inline-block;
width: 18px;
height: 18px;
content: '';
background: var(--c);
-webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'><path d='M350.85 129c25.97 4.67 47.27 18.67 63.92 42 14.65 20.67 24.64 46.67 29.96 78 4.67 28.67 4.32 57.33-1 86-7.99 47.33-23.97 87-47.94 119-28.64 38.67-64.59 58-107.87 58-10.66 0-22.3-3.33-34.96-10-8.66-5.33-18.31-8-28.97-8s-20.3 2.67-28.97 8c-12.66 6.67-24.3 10-34.96 10-43.28 0-79.23-19.33-107.87-58-23.97-32-39.95-71.67-47.94-119-5.32-28.67-5.67-57.33-1-86 5.32-31.33 15.31-57.33 29.96-78 16.65-23.33 37.95-37.33 63.92-42 15.98-2.67 37.95-.33 65.92 7 23.97 6.67 44.28 14.67 60.93 24 16.65-9.33 36.96-17.33 60.93-24 27.98-7.33 49.96-9.67 65.94-7zm-54.94-41c-9.32 8.67-21.65 15-36.96 19-10.66 3.33-22.3 5-34.96 5l-14.98-1c-1.33-9.33-1.33-20 0-32 2.67-24 10.32-42.33 22.97-55 9.32-8.67 21.65-15 36.96-19 10.66-3.33 22.3-5 34.96-5l14.98 1 1 15c0 12.67-1.67 24.33-4.99 35-3.99 15.33-10.31 27.67-18.98 37z'/></svg>") center no-repeat;
}
<div style="--c:red;"></div>
<div style="--c:orange;"></div>
<div style="--c:yellow;"></div>
<div style="--c:green;"></div>
<div style="--c:blue;"></div>
<div style="--c:indigo;"></div>
<div style="--c:violet;"></div>
Related Topics
Why Does Position:Relative; Appear to Change the Z-Index
Twitter Bootstrap Navbar Fixed Top Overlapping Site
How to Force a Web Browser Not to Cache Images
Does Opacity:0 Have Exactly the Same Effect as Visibility:Hidden
How to Use a Carriage Return in a HTML Tooltip
Can an Option in a Select Tag Carry Multiple Values
How to Use Colspan and Rowspan in HTML Tables
Grid Properties Not Working on Elements Inside Grid Container
How to Avoid Joining All Text from Nodes When Scraping
Inputting a Default Image in Case the Src Attribute of an HTML ≪Img≫ Is Not Valid
How to Position One Image on Top of Another in Html
How to Escape Hash Character in Url
Why Does the Browser Renders a Newline as Space
Why Can't I Do ≪Img Src="C:/Localfile.Jpg"≫
Some Emmet Abbreviations in Vsc Not Working, Like '!' or Using '*'