Solución:
Vea cómo el violín de trabajo tiene comillas dobles justo dentro del url() y luego todo el contenido SVG usa comillas simples? Necesitas hacer lo mismo. De lo contrario, el analizador no sabe dónde termina el contenido de la URL.
Alternativamente, puede hacer que la URL use comillas simples y mantener el mismo contenido SVG.
body { background-image: url('data:image/svg+xml;utf8,<svg class="shadow" xmlns="http://www.w3.org/2000/svg" version="1.1"><defs><filter id="f1"><feGaussianBlur in="SourceGraphic" stdDeviation="5" /></filter></defs><polygon points="200,0 200,200 0,200" filter="url(%23f1)"/></svg>'); }
También puede usar una codificación base64 para un formato más limpio, incluso si aumenta el tamaño real del archivo SVG. Consulte también la publicación css-tricks.com.
es decir:
background: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIy NCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij4KICAgIDxwYXRoIGQ9 Ik0wIDBoMjR2MjRoLTI0eiIgZmlsbD0ibm9uZSIvPgogICAgPHBhdGggZD0iTTEw LjA5IDE1LjU5bDEuNDEgMS40MSA1LTUtNS01LTEuNDEgMS40MSAyLjU4IDIuNTlo LTkuNjd2Mmg5LjY3bC0yLjU4IDIuNTl6bTguOTEtMTIuNTloLTE0Yy0xLjExIDAt MiAuOS0yIDJ2NGgydi00aDE0djE0aC0xNHYtNGgtMnY0YzAgMS4xLjg5IDIgMiAy aDE0YzEuMSAwIDItLjkgMi0ydi0xNGMwLTEuMS0uOS0yLTItMnoiLz4KPC9zdmc+ Cg==');
Puede usar este comando bash (probado en MacOS X) para generar fácilmente la propiedad de fondo CSS:
echo "background: url('data:image/svg+xml;base64,"$(openssl base64 < Downloads/material-design-icons-1.0.0/action/svg/ic_exit_to_app_24px.svg)"');"
Asegúrese de utilizar la codificación porcentual en los datos URI no codificados con base64.
Por ejemplo, para un SVG, codifique así:
body {
background-image: url('data:image/svg+xml;utf8,%3Csvg%20class%3D%22shadow%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20version%3D%221.1%22%3E%3Cpolygon%20style%3D%22stroke%3A%23252423%3Bfill%3A%23252423%3B%22%20points%3D%220%2C200%200%2C0%20200%2C0%22%2F%3E%3C%2Fsvg%3E');
}
Esto es equivalente al siguiente SVG:
<svg class="shadow" xmlns="http://www.w3.org/2000/svg" version="1.1"><polygon style="stroke:#252423;fill:#252423;" points="0,200 0,0 200,0"/></svg>
Para codificar porcentualmente una imagen, puede utilizar el siguiente código JavaScript:
console.log(encodeURIComponent('<svg class="shadow" xmlns="http://www.w3.org/2000/svg" version="1.1"><polygon style="stroke:#252423;fill:#252423;" points="0,200 0,0 200,0"/></svg>'))