svg-fill-broken

svg fill is making the svg disappear.

by xekon

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>