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

[Suvrutt_Gurjar]

Please take a look at the tip below

Dashboards with dynamic text overlay on SVG images - Google Cloud Community

[Kabuliño]

@Suvrutt_Gurjar  Thanks to your tip, now I can display the circle and the base64 image inside the svg, What I couldn't do was use the image as the fill of the circle, and although I can play with the dimensions it doesn't give me the desired look.

My intention was to use a circular progress bar with an image inside it in a deck view. The problem is that when passing the images to Base 64 they exceed 50000 characters per cell Do you know any work around that can help me?

[Suvrutt_Gurjar · Accepted solution]

I think for images with Base64 characters string exceeding 50,000 characters, you could use concatenation in two or three columns of Base 64 characters. I think @Kirk_Masden had mentioned this approach of  concatenation.

For me, I could convert a fairly detailed image into Base64 within 50,000 limit. For example, the following Image took around 29,000 characters to convert a .JPEG to Base 64.  The JPEG image was 512 X 512 pixels. I believe you may look into the image pixel size you are trying to convert.  I also believe you may need some experimentation as well. 

Finally, I think SVG images are best used as logos, icons ( the way we have icons in AppSheet for actions ) etc. and not for very detailed images. If you see tips on SVGs, they have such approach of using SVGs for icons etc.

The text "Kingfisher" is overlay on the image .It is populated with a variable based on another text column that contains names from the same record.

[Kabuliño]

---

@Suvrutt_Gurjar wrote:

I think for images with Base64 characters string exceeding 50,000 characters, you could use concatenation in two or three columns of Base 64 characters. I think @Kirk_Masden had mentioned this approach of  concatenation.

---

That idea crossed my mind but it seems to me that it is juggling too much for what I am looking for, in any case it is good to know that this option exists.

Another idea I have is, having the svg in one column, the image in another column and the union of the SVG and the image in a third column with html code, but I don't know if it's possible. Do you have experience with a method similar to the one I describe?

I leave you my triple progress bar in gratitude for the time you have dedicated to my questions

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

<style>
.rail1 {
stroke: #556270;
filter: drop-shadow(0.5px 0.9px 1px #556270);
}
.rail {
stroke: #556270;
filter: drop-shadow(0.5px 0.9px 1px #556270);
}
.circulo1 {
stroke:#",IF(OR(ISBLANK([Porcentaje_1]),[Porcentaje_1]=<0),'f12711','fffc00'),";
stroke-dasharray: ",[Porcentaje_1]," 100;
filter: drop-shadow(0.5px 0.5px 1px #fffc00);
stroke-linecap: round;
transform: rotate(-90deg);
transform-origin: 50%;
fill: transparent;
animation: progressbar 4s; 
}
@keyframes progressbar {
from {
stroke-dasharray: 0, 100; 
}
to
{
stroke-dasharray: ",[Porcentaje_1],", 100;
transform: rotate(630deg) ; 
}
}
.circulo2 {
stroke:#",IF(OR(ISBLANK([Porcentaje_2]),[Porcentaje_2]=<0),'f12711','96c93d'),"; 
stroke-dasharray: ",[Porcentaje_2]," 100;
filter: drop-shadow(0.5px 0.5px 1px #96c93d);
stroke-linecap: round;
transform: rotate(-90deg);
transform-origin: 50%;
fill: transparent;
animation: progressbar2 3s linear infinite;
}
@keyframes progressbar2 {
from {
stroke-dasharray: 0, 100;
}
to
{
stroke-dasharray: ",[Porcentaje_2],", 100;
transform: rotate(630deg) ;
}
}
.circulo3 {
stroke: #",IF(OR(ISBLANK([Porcentaje_3]),[Porcentaje_3]=<0),'f12711','00c3ef'),";
stroke-dasharray: ",[Porcentaje_3]," 100;
filter: drop-shadow(0.5px 0.5px 1px #00c3ef);
stroke-linecap: round;
transform: rotate(-90deg);
transform-origin: 50%;
fill: transparent;
animation: progressbar3 5s linear;
} 
@keyframes progressbar3 {
from {
stroke-dasharray: 0, 100;
}
to
{
stroke-dasharray: ",[Porcentaje_3],", 100;
transform: rotate(630deg) ; 
}
}
</style>

<circle class='rail' cx='50%' cy='50%' r='16' stroke-width='.75' fill='transparent' opacity='0.3'> </circle>

<circle class='circulo1' cx='50%' cy='50%' r='16' stroke-width='1.5' pathlength='100' > </circle>

<circle class='rail' cx='50%' cy='50%' r='14.25' stroke-width='.75' fill='transparent' opacity='0.3'> </circle>

<circle class='circulo2' cx='50%' cy='50%' r='14.25' stroke-width='1.5' pathlength='100' > </circle>

<circle class='rail' cx='50%' cy='50%' r='12.5' stroke-width='.75' fill='transparent' opacity='0.3'> </circle>

<circle class='circulo3' cx='50%' cy='50%' r='12.5' stroke-width='1.5' pathlength='100' > </circle>

</svg>"))

[Kabuliño]

Are you using appscript to automate the conversion to base 64?
or what is your method?

[Suvrutt_Gurjar]

No , those are not dynamic images. So the tip expects that one converts them using a .png or .jpg to Base 64 service and then use that Base 64 string as  background images with overlay  dynamic text or numeric data coming from the AppSheet record's text or numeric columns.

The tip is anyway for using SVGs in dashaboards etc.as  background images or icons to present some numeric / textual data in a more appealing manner. So a mass conversion to Base 64 is anyway not required.

So Appscript does not play any role here.

Hope I could explain.

[Suvrutt_Gurjar]

---

@Kabuliño wrote:

Another idea I have is, having the svg in one column, the image in another column and the union of the SVG and the image in a third column with html code, but I don't know if it's possible.

---

I have not tried much with additional HTML code. I am also unsure of AppSheet's  full scale support for HTML code. AppSheet has taken some initial steps in supporting HTML code and tags in a long text type column, but the capabilities are much limited. Please refer the following post.

Rich Text Formatting - in Preview Program - Google Cloud Community

Someone else may have more to share in terms of HTML coding.