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.
Recently I have been using Scalable Vector Graphics (SVG) in my applications, in place of typical raster images or even text in some cases. SVG graphics are defined through code, as per the examples here: https://www.w3schools.com/graphics/svg_examples.asp As the images are defined with code, you can CONCATENATE() strings of code together while including application variables, to make the images dynamic. In this way, you could have animated images which react to user input. Another thing to noā¦
the fill property should be set to that color; however ā#ā characters do not work unless you wrap them in ENCODEURL(). To avoid this I tend to just convert the HEX color to rgb, which are not prefaced with the #. In this case, #3F818D = rgb(63,129,141) Another thing you can do is remove much of the data classifiers, such as the data-icon=āboltā, etc. This will reduce the size:
DIM (Dynamic Indicator Maker) Hey everyone! I created a new tool that creates fancy SVG based indicators that dynamically update based on an assigned percent complete column in your app. [image] SVG stands for Scaleable Vector Graphics and these file types are special in that they are infinitely scaleable. Instead of being made of pixels like a regular image type, they are made from vectors, rays, circles, paths, etc so you can make the image as large (or small) as you need and the device wilā¦
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.
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.
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.
GreenFlux:
Will this solve the font inconsistencies that can cause text to run past the view box in some browsers?!
Unfortunately not in every case. Take, for example, the Roboto font:
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:
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.
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.
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.
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!
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ā¦
Iām still learning them myself lol. 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.
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.
