Debugging dynamic text overlay on SVG images

AppSheet AppSheet Q&A
1

After the rather smart @Suvrutt_Gurjar , I have attempted to make my own terribly simple SVG image with text overlay, but can’t seem to get it right - ending up with a small warning triangle every time.

Expert eyes that can spot (and guide me) on my rookie mistakes would be appreciated.
My effort is based - possibly too closely - on https://www.googlecloudcommunity.com/gc/Tips-Tricks/Dashboards-with-dynamic-text-overlay-on-SVG-images/m-p/516875

I have the following columns defined:

  • _backdrop : Long text : Virtual column
"data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTAwIiBoZWlnaHQ9IjUwMCIgdmlld0JveD0iMCAwIDUwMCA1MDAiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxyZWN0IGlkPSJSZWN0YW5nbGUgMSIgd2lkdGg9IjUwMCIgaGVpZ2h0PSI1MDAiIGZpbGw9IiM4RDREQ0MiLz4KPC9zdmc+Cg=="​
  • _attribute : Text : Virtual column
"MEMBER NAME"​
  • SVG : Image : Virtual column
CONCATENATE("data&colon;image/svg+xml;utf8,<svg version=""1.1""
     xmlns=""http://www.w3.org/2000/svg"" xmlns:xlink=""http://www.w3.org/1999/xlink""
     width=""500"" height=""500"">
  
     <image x=""0"" y="" 0 "" width=""500"" height=""500""
      xlink:href=""",[_backdrop],"""/>
     
    <text font-family=""Verdana"" font-size=""25""  x=""170"" y=""140"" 
               fill=""rgb(46, 139, 87)"">",[_attribute],"</text>
 </svg>")​

  • The result:

    gcor71_0-1695746605594.png

Thank you, in advance.

2

Please try the following code. Please note the changes around [Attribute] column

CONCATENATE(“data:image/svg+xml;utf8,<svg version=”“1.1"”
xmlns=““http://www.w3.org/2000/svg”” xmlns:xlink=““http://www.w3.org/1999/xlink””
width=““500"” height=”“500"”>

<image x=““0"” y=”" 0 “” width=““500"” height=”“500"”
xlink:href=“”“,[_backdrop],”“”/>

<text font-family=““Verdana”” font-size=““25"” x=”“170"” y=““140"”
fill=”“rgb(46, 139, 87)”“>“”“,[_attribute],”“”
”)​

1 Like
3

When dealing with SVG, you can notice that the data in the SVG uses double quotes.
AppSheet, as a no-code oriented platform, accepts either single or double quotes, same for comma and semicolon.

Try using single quotes in your expressions, like this:

CONCATENATE(
'data&colon;image/svg+xml;utf8,<svg version="1.1"
     xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
     width="500" height="500">
     <image x="0" y=" 0 " width="500" height="500"
      xlink:href="',[_backdrop],'"/>
    <text font-family="Verdana" font-size="25"  x="170" y="140" fill="rgb(46, 139, 87)">',[_attribute],'</text>
 </svg>'
)
1 Like
4

Btw, I took some minutes to explore this a bit, and if you are using an image just to display a background color, this may be a better solution:

CONCATENATE(
  'data&colon;image/svg+xml;utf8,<svg version="1.1"
  xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
  width="600" height="400">
  <rect width="100%" height="100%" fill="%23909090"/>
 <text font-size="96"  x="50%" y="50%" alignment-baseline="middle" text-anchor="middle" fill="rgb(255, 255, 255)">',
 [YourText],
 '</text>
</svg>'
)

In the example above, I’m using a bigger text, which is centered, and replaced the image tag with , which is a gray color object that uses the whole available space

1 Like
5

@Suvrutt_Gurjar , @SkrOYC , you’ve both been very generous with your replies - however, something is still wrong. There are no red flags in the editor, and I’ve tried all three alternatives for the SVG (image, virtual) column. I’m now suspicious of the _background (long text, virtual) column.

Any other suggestions? Is there a way I can test the individual components to find the fault?

6

Using the Test section in the Expression Assistant.

Btw, we can even use gradients… this is great:

CONCATENATE(
	'data&colon;image/svg+xml;utf8,<svg version="1.1"
  xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
  width="100%" height="100%">
  <rect width="100%" height="100%" fill="url(%23MyGradient)"/>
  <defs>
  <linearGradient id="MyGradient" x1="0%" y1="0%" x2="100%" y2="0%">
    <stop offset="0%" style="stop-color:%23909090;stop-opacity:1" />
    <stop offset="100%" style="stop-color:%23FFFFFF;stop-opacity:1" />
  </linearGradient>
  </defs>
  <text font-size="96"  x="50%" y="50%" alignment-baseline="middle" text-anchor="middle" fill="%23FFFFFF">',
 [YourText],
 '</text>
</svg>'
)
1 Like
7

Still not working for me.

TEST, using your gradient example, returns

data&colon;image/svg+xml;utf8,<svg version="1.1"
  xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
  width="100%" height="100%">
  <rect width="100%" height="100%" fill="url(%23MyGradient)"/>
  <defs>
  <linearGradient id="MyGradient" x1="0%" y1="0%" x2="100%" y2="0%">
    <stop offset="0%" style="stop-color:%23909090;stop-opacity:1" />
    <stop offset="100%" style="stop-color:%23FFFFFF;stop-opacity:1" />
  </linearGradient>
  </defs>
  <text font-size="96"  x="50%" y="50%" alignment-baseline="middle" text-anchor="middle" fill="%23FFFFFF">MEMBER NAME</text>
</svg>

TEST, using @Suvrutt_Gurjar 's reply at the top, returns

data&colon;image/svg+xml;utf8,<svg version="1.1"
xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
width="500" height="500">

<image x="0" y=" 0 " width="500" height="500"
xlink:href="data&colon;image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTAwIiBoZWlnaHQ9IjUwMCIgdmlld0JveD0iMCAwIDUwMCA1MDAiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxyZWN0IGlkPSJSZWN0YW5nbGUgMSIgd2lkdGg9IjUwMCIgaGVpZ2h0PSI1MDAiIGZpbGw9IiM4RDREQ0MiLz4KPC9zdmc+Cg=="/>

<text font-family="Verdana" font-size="25" x="170" y="140"
fill="rgb(46, 139, 87)">"MEMBER NAME"</text>
</svg>

The DATA definitions for the columns are:

gcor71_0-1695757436074.png
gcor71_0-1695757436074.png2476×226 28.1 KB

Any other suggestions? I feel I’m close…

8

SkrOYC_0-1695758398683.png

.

2 Likes
9

GENIUS!

Working now.