Solved: Re: SVG Rendering Issues in iPhone ?

Rifad · 03-10-2023 11:38 PM

SVG images are rendering down in iPhone. I use show type column with SVG code as Image. Can clearly see in desktop UI and Editor it shows with good quality.

Note: CLICK on Image to see in fullscreen to notice difference.

I contacted support to report this. Support asked me to update this image upload size for a SHOW type column. @devingu which does not make any sense.

Anyone in community noticed this issue ? It was working fine before. Looks like a bug to me.

Jonathon

SVG's will render differently on different browsers (e.g. safari vs chrome) and on different OS.

The blurry image is interesting - its almost as if it were converted to a raster image. I'd check to see if appsheet is converting/caching it. Are you able to view the page source on the iOS device?

View solution in original post

SkrOYC

The exact problem is that it looks blurry? Did you try another device (different model)?

Rifad

Right now only in iPhone. Need to check with multiple android devices too.

Rifad

Works fine in Android but the spacing is bit different but its soo much better than iPhone.

Rifad

@SkrOYC wrote:

exact problem is that it looks blurry?

Yes if you enlarge those images you can notice. It looks amazing in desktop and editor but not working properly in iPhone. It used work fine before. Contacted support but no use. They asked me to adjust image upload size for a SHOW type column. Their replies doesn’t make any sense anymore.

So I thought I will ask here if someone is facing similar issues with SVG.

AlexM

are the actions grouped? how? I love it!

Rifad

Those are dummy actions in cyan. You can also make it a collapsible action with conditions switching TRUE or FALSE but later if app has many actions it will be difficult to maintain. So right now it just does nothing.

Suvrutt_Gurjar

@Rifad : You design of SVG images is elegant. The app interface with those SVG images looks pleasant in desktop and editor. Your and @Jonathon 's SVG image examples posted in the community are very elegant.

Yes, on the iphone images look little less prominent. @Jonathon may have some guidelines.

Rifad

Thanks a lot @Suvrutt_Gurjar. Its nice to hear positive feedback from experienced person like you.

SkrOYC

@Rifad wrote:

Right now only in iPhone. Need to check with multiple android devices too

Yeah, I mean multiple iPhone models or even other devices like an iPad, to troubleshoot if this is related to the iOS version of the AppSheet app.

Also, their response about image upload size in Show column type is hilarious

Rifad

@SkrOYC wrote:

hilarious

PATHETIC from my POV

Jonathon

SVG's will render differently on different browsers (e.g. safari vs chrome) and on different OS.

The blurry image is interesting - its almost as if it were converted to a raster image. I'd check to see if appsheet is converting/caching it. Are you able to view the page source on the iOS device?

Rifad

It was on AppSheet App. It works fine in android.

Rifad

This issue was solved by @Jonathon. He is truly an expert ! The issue was with filters and it was effecting in ios. Thanks a lot for your time @Jonathon

dwdw97

Hey can you tell me what filters affect the svg, and how you solved your problem? I'm having similar problem right now with my svgs

toFrankie

mask?

Joseph_Seddik

I use SVG images and it renders correctly on iPhone app and in Safari. You might try saving in another svg format. I use Inkscape and export with the following settings:

<?xml version="1.0" encoding="UTF-8" standalone="no"?>

Rifad

Let me try it. Thanks @Joseph_Seddik

Joseph_Seddik

@Rifad Did it get better?

Rifad

Seriously need this detail view better. Lots of space in both sides stops the potential. Can represent these data in amazing ways if we could set width of detail view manually or by a percentage value. @Arthur_Rallu So far desktop view is amazing but couple of things like this can be improved.

peterson

Hello man, why don't you make some videos on youtube teaching how you make these SVGs?