how can I change color of an svg img in base64 format?

Question

I have an Svg img with in a base64 format and trying to change the color of it. Does anyone have any pointers of how to do this? I found something about the <path> element, but do to the fact that the svg img is in a base64 string I'm not sure of how to use it. Can anyone help me or point me in the right direction?

<img src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2ZXJzaW9uPSIxLjEiIGlkPSJMYXllcl8xIiB4PSIwcHgiIHk9IjBweCIgdmlld0JveD0iNS4wIC0xMC4wIDEwMC4wIDEzNS4wIiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCAxMDAgMTAwIiB4bWw6c3BhY2U9InByZXNlcnZlIiBoZWlnaHQ9IjEwMHB4IiB3aWR0aD0iMTAwcHgiPgo8cGF0aCBpZD0icGF0aDE5ODNfM18iIGQ9Ik01MC4xLDQuOXY3LjRjMCwwLDAsMC0wLjIsMGMtMC4xLDAtMC40LDAuMi0wLjQsMC40YzAsMC4yLDAsNS4xLDAsNS4zYzAsMC4yLTAuMiwwLjItMC4yLDAuNCAgYzAsMC4yLDAsNC42LDAsNC44cy0wLjIsMC4yLTAuMiwwLjRjMCwwLjIsMCwxLjcsMCwxLjdsLTEuMywzLjZjMCwwLTAuNSwwLTAuNywwYy0wLjIsMC0wLjQsMC4yLTAuNCwwLjRjMCwwLjIsMCwwLjksMCwwLjkgIHMtMC40LDAtMC41LDBzLTAuNCwwLjItMC40LDAuNGMwLDAuMiwwLDUuMSwwLDUuMXMtMC40LDAtMC41LDBjLTAuMiwwLTAuNCwwLjItMC40LDAuNGMwLDAuMiwwLDYsMCw2LjJjMCwwLjMtMC42LDAuNC0wLjYsMC42ICBjMCwwLjIsMCwzMCwwLDMwcy0wLjcsMC0wLjksMGMtMC4yLDAtMC40LDAuMi0wLjQsMC40YzAsMC4yLDAsNi42LDAsNi42cy0xLjgsMC0yLDBjLTAuMiwwLTAuNCwwLjItMC40LDAuNGMwLDAuMiwwLDkuOSwwLDkuOSAgcy0yLjYsMC0yLjgsMHMtMC40LDAuMi0wLjQsMC40YzAsMC4yLDAsNC41LDAsNC41aDI1LjljMCwwLDAtNC4zLDAtNC41YzAtMC4yLTAuMi0wLjQtMC40LTAuNGMtMC4yLDAtMi44LDAtMi44LDBzMC05LjcsMC05LjkgIGMwLTAuMi0wLjItMC40LTAuNC0wLjRjLTAuMiwwLTIsMC0yLDBzMC02LjQsMC02LjZjMC0wLjItMC4yLTAuNC0wLjQtMC40Yy0wLjIsMC0wLjksMC0wLjksMHMwLTI5LjgsMC0zMGMwLTAuMi0wLjYtMC4zLTAuNi0wLjYgIGMwLTAuMywwLTYuMSwwLTYuMmMwLTAuMi0wLjItMC40LTAuNC0wLjRjLTAuMiwwLTAuNSwwLTAuNSwwczAtNSwwLTUuMWMwLTAuMi0wLjItMC40LTAuNC0wLjRjLTAuMiwwLTAuNiwwLTAuNiwwczAtMC43LDAtMC45ICBjMC0wLjItMC4yLTAuNC0wLjQtMC40Yy0wLjIsMC0wLjcsMC0wLjcsMGwtMS4zLTMuNmMwLDAsMC0xLjUsMC0xLjdjMC0wLjItMC4yLTAuMi0wLjItMC40czAtNC42LDAtNC44YzAtMC4yLTAuMi0wLjItMC4yLTAuNCAgYzAtMC4yLDAtNS4xLDAtNS4zYzAtMC4yLTAuMi0wLjQtMC40LTAuNHMtMC4yLDAtMC4yLDBWNC45aC0wLjRoLTAuMUg1MC4xeiIvPgo8dGV4dCB4PSIwLjAiIHk9IjExNy41IiBmb250LXNpemU9IjUuMCIgZm9udC13ZWlnaHQ9ImJvbGQiIGZvbnQtZmFtaWx5PSJIZWx2ZXRpY2EgTmV1ZSwgSGVsdmV0aWNhLCBBcmlhbC1Vbmljb2RlLCBBcmlhbCwgU2Fucy1zZXJpZiIgZmlsbD0iIzAwMDAwMCI+Q3JlYXRlZCBieSBMYXphciBOaWtvbGljPC90ZXh0Pjx0ZXh0IHg9IjAuMCIgeT0iMTIyLjUiIGZvbnQtc2l6ZT0iNS4wIiBmb250LXdlaWdodD0iYm9sZCIgZm9udC1mYW1pbHk9IkhlbHZldGljYSBOZXVlLCBIZWx2ZXRpY2EsIEFyaWFsLVVuaWNvZGUsIEFyaWFsLCBTYW5zLXNlcmlmIiBmaWxsPSIjMDAwMDAwIj5mcm9tIHRoZSBOb3VuIFByb2plY3Q8L3RleHQ+PC9zdmc+">

