Dynamic SVG graphics

Some utf8 characters need to be encoded to work as a URL - this is what the ENCODEURL() function in appsheet accomplishes.

In the above example, the problematic character is the hashtag (#) symbol. We can manually encode them by replacing them with %23:

data:image/svg+xml;utf8,
<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <defs>
<path id="path1" d="M10,30 H190 M10,60 H190 M10,90 H190 M10,120 H190"></path>
</defs>
<use xlink:href="%23path1" x="0" y="35" stroke="blue" stroke-width="1" />
<text transform="translate(0,35)" fill="red" font-size="20"> <textPath xlink:href="%23path1">This is a long long long text ......</textPath>
</text>
</svg>

The above will run in a browser, and should run in an AppSheet app if properly double-quoted.

2 Likes

Argh! How could I forget. Thank you @Jonathon.
So this is working in AppSheet:

"data:image/svg+xml;utf8,
<svg width=""200"" height=""200"" xmlns=""http://www.w3.org/2000/svg"" xmlns:xlink=""http://www.w3.org/1999/xlink""> <defs>
<path id=""path1"" d=""M10,30 H190 M10,60 H190 M10,90 H190 M10,120 H190""></path>
</defs>
<use xlink:href=""%23path1"" x=""0"" y=""35"" stroke=""blue"" stroke-width=""1"" />
<text transform=""translate(0,35)"" fill=""red"" font-size=""20""> <textPath xlink:href=""%23path1"">This is a long long long text ......</textPath>
</text>
</svg>"
4 Likes

Hey guys think so much, I’m still a little confused, when I past exact what @Fabian wrote in the last one, I’m still getting the error, fabian did you try that exact code into a browser, tester or app sheets? Do I need to wrap it in an encode url, and then do I still use image as the column type?

@Austin_Kerr

Don’t forget to wrap the expression in a CONCATENATE() to accommodate the text…

CONCATENATE(

“data:image/svg+xml;utf8,
<svg width=”“200"” height="“200"” xmlns="“http://www.w3.org/2000/svg”" xmlns:xlink="“http://www.w3.org/1999/xlink”">
<path id="“path1"” d="“M10,30 H190 M10,60 H190 M10,90 H190 M10,120 H190"”>

<use xlink:href=""%23path1"" x="“0"” y="“35"” stroke="“blue”" stroke-width="“1"” />
<text transform="“translate(0,35)”" fill="“red”" font-size="“20"”> <textPath xlink:href=""%23path1"">",

[Text Field],

"

")

Otherwise - underline seems to work nicely too :slight_smile:

2 Likes

I am wondering if anyone has been able to get Images to show within the SVG code in an AppSheet column?

I am trying to move images (like in an ad banner). With @Jonathon 's help I was able to create code that works in AppSheet that moves a generated circle along a defined path (sample AppSheet code below).

The same principle CAN be applied to Images. I was able to create an HTML web page to do it. But when inserting the code into AppSheet it didn’t work.

To debug, I then reduced the code to simply show an Image inside of the SVG code. Overkill I know since it is used in an Image column but its just to try to get an image to show this way so that then I can apply motion to it. Needless to say I had no luck.

Sample code is below and again it works like this in an HTML web page.

Has anyone tried displaying images in this manner in Appsheet? Might any of you know what I need to do to correct the code below so it DOES display the image?

Sample AppSheet Motion code to Move a Circle along a Defined Path

"data:image/svg+xml;utf8, <svg xmlns=""http://www.w3.org/2000/svg"" width=""1000"" height=""400"" viewBox=""-10 -30 1000 400"">
  <circle cx="""" cy="""" r=""25"" fill=""blue"">
    <animateMotion path=""M-1,1.499h83c0,0,10.5,1,10.5,11.25s-10.25,12.25-10.25,12.25h-43.5c0,0-10.75,0.75-11.75,11.5s9.75,12.25,9.75,12.25H343.5"" dur=""2s"" repeatCount=""indefinite"" fill=""freeze"" />
  </circle>
</svg>"

AppSheet Code (double-quoted) attempting to display an Image directly from Google Drive in an AppSheet column

"data:image/svg+xml;utf8, <svg xmlns=""http://www.w3.org/2000/svg"">
  <image xlink:href=""https://drive.google.com/uc?export=view&id=1gxvUziCU3zqYpi2B3IiS4OZqcoPp8-NK"" width=""50%"" height=""50%""/>
</svg>"