Problem including photo within svg-defined image in AppSheet

[dbaum]

Does anyone have guidance regarding how to successfully include a photo within an svg-defined image in AppSheet?

I have an Image type column, with each row's value being an svg-defined image. Nearly all render fine within the app. One includes a photo within its markup. Within the app, the photo is replaced by a missing image icon; nonetheless, this exact markup renders fine directly in a browser.

Here's an example.

svg markup

data&colon;image/svg+xml;utf8,<svg width="640" height="960" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <!-- Created with SVG-edit - https://github.com/SVG-Edit/svgedit--> <g class="layer"> <title>photo</title> <image height="960" id="svg_6" width="640" x="0" xlink:href="https://lh3.googleusercontent.com/drive-viewer/AFGJ81rHFpftACJETxYJgaCluzY-mgDEREb_Zi3SGjuLHk6H9lYcXIK76gMbPoIW0JT7tEBkN0i7dM8hwSKb58wp61aOpnxz=s1600" y="0"/> </g> <g class="layer"> <title>text</title> <path d="m438.08,175.96c0,-1.09 1.26,-1.98 2.82,-1.98c1.56,0 2.82,0.88 2.82,1.98c0,1.09 -1.26,1.98 -2.82,1.98c-1.56,0 -2.82,-0.88 -2.82,-1.98zm5.78,-14.19c0,-2.73 3.15,-4.94 7.05,-4.94c3.89,0 7.05,2.21 7.05,4.94c0,2.73 -3.15,4.94 -7.05,4.94c-3.89,0 -7.05,-2.21 -7.05,-4.94zm13.39,-21.52c0,-7.54 10.97,-13.65 24.52,-13.65c13.55,0 24.52,6.11 24.52,13.65c0,7.54 -10.97,13.65 -24.52,13.65c-13.55,0 -24.52,-6.11 -24.52,-13.65zm-21.05,-61.8c0,-32.52 37.59,-58.86 84,-58.86c46.41,0 84,26.34 84,58.86c0,32.52 -37.59,58.86 -84,58.86c-46.41,0 -84,-26.34 -84,-58.86z" fill="none" id="svg_3" stroke="%23d81b60" stroke-width="5"/> <text fill="%23d81b60" font-family="Sans-serif" font-size="50" font-weight="bold" id="svg_1" stroke="%23d81b60" stroke-dasharray="2,2" stroke-width="0" text-anchor="middle" transform="matrix(1 0 0 1 0 0)" x="524" xml:space="preserve" y="92">{text}</text> </g> </svg>

Rendering in AppSheet

Rendering directly in browser

(try it by pasting the svg markup into a browser address bar)

[James_McFarlane · Accepted solution]

I think is possible to work around converting the image to a base64. I read a post by @Suvrutt_Gurjar where he shows how it can be done. Sorry don't have the link to the post.

[dbaum]

I recalled seeing that conversation as well, but couldn't find it in searching last night for some reason. I think I found it now, and will investigate. Thanks.

Solved: Image within SVG - Google Cloud Community  

[dbaum]

That was exactly it. Thanks again.