Why hexadecimal color don't work with utf8 data URL’s for SVG [duplicate]-CodePudding

I'm wondering why i can't use HEX colors in style when i call an svg from utf8 data url.

When i call it with rgb color it work perfectly fine :

<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>'>

But, if i use HEX color, the svg does not display :

<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>'>

Curiously, in base64 everything work's fine :

<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>

Is there a possibility to use HEX color with utf8 data url?

CodePudding user response：

You would want to use encodeURIComponent() so there is not a parse issue:

document.getElementById('imgBase64').src = 'data:image/svg xml;utf8,' encodeURIComponent('<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>');

<img id='imgBase64' />