An SVG file isn’t playing its animation on Android, while it does in the AppSheet emulator.
In fact, the SVG had been working fine on Android for a couple of years, and it seems that recently (a couple of months ago, maybe?)
it stopped showing the animated portion specifically on Android, although I don’t have an iPhone to test it on. It looks fine in desktop mode.
anyone else noticed similar problems with their SVGs?
You may want to specifically mention what you mean by “SVG animation”.
A typical SVG code in an image type column is playing fine on my android device. For example the code that I shared in the following 3 tips is playing fine today also on an android mobile device.
Create Elegant Half Dial or Half Round Gauge Charts With SVG Code
Create auto scrolling carousel or slide shows functionality using SVGs ( using Gemini AI)
A few other things to check might be the android version of the device you are using and if it is still within AppSheet’s lowest versions allowed. AppSheet keeps revising version support for both android and iOS from time to time.
As for SVG anyway there is no official support announced by AppSheet as per my understanding. I believe, none of the AppSheet help articles mention SVG as an option. However @Rich_E , an AppSheet Google staff has published /commented on couple of nice tips using SVGs as below. So let us assume technically it is fine with using SVGs in AppSheet
Thanks for your quick response, @Suvrutt_Gurjar
My Android version is 10. Would that cause any problems?
I found the cause of the problem. It turns out my animation uses the dur (duration) variable, which I calculate using a decimal value in another column. Basically, when the dur variable is a decimal number, the animation doesn’t display on my Android device, while it does on the emulator and the desktop version.
This is still a problem for me because the accuracy of that value is important for how I use the SVG. I can’t simply round the value, even though that does fix the animation issue.
I’m sure that problem didn’t exist a few months ago.
I know you’re curious about my SVG (I hope so), so I’m sharing the animation part so you can run some tests.
I haven’t tested it yet with other SVGs that use duration, or I could also change some other variables to decimal to see if that also causes any problems. I’ll do that when I have some time, and if you haven’t beaten me to it, I’ll post the results in this thread.
SVG:
"data:image/svg+xml;utf8,"&CONCATENATE("<svg width='420' height='150' xmlns='http://www.w3.org/2000/svg'>
<g transform='translate(370, -30)'>
<path d='M32 5C32 5 16 22 16 32c0 9 7 16 16 16s16-7 16-16c0-10-16-27-16-27z' fill='rgb(173, 216, 230)' stroke='rgb(0, 0, 0)' stroke-linejoin='round' stroke-width='2' transform='scale(0.65)'>
</path>
<animateTransform attributeName='transform' attributeType='XML' type='translate' from='0 -10' to='0 105' dur=' ",[Decimal],"s' repeatCount='indefinite'/>
</g>
<rect x='10' y='-2' rx='5' ry='5' width='22' height='30' fill='lightgrey' stroke='rgb(0, 0, 0)' stroke-linejoin='round' stroke-width='2'/>
</svg>")
I investigated further and discovered the real problem: on my Android device, decimals are represented with a comma (0,0) instead of a period (0.0).
That’s why the problem only occurred on my Android device.
One solution is to use SUBSTITUTE([Decimal], “,”, “.”), and the other is to find out why the decimal format changed on my Android device.
Thank you @Kabulino for your updates. Good to know that you have found the cause of the issue.
I believe the decimal point representation issue could be because of the locale of your android device.
The response from AI in Google search is in the screenshot below.
Yes, the language was in Spanish (Spain) for some reason and I just had to change it to Spanish (Latin America).
Thank you for the update. However this thread discussion indicates that the AppSheet apps that use locales where a decimal point is denoted by a comma “,” rather than a full stop “.”, the app creators should use your earlier suggested following workaround in the SVG code.
This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.
