svg作为css的background,导致fill不支持十六进制?

下面的代码中,我把svg作为css的background,发现fill属性如果写blue之类的单词,会显示正确的颜色,但换成十六进制,如#acd123,就无效.但是如果把相同的svg写在body里面,即作为html标签使用,fill里写十六进制的颜色,能正确显示相应颜色.所以问题来了,把svg作为css背景的情况下,svg下的rect的fill如何才能支持十六进制颜色的写法?

.svg{
  box-sizing: border-box;
  width: 100px;
  height: 100px;

 background: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg'><rect width='100%' height='100%' fill='blue' rx='15' stroke='red' /></svg>");
}
  <div class="svg">svg的fill颜色</div>