Getting unscrambled data uri curtain to work

How would I get this one to work? Red SVG
https://jsfiddle.net/ez9d7mb0/

background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'> <filter id='filter'> <feTurbulence baseFrequency='0.01 0.0001' numOctaves='5'/> <feColorMatrix values='1 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1'/></filter> <rect width='100%' height='100%' filter='url(#filter)'/> </svg>");

Converting this to an unscrambled data uri, which I did above and it is not working in the code.

<svg xmlns="http://www.w3.org/2000/svg">
    <filter id="filter">
        <feTurbulence baseFrequency="0.01 0.0001" numOctaves="5"/>
        <feColorMatrix values="1 0 0 0 0
                               0 0 0 0 0
                               0 0 0 0 0
                               0 0 0 0 1"/>
    </filter>
    <rect width="100%" height="100%" filter="url(#filter)"/>
</svg>

This Works: Scrambled data uri Blue SVG
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='filter'%3E%3CfeTurbulence baseFrequency='0.01 0.0001' numOctaves='5'/%3E%3CfeColorMatrix values='1 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23filter)'/%3E%3C/svg%3E");

This Works: Unscrambled data uri Orange SVG

This is using an unscrambled data uri and it is working in the code.

background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='165' height='165' viewBox='0 0 165 165'><rect x='0' y='0' width='165' height='165' fill='teal' /><rect x='5' y='5' width='160' height='160' fill='black' /><rect x='10' y='10' width='150' height='150' fill='orange' /><rect x='15' y='15' width='140' height='140' fill='black' /><rect x='20' y='20' width='130' height='130' fill='teal' /><rect x='25' y='25' width='120' height='120' fill='black' /><rect x='30' y='30' width='110' height='110' fill='orange' /><rect x='35' y='35' width='100' height='100' fill='black' /><rect x='40' y='40' width='90' height='90' fill='teal' /><rect x='45' y='45' width='80' height='80' fill='black' /><rect x='50' y='50' width='70' height='70' fill='orange' /><rect x='55' y='55' width='60' height='60' fill='black' /><rect x='60' y='60' width='50' height='50' fill='teal' /><rect x='65' y='65' width='40' height='40' fill='black' /><rect x='70' y='70' width='30' height='30' fill='orange' /><rect x='75' y='75' width='20' height='20' fill='black' /><rect x='80' y='80' width='10' height='10' fill='teal' /></svg>");

#filter to %23filter

https://jsfiddle.net/Lkx7z1mn/

background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'> <filter id='filter'> <feTurbulence baseFrequency='0.01 0.0001' numOctaves='5'/> <feColorMatrix values='1 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1'/></filter> <rect width='100%' height='100%' filter='url(%23filter)'/> </svg>");

I found this that fixed the issue:

The # character in a URL is reserved to indicate the start of a fragment identifier.

You must URL encode the data URL contents, which means converting any hash characters in the data URL to %23