为什么未渲染用作CSS背景的svg？

Question

.test {
  background-image: url("data:image/svg+xml;utf8,<svg viewBox='0 0 100 100' preserveAspectRatio='none'><defs><linearGradient id='bg' x1='0%' y1='0%' x2='100%' y2='0%'><stop offset='0%' style='stop-color:rgb(255,255,0);stop-opacity:1'/><stop offset='100%' style='stop-color:rgb(255,0,0);stop-opacity:1'/></linearGradient></defs><polygon fill='url(#bg)' points='0,100 100,0 100,100'/></svg>");
  width: 200px;
  height: 200px;
}

<div class='test'>
  test
</div>

效果可以在这里看到：https://jsfiddle.net/6k4Le0so/

任何人都知道为什么该svg无法作为背景吗？如果保存到文件，则可以在Inkscape中打开它。