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>");