css inline svg for background does not work in MS edge ( as expected -rolleyes)

[zantafio]

hello,

i am using an inline svg-string for a background in my site
like

background:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none" x="0" y="0" width="50px" height="50px" viewBox="0 0 50 50">
    <path fill="%237DAA9F" stroke="none" d="M 49.5 0 L 20 40 50 50 50 0 Z"/>
    <path fill="%2381AFA4" stroke="none" d="M 0 50 L 20 50 49.5 0 0 30 0 50 Z"/>
    <path fill="%2385b5aa" stroke="none" d="M 3 0 L 0 30 49.5 0 0 0 Z"/>
    </svg>');

background-color: #88B2A8;
background-size: 100% 100%;

works fine in Safari, Opera, Firefox, Chrome …
but not in MS Edge
Any Ideas?

Thanks a lot!

[mdmoreau]

Try putting charset= before utf8 – I’ve had that solve similar issues for me in the past.

[zantafio]

Thanks.
Tried, but it did not do the trick.

[mdmoreau]

You’ll probably need to encode the SVG as well – check out https://css-tricks.com/probably-dont-base64-svg/ for more information.

[Atelierbram]

Another thorough post on Optimizing SVGs in data URIs , and making them work across browsers by Taylor Hunt on Codepen.
All those things like encoding, as @mdmoreau wrote, but also using single quotes instead of double quotes (inside). Also maybe better use rgb ISO hex-colors.
I am not on windows so I haven’t tested this attempt to clean up the code in Edge, but it works in Microsoft Remote Desktop, so it should be OK.

[Author]

Posts