SAMPLE APP: Custom SVG App Icons

[GreenFlux]

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!

Dynamic SVG graphics Tips & Tricks 💡

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…

Dynamic SVG graphics Tips & Tricks 💡

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: <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"> <path fill="rgb(63,129,141)" d="M296 160H180.6l42.6-12…

DIM (Dynamic Indicator Maker) SVG Images Tips & Tricks 💡

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…

[jyothis_m]

Hi @Kirk_Masden Yes i am having SVG Images in Deck View. In Android and Browser I am not facing any issue presently.

I have added a VC for the image and put the SVG code as app formula

Have you implemented it the same way or in something different

[Kirk_Masden]

Thanks! I don't think I'm doing anything special but, come to think of it, the SVG data is being pulled in to the Google sheet via IMPORTRANGE().  I can't see why that would make any difference.  If anything, an error resulting from IMPORTRANGE() would make more sense to me than grainy thumbnails.

Just to be sure, have you tested your apps in the browser but NOT in the editor (that is, in full desktop mode)?  That is the only mode that is a problem for me:

https://www.googlecloudcommunity.com/gc/AppSheet-Q-A/SVG-thumbnails-in-browsers-look-terrible/m-p/54...

[Kirk_Masden]

One other thing I can say about this is that it used to work.   I hadn't open it for a while (or edited it anything) and then, when I opened it the other day, is was weird.  So, I'm pretty sure something on the AppSheet side has been changed. 

[jyothis_m]

Yes the screenshot i posted is from Browser not the appsheet editor. Can you once try putting the svg code directly in app formula to see if the problem is still there in that case

[Kirk_Masden]

The problem is fixed but I did nothing to fix it:

https://www.googlecloudcommunity.com/gc/AppSheet-Q-A/SVG-thumbnails-in-browsers-look-terrible/m-p/54...

It got weird on its own and now is better on its own (or perhaps due to something done by an AppSheet engineer).

[Kirk_Masden]

Hi!  When I first read your post, I hadn't noticed the issue but I noticed it today:
https://www.googlecloudcommunity.com/gc/AppSheet-Q-A/SVG-thumbnails-in-browsers-look-terrible/m-p/54...

Perhaps I didn't notice the issue right away because I rarely use an app in which SVG images produce thumbnails. 

[MaelBresail]

I really appreciate you sharing this fantastic resource for generating SVG app icons! Customization options like adjustable size, color, and stroke are incredibly valuable when it comes to creating a unique app design.

Now, when it comes to using these icons in AppSheet, it's great to have an SVG Sample App that adds the extra code needed for seamless integration. However, if you ever find yourself needing to fine-tune or optimize your SVG code further, you might want to explore an ai vector generator. It can assist in ensuring that your SVG code is not only correctly formatted but also optimized for the best performance in your app.