Modify SVG fill color when being served as Background-Image

Question

Placing the SVG output directly inline with the page code I am able to simply modify fill colors with CSS like so:

po         


        

Answer 1

A lot of IFs, but if your pre base64 encoded SVG starts:

then this encodes to:

PHN2ZyBmaWxsPSIjYmZhNzZl

Both encoded strings start the same:

PHN2ZyBmaWxsPSIj

The quirk of base64 encoding is every 3 input characters become 4 output characters. With the SVG starting like this then the 6-character hex fill color starts exactly on an encoding block 'boundary'. Therefore you can easily do a cross-browser JS replace:

output = input.replace(/MDAwMDAw/, "YmZhNzZl");

But tnt-rox answer above is the way to go moving forward.