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" />
Changing the fill color of SVG image loaded by data-URL inside a stylesheet
The only way I've found is to generate my svgs with a small (self written) tool, that converts the colors to fit my needs. But there is no solution that can change the colors on runtime. So each colors doubles size for each image. However the tool adds the ability to generate something like an imagemap as css. Often this is used for png icons, that are arranged on a large picture to avoid multiple http requests.
How to change color of SVG image using CSS (jQuery SVG image replacement)?
Firstly, use an IMG tag in your HTML to embed an SVG graphic. I used Adobe Illustrator to make the graphic.
<img id="facebook-logo" class="svg social-link" src="/images/logo-facebook.svg"/>
This is just like how you'd embed a normal image. Note that you need to set the IMG to have a class of svg. The 'social-link' class is just for examples sake. The ID is not required, but is useful.
Then use this jQuery code (in a separate file or inline in the HEAD).
/**
* Replace all SVG images with inline SVG
*/
jQuery('img.svg').each(function(){
var $img = jQuery(this);
var imgID = $img.attr('id');
var imgClass = $img.attr('class');
var imgURL = $img.attr('src');
jQuery.get(imgURL, function(data) {
// Get the SVG tag, ignore the rest
var $svg = jQuery(data).find('svg');
// Add replaced image's ID to the new SVG
if(typeof imgID !== 'undefined') {
$svg = $svg.attr('id', imgID);
}
// Add replaced image's classes to the new SVG
if(typeof imgClass !== 'undefined') {
$svg = $svg.attr('class', imgClass+' replaced-svg');
}
// Remove any invalid XML tags as per http://validator.w3.org
$svg = $svg.removeAttr('xmlns:a');
// Replace image with new SVG
$img.replaceWith($svg);
}, 'xml');
});
What the above code does is look for all IMG's with the class 'svg' and replace it with the inline SVG from the linked file. The massive advantage is that it allows you to use CSS to change the color of the SVG now, like so:
svg:hover path {
fill: red;
}
The jQuery code I wrote also ports across the original images ID and classes. So this CSS works too:
#facebook-logo:hover path {
fill: red;
}
Or:
.social-link:hover path {
fill: red;
}
You can see an example of it working here:
http://labs.funkhausdesign.com/examples/img-svg/img-to-svg.html
We have a more complicated version that includes caching here:
https://github.com/funkhaus/style-guide/blob/master/template/js/site.js#L32-L90
how to change svg fill color when used as base-64 background image data?
I want to post an answer to my own question. No exactly an answer, since it doesn't imply svg as background and base64, but it's my current alternative way, much more effective if you just need mono-color icons: just use svg as css mask, and change background color. Then you can also apply transitions on mouse events. I mean something like this:
mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" xml:space="preserve"><path d="M11.432 9.512a.636.636 0 0 1 0 .918L2.12 19.742a.636.636 0 0 1-.458.201.637.637 0 0 1-.46-.201l-1-.998C.068 18.609 0 18.459 0 18.285s.068-.329.199-.461l7.854-7.852L.199 2.118A.638.638 0 0 1 0 1.66c0-.174.068-.327.199-.46l1-.998A.634.634 0 0 1 1.66 0c.172 0 .325.068.458.201l9.314 9.311z"/></svg>');
mask-size: auto 12px;
mask-repeat: no-repeat;
transition: background-color 200ms;
background-color: #ff0000;
Please see this fiddle for come more code and demo:
https://jsfiddle.net/o25beLqj/
Also note a couple of things:
mask-image does not have base64 code inside. It's just preceeded by
data:image/svg+xml;utf8,
mask css properties are quite about the same of css background properties, take a look to docs, and you'll see you can do really a lot and they can substitute background images in a variety of use cases
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 color of a svg image from encoded url?
Use fill
property as used here:
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="12" version="1">
<path color="#FF0000" d="M4 8L0 4h8z" fill="red">
</path>
</svg>
Using uri
:
data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='12' version='1'%3E%3Cpath color='%23FF0000' d='M4 8L0 4h8z' fill='red'%3E%3C/path%3E%3C/svg%3E
Example:
<img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='12' version='1'%3E%3Cpath color='%23FF0000' d='M4 8L0 4h8z' fill='red'%3E%3C/path%3E%3C/svg%3E" />
Related Topics
Margin-Top Percentage Does Not Change When Window Height Decreases
Make Text in Select Element Wrap When Too Long
Set Textfield Height Material-Ui
CSS - Opaque Text on Low Opacity Div
Create Line After Text with CSS
Bootstrap 4 Align Elements Right Inside a Col Div
Css3 Transitions: Is There an on Click Option Without Using Jquery
Jqgrid Zebra/Alt Rows Background Not Working Due to UI Theme Class
Extracting Content in :After Using Xpath
How to Have Multiple Columns That Consume 100% Height Using Twitter Bootstrap
Css3Pie in MVC, Where to Place the Pie.Htc File
Opera and Custom Cursor in CSS
Leaflet for R: How to Change Default CSS Cluster Classes
CSS Fluid Layout: Margin-Top Based on Percentage Grows When Container Width Increases
Clamping Lines Without '-Webkit-Line-Clamp'
Generate Solid Colors Using CSS Linear-Gradient (Not Smooth Colors)