Me pregunto por qué no puedo usar colores HEX con estilo cuando llamo a un svg desde la URL de datos utf8 .

Cuando lo llamo con color rgb, funciona perfectamente bien:

 <img src='data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" height="100" width="100"><defs><style>.roundShape{fill:rgb(38, 167, 253);}</style></defs><circle cx="50" cy="50" r="40" class="roundShape" /></svg>'>

Pero, si uso el color HEX, el svg no se muestra:

 <img src='data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" height="100" width="100"><defs><style>.roundShape{fill:#26a7fd;}</style></defs><circle cx="50" cy="50" r="40" class="roundShape" /></svg>'>

Curiosamente, en base64 todo funciona bien:

 <img id='imgBase64'> <script type="text/javascript"> document.getElementById('imgBase64').src = 'data:image/svg+xml;base64,'+btoa('<svg xmlns="http://www.w3.org/2000/svg" height="100" width="100"><defs><style>.roundShape{fill:#26a7fd;}</style></defs><circle cx="50" cy="50" r="40" class="roundShape" /></svg>'); </script>

¿Existe la posibilidad de usar el color HEX con la URL de datos utf8?