SVG pattern not working when used within background

Question

The following code works fine

svg {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
}

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  <defs>
    <pattern id="bgimg" x="0" y="0" width="110" height="110"  patternUnits="userSpaceOnUse">
      <image xlink:href="https://picsum.photos/id/1055/100/100.jpg" x="0" y="0" height="100" width="100" />
    </pattern>
  </defs>
  <rect x="0" y="0" width="10000" height="10000" fill="url(#bgimg)" />
</svg>

But when I try to integrate the SVG as a background, the image is no more showing

html {
  height: 100%;
  background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><defs><pattern id="bgimg" x="0" y="0" width="120" height="120"  patternUnits="userSpaceOnUse"><image xlink:href="https://picsum.photos/id/1055/100/100.jpg" x="0" y="0" height="100" width="100" /></pattern></defs><rect x="0" y="0" width="10000" height="10000" fill="url(%23bgimg)" /></svg>') 0 0/100% 100%;
}

Why is that and how can I fix it?

The pattern works fine with a non image element:

html {
  height: 100%;
  background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><defs><pattern id="bgimg" x="0" y="0" width="120" height="120"  patternUnits="userSpaceOnUse"><rect fill="blue" x="0" y="0" height="100" width="100" /></pattern></defs><rect x="0" y="0" width="10000" height="10000" fill="url(%23bgimg)" /></svg>') 0 0/100% 100%;
}