In CSS, replace cursor by inline SVG not working with fill attribute

Question

I try to replace the cursor with CSS inline SVG :

cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="32" height="32" stroke="black"><circle cx="16" cy="16" opacity="0.2" r="16" /></svg>') 16 16, pointer;

It works fine: https://jsfiddle.net/Imabot/rjw50kmc/7/

.container {
  width: 50vw;
  height: 50vh;
  background: gold;
  
  cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="32" height="32" stroke="black"><circle cx="16" cy="16" opacity="0.2" r="16" /></svg>') 16 16, pointer;
}

<div class="container"></div>

But when I try to specify the circle color with the fill attribute, it is no longer working:

cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="32" height="32" stroke="black"><circle fill="#ff0000" cx="16" cy="16" opacity="0.2" r="16" /></svg>') 16 16, pointer;

Non working jsFiddle: https://jsfiddle.net/Imabot/rjw50kmc/9/

.container {
  width: 50vw;
  height: 50vh;
  background: gold;
  
  cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="32" height="32" stroke="black"><circle fill="#ff0000" cx="16" cy="16" opacity="0.2" r="16" /></svg>') 16 16, pointer;
}

<div class="container"></div>

What's weird is that if I replace fill="#ff0000" by fill="red", it works fine : https://jsfiddle.net/Imabot/rjw50kmc/10/

.container {
  width: 50vw;
  height: 50vh;
  background: gold;
  
  cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="32" height="32" stroke="black"><circle fill="red" cx="16" cy="16" opacity="0.2" r="16" /></svg>') 16 16, pointer;
}

<div class="container"></div>

Why can't I specify RGB color and what should I do to specify the color as RGB?

Reopen the question for Zoe's answer.