How to affect the fill color of an SVG if the SVG is base64 encoded as a background?

Question

I have chosen to base64 encode my SVGs as CSS backgrounds for faster load times but I can not change the fill color with CSS. With the following example, I have tried adding a background color but that just changes the color of the div. If I add fill: #06f; below background: it does nothing.

.icon {
    background: url(data:image/svg+xml;base64,PHN2Z...3N2Zz4K) no-repeat center center; 
}

How can I affect the fill colors with CSS alone?

Please post the entire url. – Weafs.py Jan 02 '15 at 14:18 — Weafs.py, Jan 02 '15 at 14:18
Put the CSS within the image base64 data itself. – Robert Longson Jan 02 '15 at 14:30 — Robert Longson, Jan 02 '15 at 14:30

score 1 · Answer 1 · edited May 23 '17 at 11:51

1

It isn't possible to change fill (or any other property) of an SVG background using CSS. https://stackoverflow.com/a/13367916/1620112 suggests a server-side generated SVG.

You could also use a client-side solution (as Robert suggests above). A very simple example can be found here https://stackoverflow.com/a/25305148/1620112 or here https://stackoverflow.com/a/25357798/1620112

edited May 23 '17 at 11:51

Community

1
1

answered Jan 02 '15 at 14:25

Charlie Dalsass

1,986
18
23

score -2 · Answer 2 · edited Jun 20 '20 at 09:12

Another approach to this that I've found works well is with PHP using a GET param to set the fill colour.

Example

CSS

.selector {
  background-image: url('svg.php?fill=ff0000');
}

PHP

<?php
    header('Content-type: image/svg+xml');
    $fill = $_GET['fill'];
?>
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="12" viewBox="0 0 18 12">
    <path fill="#<?php echo $fill; ?>" stroke="none" d="M17.93 6.34a3.148 3.148 0 0 1-.2.32l-5.262 5.04a.99.99 0 0 1-1.4 0 .91.91 0 0 1-.3-.68.927.927 0 0 1 .3-.68l3.6-3.42H1.01a.983.983 0 0 1-1-.94.96.96 0 0 1 1-.94h13.622l-3.6-3.42a.914.914 0 0 1-.3-.68.93.93 0 0 1 .3-.68 1.063 1.063 0 0 1 1.4 0l5.262 5.04a.7.7 0 0 1 .2.33.77.77 0 0 1 .036.71z"/>
</svg>

How to affect the fill color of an SVG if the SVG is base64 encoded as a background?

2 Answers2

Example