SAMPLE APP: Custom SVG App Icons

Intro

SVG images can be used in AppSheet, but the formatting is a little tricky. Luckily, several other community members have posted some great tips that I used in the creation of this sample app. See credits at the end of this post for more background on using SVGs.

I found a free resource for generating SVG app icons, with adjustable size, color and stroke. https://tablericons.com/

When you click an icon, the SVG code is copied to the clipboard and is ready to paste into AppSheet.

It’s really easy to customize a full set of icons for your app, but the SVG code isn’t quite formatted correctly for use in AppSheet.


This SVG Sample App adds the extra code needed to use the icons in AppSheet.

Just paste in the < SVG > and the app will do the rest.


Credits to all the awesome community members that have posted other SVG tips that helped me figure this out!



11 Likes

This is such a great resource!
And now that MS Edge is actually chromium based, it should have the same rendering… Now we can tell our Microsoft users to just upgrade to the newest Edge Browser. This is great news for SVG it rendered strangely in Edge.

6 Likes

Do you know how to “generate” the dynamic appsheet version of the code… Like so we could have a hex color column, things like that?

I’ve done similar things with services like www.placehold.jp using the URL to pass request parameters for color, custom text, etc.

http://placehold.jp/99ccff/003366/150x150.png?text=AppSheet
image

But with this icon service from https://tablericons.com/, the URL does not update with request. So there’s no way to pass values from AppSheet before downloading the SVG.

However, you could download an SVG as a template, then use SUBSTITUTE() to swap out the original HEX color with one from the app.

3 Likes

Exactly, but then things get crazy fast right, kind double quotes, etc.

:weary: Yeah, escaping quotes in AppSheet is fun…

It would be extra cool if someone could write an expression to do it… :wink:

Will this solve the font inconsistencies that can cause text to run past the view box in some browsers?!

Probably…
https://support.microsoft.com/en-us/help/4501095/download-the-new-microsoft-edge-based-on-chromium

3 Likes

Disclaimer: The last time I tested this was a year ago. However, unless AppSheet has changed something, I don’t know why the behaviour would be different.


Unfortunately not in every case. Take, for example, the Roboto font:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 30" >
  <text y="20" font-family="Roboto, Arial, sans-serif">Roboto</text>
</svg>

It has been my experience that Android devices and most windows PC’s / browsers will render the Roboto font family. However, on iOS devices, the font will be the iOS native sans-serif font. iOS devices don’t have access to the Roboto font to render it.

The solution to this problem would be to import the font-family:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 30" >

  <style type="text/css">@import url('https://fonts.googleapis.com/css?family=Roboto');</style>

  <text y="20" font-family="Roboto, Arial, sans-serif">Roboto</text>
</svg>

Unfortunately, AppSheet does not allow us to import our own font families.

Note that AppSheet includes Roboto font as an option within the app editor. Logic would dictate that if your app is using the Roboto font, on an iOS device, that the SVG should also be able to use it. In my testing, this hasn’t been the case.

3 Likes

Do you have some for of a substitute expression handy that could automatically make SVG code ready for appsheet columns [colum_name]

Microsoft word find and replace " for "" :joy:

In an ideal world, AppSheet would create an SVG datatype which allows us to directly insert SVG code with workflow variable placeholders. <<[variable]>>

Maybe QREW could add an SVG double-quote function to their chrome addon?

@Stefan_Quartemont

Edit

I understand what you’re saying now Grant: wrap the whole expression with SUBSTITUTE() to avoid issues with double-quoting.

Unfortunately I think you will run into problems wherever variables are inserted and the CONCATENATE() string would be broken. Sometimes you end up with triple quotes here… Still, maybe possible.

Generally, the double-quote process is a one-time annoyance. I’d rather do it myself and save the expression having to perform that step every time. Although maybe the performance hit would be negligible.

Can you post an example code, that goes from"Street SVG" to “Appsheet SVG” to Dynamic Appsheet SVG"

I don’t think I’ve ever been able to digest the differences fully…

2 Likes

Awesome find and work! This is a great resource. One question. It doesn’t seem like you can copy the Appsheet formula to generate SVG in the app. Am I missing anything? I only see the raw SVG code.

1 Like

Thanks, @Rich! I hadn’t thought of copying the code back out of the app, and into another source. My original intent was to paste the SVG into the final app where it is to be used.

I see what you’re saying though. It would be useful to copy back out of the app and into another. I’ll add a column to get the proper output. Thanks for the idea!

I’m still learning them myself lol. :sweat_smile: I never would have gotten this far without the previous posts I linked.

The main differences I have seen are:

  • need to include data:image/svg+xml;utf8, at beginning of code
  • replace # with %23
  • probably need to URLENCODE() other portions of code, but # is the only character causing issues with this particular SVG generator.
1 Like

Street

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
  <text font-size="30px" x="10" y="50">Hello World</text>
</svg>

Appsheet Static

"data:image/svg+xml;utf8,
<svg xmlns=""http://www.w3.org/2000/svg"" viewBox=""0 0 100 100"">
<text font-size=""30px"" x=""10"" y=""50"">Hello World</text>
</svg>"

AppSheet Dynamic

CONCATENATE("data:image/svg+xml;utf8,
<svg xmlns=""http://www.w3.org/2000/svg"" viewBox=""0 0 100 100"">
<text font-size=""30px"" x=""10"" y=""50"">",[variable],"</text>
</svg>
")
7 Likes

@Jonathon That is SO helpful!

1 Like

Updated the detail view so that the new AppSheet-friendly SVG code can be copied.

4 Likes

I decided to sponsor this developer’s GitHub project. This is an excellent tool that’s a great addition to AppSheet, and is offered completely for free.

Here’s the link in case anyone else wants to contribute to this open source project.

3 Likes