Changing SVG image color with javascript
Sure, here is an example (standard HTML boilerplate omitted):
<svg id="svg1" xmlns="http://www.w3.org/2000/svg" style="width: 3.5in; height: 1in"> <circle id="circle1" r="30" cx="34" cy="34" style="fill: red; stroke: blue; stroke-width: 2"/> </svg><button onclick="circle1.style.fill='yellow';">Click to change to yellow</button>
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 css fill for svg with JS
Instead of using svg_css.css({"fill" : "#hexadecimal"})
you can use svg_css.style.fill = "#hexadecimal"
And also, when you use getElementsByClassName
it returns an array, instead use getElementById
or choose the element inside array:
svg_css = document.getElementsByClassName('.cls-1')[0];
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 color of a svg source in a img tag?
I don't believe there is a way to do it with the SVG placed via an image tag, but I was able to achieve this by using SVGs as simple React components:
import React from 'react'
export const MySvg = ({ color }) => (
<svg style={{ fill: color }}>
...
...
</svg>
)
And then using in your component:
<MySvg color={color} />
I don't see this as a workaround, or a hack - quite the opposite. I have been able to achieve some impressive theming and customization using this technique.
Obviously you could extend this method to manipulate the fill directly:
export const MySvg = ({ color }) => (
<svg fill={color}>
...
...
</svg>
)
How to change the color of a svg?
Solution CSS
+ SVG
In the first answer was a solution purely with the help of SVG.
If you want to control the coloring of an image from an external style sheet, you must specify the path to this stylesheet in the first line of the svg file.
<?xml-stylesheet type="text/css" href="style.css"?>
where you must specify the full path to your style sheet.
The color of the image lines will produce a filter:
#image0 {
filter:url(#WhiteFilter);
}Coloring the background of images
#path0_fill {
fill:black;
}
Below is the full code:
svg path {fill:inherit;stroke:inherit;}#path0_fill {fill:black;}#image0 {filter:url(#WhiteFilter);}
<?xml-stylesheet type="text/css" href="style.css"?> <svg width="58" height="57" viewBox="0 0 58 57" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" >
<defs> <!-- black filter --> <filter id="BlackFilter" x="-20" y="-20" width="75" height="75"> <feColorMatrix in="SourceGraphic" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0 "/> </filter> <!-- white filter --> <filter id="WhiteFilter" x="-20" y="-20" width="75" height="75"> <feColorMatrix in="SourceGraphic" type="matrix" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 1 0 "/> </filter> </defs>
<path id="path0_fill" d="M 0 0L 58 0L 58 57L 0 57L 0 0Z" />
<image id="image0" width="58" height="57" preserveAspectRatio="none" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADoAAAA5CAYAAABnLziGAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA2xpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTM4IDc5LjE1OTgyNCwgMjAxNi8wOS8xNC0wMTowOTowMSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDo2NEU2MTVDOEVCQzJFNzExOEZEREJDOEMwMDc0QjFGOCIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDo0NkI1NEZDMEVBRUUxMUU3OUNDQURGQjhFQzQwNTExNSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDo0NkI1NEZCRkVBRUUxMUU3OUNDQURGQjhFQzQwNTExNSIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ0MgMjAxNyAoTWFjaW50b3NoKSI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOjgzNjI4N0NBMDFERkU3MTFBNjFFQzgyMkEyM0JDMTdBIiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOjY0RTYxNUM4RUJDMkU3MTE4RkREQkM4QzAwNzRCMUY4Ii8+IDwvcmRmOkRl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" />
</svg>
modify stroke and fill of svg image with javascript
If you use an img tag then for security reasons you will not be able to access the DOM of the image data. The image is effectively the same as an animated bitmap as far as the container is concerned.
Using an <iframe>
or <object>
tag will allow you to manipulate the embedded object's DOM.
Related Topics
React Open Modal Window on Click in Another Component
How to Compare Two Arrays Using Lodash (The Order Matters)
Json.Stringify Without Quotes on Properties
How to Store Multiple Items in Local Storage
How to Convert Seconds to Minutes and Hours in JavaScript
Progressive Web App - Service Worker Not Serving Start_Url
How to Make Any Hovered Color Darker/Lighter That the Original
Special Character Validation Using JavaScript
Javascript Random on Array Without Repeat
After Clicking a Button of Sweet Alert Call PHP File
What Does Webkitformboundary Mean
How to Change the State Correctly (Read-Only Error)
How to Get the Average from Array of Objects
How to Close Current Tab in a Browser Window
Uncaught Referenceerror: (Function) Is Not Defined At
Angular 4 Submit Form by Pressing Enter With Login Button
Prevent JavaScript String That Contains a Number from Dropping Zeros