Answer 1

As you do not clarified if can't modify the original file or if must do it on client-side, I propose a

Programmatically approach:

1. Lookup the <img>
2. From img.src strip "data:image...", to extract Base64 encoded SVG.
3. Decode it using atob
4. Create an element, just for find the <path>
5. Set fill on path.
6. Append the new Image or Replace current one.

Example:

// Lookup the <img> by Id
var img = document.getElementById("target");

// Strip "data:image/svg+xml;base64," to get encoded SVG
var encoded = img.src.substring(26);

// Decode base64
var decoded = atob(encoded);

// Create an HTML element from decoded SVG
var wrapper = document.createElement('div');
wrapper.innerHTML = decoded;
var newSvg = wrapper.firstChild;

// Lookup the <path> and get a ref
var innerPath = newSvg.getElementsByTagName('path')[0];

// Set up new color
innerPath.setAttribute("fill", "#FF0000");

// Show modified image
document.body.appendChild(newSvg);

<img id="target" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2ZXJzaW9uPSIxLjEiIGlkPSJMYXllcl8xIiB4PSIwcHgiIHk9IjBweCIgdmlld0JveD0iNS4wIC0xMC4wIDEwMC4wIDEzNS4wIiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCAxMDAgMTAwIiB4bWw6c3BhY2U9InByZXNlcnZlIiBoZWlnaHQ9IjEwMHB4IiB3aWR0aD0iMTAwcHgiPgo8cGF0aCBpZD0icGF0aDE5ODNfM18iIGQ9Ik01MC4xLDQuOXY3LjRjMCwwLDAsMC0wLjIsMGMtMC4xLDAtMC40LDAuMi0wLjQsMC40YzAsMC4yLDAsNS4xLDAsNS4zYzAsMC4yLTAuMiwwLjItMC4yLDAuNCAgYzAsMC4yLDAsNC42LDAsNC44cy0wLjIsMC4yLTAuMiwwLjRjMCwwLjIsMCwxLjcsMCwxLjdsLTEuMywzLjZjMCwwLTAuNSwwLTAuNywwYy0wLjIsMC0wLjQsMC4yLTAuNCwwLjRjMCwwLjIsMCwwLjksMCwwLjkgIHMtMC40LDAtMC41LDBzLTAuNCwwLjItMC40LDAuNGMwLDAuMiwwLDUuMSwwLDUuMXMtMC40LDAtMC41LDBjLTAuMiwwLTAuNCwwLjItMC40LDAuNGMwLDAuMiwwLDYsMCw2LjJjMCwwLjMtMC42LDAuNC0wLjYsMC42ICBjMCwwLjIsMCwzMCwwLDMwcy0wLjcsMC0wLjksMGMtMC4yLDAtMC40LDAuMi0wLjQsMC40YzAsMC4yLDAsNi42LDAsNi42cy0xLjgsMC0yLDBjLTAuMiwwLTAuNCwwLjItMC40LDAuNGMwLDAuMiwwLDkuOSwwLDkuOSAgcy0yLjYsMC0yLjgsMHMtMC40LDAuMi0wLjQsMC40YzAsMC4yLDAsNC41LDAsNC41aDI1LjljMCwwLDAtNC4zLDAtNC41YzAtMC4yLTAuMi0wLjQtMC40LTAuNGMtMC4yLDAtMi44LDAtMi44LDBzMC05LjcsMC05LjkgIGMwLTAuMi0wLjItMC40LTAuNC0wLjRjLTAuMiwwLTIsMC0yLDBzMC02LjQsMC02LjZjMC0wLjItMC4yLTAuNC0wLjQtMC40Yy0wLjIsMC0wLjksMC0wLjksMHMwLTI5LjgsMC0zMGMwLTAuMi0wLjYtMC4zLTAuNi0wLjYgIGMwLTAuMywwLTYuMSwwLTYuMmMwLTAuMi0wLjItMC40LTAuNC0wLjRjLTAuMiwwLTAuNSwwLTAuNSwwczAtNSwwLTUuMWMwLTAuMi0wLjItMC40LTAuNC0wLjRjLTAuMiwwLTAuNiwwLTAuNiwwczAtMC43LDAtMC45ICBjMC0wLjItMC4yLTAuNC0wLjQtMC40Yy0wLjIsMC0wLjcsMC0wLjcsMGwtMS4zLTMuNmMwLDAsMC0xLjUsMC0xLjdjMC0wLjItMC4yLTAuMi0wLjItMC40czAtNC42LDAtNC44YzAtMC4yLTAuMi0wLjItMC4yLTAuNCAgYzAtMC4yLDAtNS4xLDAtNS4zYzAtMC4yLTAuMi0wLjQtMC40LTAuNHMtMC4yLDAtMC4yLDBWNC45aC0wLjRoLTAuMUg1MC4xeiIvPgo8dGV4dCB4PSIwLjAiIHk9IjExNy41IiBmb250LXNpemU9IjUuMCIgZm9udC13ZWlnaHQ9ImJvbGQiIGZvbnQtZmFtaWx5PSJIZWx2ZXRpY2EgTmV1ZSwgSGVsdmV0aWNhLCBBcmlhbC1Vbmljb2RlLCBBcmlhbCwgU2Fucy1zZXJpZiIgZmlsbD0iIzAwMDAwMCI+Q3JlYXRlZCBieSBMYXphciBOaWtvbGljPC90ZXh0Pjx0ZXh0IHg9IjAuMCIgeT0iMTIyLjUiIGZvbnQtc2l6ZT0iNS4wIiBmb250LXdlaWdodD0iYm9sZCIgZm9udC1mYW1pbHk9IkhlbHZldGljYSBOZXVlLCBIZWx2ZXRpY2EsIEFyaWFsLVVuaWNvZGUsIEFyaWFsLCBTYW5zLXNlcmlmIiBmaWxsPSIjMDAwMDAwIj5mcm9tIHRoZSBOb3VuIFByb2plY3Q8L3RleHQ+PC9zdmc+">

Note:

There are some restrictions on IE < 10

Can I use atob?

EDIT: Muplipath Approach

var paths = newSvg.getElementsByTagName('path');
[].forEach.call(paths, function(path) {
    path.setAttribute("fill", "#FF0000");
});

Answer 2

For a simple unicolor base64 encoded SVG, you can tweak the color via CSS filters.

The filters you need to apply vary. As your base64 encoded SVG is in black unicolor you first invert it to white. Then apply sepia and saturate it properly. Lastly, you tweak the yellow tone you now have via hue-rotate to your desired color.

img {
  filter: invert(1) sepia(100%) saturate(10000%) hue-rotate(45deg);
}