CODEWITHSUNDEEP
htmlcssangularsvg
Ole
Ole

Reputation: 46940

Setting the fill color of base 64 encoded SVG on Image element?

I know we can change the fill color using CSS for inline SVG. Can we do the same for base 64 encoded SVG. For example this is the Angular Logo generated with the ng new command. I tried adding style="fill:blue;" but no dice.

<img style="fill: blue;"  alt="Angular Logo" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNTAgMjUwIj4KICAgIDxwYXRoIGZpbGw9IiNERDAwMzEiIGQ9Ik0xMjUgMzBMMzEuOSA2My4ybDE0LjIgMTIzLjFMMTI1IDIzMGw3OC45LTQzLjcgMTQuMi0xMjMuMXoiIC8+CiAgICA8cGF0aCBmaWxsPSIjQzMwMDJGIiBkPSJNMTI1IDMwdjIyLjItLjFWMjMwbDc4LjktNDMuNyAxNC4yLTEyMy4xTDEyNSAzMHoiIC8+CiAgICA8cGF0aCAgZmlsbD0iI0ZGRkZGRiIgZD0iTTEyNSA1Mi4xTDY2LjggMTgyLjZoMjEuN2wxMS43LTI5LjJoNDkuNGwxMS43IDI5LjJIMTgzTDEyNSA1Mi4xem0xNyA4My4zaC0zNGwxNy00MC45IDE3IDQwLjl6IiAvPgogIDwvc3ZnPg==" width="40">

Upvotes: 1

Views: 712

Answers (1)

entio
entio

Reputation: 4263

You can base64 decode the image to svg markup, then amend it adding your style rule, base64 encode it again and set the src of the image to the new one.

I'm haven't tested it but can't see a reason why it wouldn't work.

Upvotes: 1

Related Questions