Dynamic SVG graphics

I have an image column in child table with " CONCATENATE("data:image/svg+xml;utf8, <svg… " appformula, and try to use VC in parent row to show the image. It works fine in editor and when using app in laptop Chrome, but not working on iPhone. Any idea why? VC is type image, and formula is ANY( [related childrows][ImageColumn] )

How is it not working? One thing to keep in mind when working with SVG’s, is that different browsers render them differently. In some cases SVG’s may appear different through the chrome browser than through Safari (iOS).

This would be one thing to check during troubleshooting. Have you had success getting any SVG to work, even a simple rectangle?

I got it working now, don’t know how or why… Image wasn’t loading on iPhone at all, there was just the triangle w/ exclamation mark showing

Color Mixer :blush:


This could be used in USERSETTINGS as well to generate the desired color. Then this RGB could be used all over the App.

10 Likes

Wow Fabian, that’s excellent!

Did someone work out a Pie Chart with SVG?
image

Hi @Fabian!

Sorry but I don’t understand how to use such a color mixer myself. Is this something you made to work in AppSheet? Or, is it on the web? If you could tell me how to access it, I’d appreciate it.

Hey Fabian, just did some experimenting with SVG donut charts:

image

I have included two code snippets at the bottom of this post, ‘simple’ and ‘complex’, although complex isn’t much more difficult. In any case, let me know if you have any issues - I haven’t actually tested this in my applications :upside_down_face:.

Some background info:

The circles are drawn with radius r="15.915...", which is the radius of a circle with circumference of 100. This will make your math easier in AppSheet as the input parameters can be numeric percentage values out of 100.

The stroke-dasharray parameter is used to make dashed lines. It takes two inputs: the length of the dash segment, and the gap between the next one. We always use a dash gap equal to the circles circumference, so we only see a single dash.

The stroke-dashoffset parameter, as the name implies, offsets the whole stroke along the path. This can be used to shift the donut chart segments so they aren’t overlapping eachother.


Simple

In the simple solution we eliminate the need for stroke-dashoffset by using cumulative percentages and drawing the segments ontop of eachother. The downside here is that the layers may bleed through eachother making the resulting image less ‘crisp’ (aka potentially less pretty), particularly on lower DPI screens.

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 42 42">
  <g fill="none" stroke-width="3">
    <circle cx="21" cy="21" r="15.91549430918952" stroke="orange" stroke-dasharray="100 100"></circle>
    <circle cx="21" cy="21" r="15.91549430918952" stroke="green" stroke-dasharray="95 100"></circle>
    <circle cx="21" cy="21" r="15.91549430918952" stroke="red" stroke-dasharray="45 100"></circle>
    <circle cx="21" cy="21" r="15.91549430918952" stroke="blue" stroke-dasharray="25 100"></circle>
  </g>
</svg>

Complex

The complex solution utilizes the stroke-dashoffset parameter by drawing the segments at their exact percentage value and shifting them around the donut chart accordingly.

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 42 42">
  <g fill="none" stroke-width="3">
    <circle cx="21" cy="21" r="15.91549430918952" stroke="blue" stroke-dasharray="25 100" stroke-dashoffset="0"></circle>
    <circle cx="21" cy="21" r="15.91549430918952" stroke="red" stroke-dasharray="20 100" stroke-dashoffset="-25"></circle>
    <circle cx="21" cy="21" r="15.91549430918952" stroke="green" stroke-dasharray="50 100" stroke-dashoffset="-45"></circle>
    <circle cx="21" cy="21" r="15.91549430918952" stroke="orange" stroke-dasharray="5 100" stroke-dashoffset="-95"></circle>
  </g>
</svg>
2 Likes

PROBLEM: Even though the SVG is visible in the Editor under App logo / Launch image, it will not really work.
In Android you can not create shortcut, because the SVG fails.
Also the Launch image doesn’t show up.

When using SVG’s in place of the brand logo loading screens there are some things to be aware of:

  • As you noted, SVG’s don’t work for app shortcuts, so you should use a .png logo in these cases
  • In general, there should be no issues with using SVG’s for loading screens or app background as these items are only displayed once the app is loaded

Currently I have my app launcher using a .png logo to avoid these issues. However, all of my other apps which are accessed solely through the app launcher use svg’s.

@Fabian

2 Likes

Thanks @Jonathon I’m using this very simple SVG as the Launch image and the Background image.

data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="200" height="100" version="1.1"> <rect width="200" height="100" stroke="black" stroke-width="6" fill="green"/> </svg>

Both are not working. The show up in the editor, but not in the App. There is also a warning message:

Are you sure BackgroundImage url 'data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="200" height="100" version="1.1"> <rect width="200" height="100" stroke="black" stroke-width="6" fill="green"/> </svg>' refers to an image?

Are you sure PageBackgroundImage url 'data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="200" height="100" version="1.1"> <rect width="200" height="100" stroke="black" stroke-width="6" fill="green"/> </svg>' refers to an image?

Hi @Jonathon did you find a way to include SVG in a Workflow PDF template?
I’m getting this error Message:

System.Exception: Failed to remove file extension from file name 'data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" height=\"100\" width=\"100\"> <circle cx=\"50\" cy=\"50\" r=\"40\" stroke=\"black\" stroke-width=\"3\" fill=\"blue\"/></svg>' because it contains Invalid characters: '\"' (Hex Character '0022') '<' (Hex Character '003C') '>' (Hex Character '003E')

My SVG looks like this:

“data:image/svg+xml;utf8,<svg xmlns=""http://www.w3.org/2000/svg"" height=""100"" width=""100""> <circle cx=""50"" cy=""50"" r=""40"" stroke=""black"" stroke-width=""3"" fill=""blue""/></svg>”

Hey Fabian, unfortunately as of my last tests, SVGs do not render in PDFs. :frowning:

1 Like

Adding @Phil

I’m very sad that I have found this post because it seems like I now have a whole new thing I need to now explore. With no understanding of what exactly SVG is or what ya’ll are doing, this is almost a
sudo-html-ish encoding into appsheet via images?

SVG’s aren’t officially supported by AppSheet. If you’re newer to the platform you may be better off avoiding SVG’s and seeing what else AppSheet has to offer.

I think it’s on AS’s roadmap to either support SVG’s more natively or to add improved charting features which make SVG’s less compelling.

Well the visual aspect of our apps is definitely something we are always looking to expand upon so anything we can find that can improve the appeal and ease of use of our apps is worth at least looking into.

2 Likes