I generally try and figure these things out myself, but after a certain amount of hours its good to get another set of eyes. I took my problem and simplified it to a small example:
The Problem is that when the path is loaded in the css the fill does not work. I need .myicon1 to appear blue, but as you can in the example its just missing. I am trying to load the SVG through CSS instead of directly in the HTML, and it works as shown in the third box, but does not work if I try to fill it, as shown in second box it just disappears.
The second/middle box should be blue like the first box, not disappeared.
https://jsfiddle.net/xekon/9vcrfs0p/
or if you prefer, here is the code that you can save to testing.html:
<!DOCTYPE html>
<html>
<head>
<style>
.mysvg {
width: 100px;
height: 100px;
border: 5px solid black;
background-size: contain;
background-position: center;
background-repeat: no-repeat;
display: inline-block;
}
.myicon1 {
background-image: url('data:image/svg+xml;charset=utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200"><path d="M 10 75 Q 50 10 100 75 T 190 75" fill="#0099ff"/></svg>')
}
.myicon2 {
background-image: url('data:image/svg+xml;charset=utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200"><path d="M 10 75 Q 50 10 100 75 T 190 75"/></svg>')
}
</style>
</head>
<body>
<!-- Created Directly in HTML -->
<span class="mysvg"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200"><path d="M 10 75 Q 50 10 100 75 T 190 75" fill="#0099ff"/></svg></span>
<!-- FILL NOT WORKING, makes SVG disappear -->
<span class="mysvg myicon1"></span>
<!-- Same as above but without the FILL -->
<span class="mysvg myicon2"></span>
</body>
</html>
