Image within SVG

[Kabuliño]

I am starting to play with SVGs and what has me stuck at the moment is being able to display a jpg or png image inside an svg circle in appsheet.
Outside of appsheet I have achieved it without problems in the following way:
Circle and imagen

<svg xmlns='https://www.w3.org/2000/svg' width='100%' height='100%' viewBox='0 0 40 40'> 
<defs> 
<pattern id='foto' patternUnits='userSpaceOnUse' width='100' height='100'>
<image href=https://drive.google.com/uc?export=view&id=1sF7SR0Oi25OTSqC45yyPaBvQiEE3peQs x='0' y='0' width='100%' height='100%' />
</defs>
<style> 
.circulo {
stroke: #305059;
}
</style>
<circle class='circulo' cx='20' cy='20' r='16' stroke-width='1' fill='url(#foto)'> </circle>
</svg>

In general, I don't have a problem displaying svgs in appsheet, but I'm having a hard time displaying the images inside SVGs in appsheet

Circle in appsheet 

"data&colon;image/svg+xml;utf8,"&ENCODEURL("<svg xmlns='http://www.w3.org/2000/svg' width='100%' height='100%' viewBox='0 0 40 40'>

<circle class='rail' cx='20' cy='20' r='16' stroke='black' stroke-width='1' fill='transparent'> </circle>
</svg>")

Circle and image in appsheet ??

"data&colon;image/svg+xml;utf8,"&ENCODEURL(CONCATENATE("<svg xmlns='https://www.w3.org/2000/svg' width='100%' height='100%' viewBox='0 0 40 40'> 
<defs> 
<pattern id='foto' patternUnits='userSpaceOnUse' width='100' height='100'>
<image href=",[Foto]," x='0' y='0' width='100%' height='100%' />
</defs>
<style> 
.circulo {
stroke: #305059;
}
</style>
<circle class='circulo' cx='20' cy='20' r='16' stroke-width='1' fill='url(#foto)'> </circle>
</svg>"))

 I have tried a few different ways but still no success