Una posible solución seria utilizar el svg como data URI algo así:
Por favor observa que -a pesar de los cambios- el svg queda humanamente legible.
#svgbg{
height:200px;
width:200px;
border:1px solid;
background-image:url("data:image/svg+xml,%0A%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200' viewBox='0 0 26 26'%3E%0A%3Cpath d='M5,7a2,2 0 1 1 2,-2a2,2 0 0 0 4,0a2,2 0 0 1 4,0a2,2 0 0 0 4,0a2,2 0 1 1 2,2a2,2 0 0 0 0,4a2,2 0 0 1 0,4a2,2 0 0 0 0,4a2,2 0 1 1 -2,2a2,2 0 0 0 -4,0a2,2 0 0 1 -4,0a2,2 0 0 0 -4,0a2,2 0 1 1 -2,-2a2,2 0 0 0 0,-4a2,2 0 0 1 0,-4a2,2 0 0 0 0,-4z' fill='pink' stroke='black'%3E%3C/path%3E%0A%3C/svg%3E%0A");
}
<div id="svgbg"></div>
Por favor observa que:
<
se transforma en %3C
>
se transforma en %3E
Por ejemplo vuelve a ser %3Csvg%3E
#
se transforma en %23
Por ejemplo fill = "#abcdef" vuelve a ser fill = "%23abcdef"
el guión -
se transforma en %2D
Por ejemplo stroke-width="2" vuelve a ser stroke%2Dwidth="2"
el símbolo matemático porcien %
se transforma en %25
Por ejemplo width ='50%' vuelve a ser width ='50%25'
Puedes utilizar este URL-encoder for SVG o puedes leer como hacerlo aquí.
app
?, saludos