SVG launch image

Here is the file. I’ve fixed it in Affinity designer, recreated a broken icon, vectorized the font, created a new bakground and optimized it with:

It is now 11 kb instead of 280kb

It works fine with me now.

3 Likes

As I said, SVG is not supported, and you’ll have some waiting the first time before the bg appears.

Thank you very much for help

But, can you provide a capture from your cellphone for the background in svg format?
Becaused on my phone, its not working
But its working apps editor

Then it’s probably your phone.

Yes you right, tried to another phone (android) it’s working
But on myphone (IOS) its not working

Hikzzz why…:sweat::sweat::sweat::sweat:

Yeah, IOS. A locked down nightmare.

1 Like

So…
Fixed, it’s problem becaused myphone ( ios - iphone )

will all iPhone users have this problem? Is there an iPhone user here who has a problem like me ???

All I have to say is wow.
Above and beyond. Thanks for being active in the community.

2 Likes

SVG’s are handled slightly differently between browsers (Chrome, Firefox, Safari, etc)… In the case of iOS devices, appsheet is rendered through the Safari browser.

You can include SVG in iOS applications, including the logo or background. The issue is likely some property of the svg file itself.

Your SVG has an embedded raster graphic - I suspect this is causing the issue. Embedding a raster graphic in an SVG is also ignoring much of the benefit you would get from SVG in the first place (the raster portion is not scalable).

2 Likes

I’ve converted the embedded rasters to vector graphics, this should fix the issues you were having.

https://svgur.com/i/Qpk.svg

Edit

You can also convert the graphic to a base64 string, and paste this string directly into the launch image spot:

image

Your base64 image

data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA3NzAgNTUwIj4KICA8bGluZWFyR3JhZGllbnQgaWQ9ImJnIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjUwJSIgeTE9IjEwMCUiIHgyPSI1MCUiIHkyPSIwJSI+CiAgPHN0b3Agb2Zmc2V0PSIwIiBzdHlsZT0ic3RvcC1jb2xvcjojMUY1RjY3Ii8+CiAgPHN0b3Agb2Zmc2V0PSIxIiBzdHlsZT0ic3RvcC1jb2xvcjojMDIwMzBFIi8+CiAgPC9saW5lYXJHcmFkaWVudD4KICA8cmVjdCBmaWxsPSJ1cmwoI2JnKSIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIvPgogIDxnIGZvbnQtZmFtaWx5PSJBcmlhbE1ULFNhbnMtU2VyaWYiIHRleHQtYW5jaG9yPSJtaWRkbGUiIGZpbGw9IiNGRkZGRkYiPgogICAgPHRleHQgeD0iNTAlIiB5PSIyMzEiIGZvbnQtc2l6ZT0iMjBweCI+UGF5Q2FzaCBBcHBzPC90ZXh0PgogICAgPHRleHQgeD0iNTAlIiB5PSIyNTgiIGZvbnQtc2l6ZT0iMTVweCIgb3BhY2l0eT0iMC43Ij5ZQVlBU0FOIFRVTkFTIExVSFVSPC90ZXh0PgogIDwvZz4KICA8Y2lyY2xlIGZpbGw9IiNFQkYwRjEiIGN4PSI1MCUiIGN5PSIxNTUiIHI9IjQ1Ii8+CiAgPHBhdGggZmlsbD0iIzAxNjkzOCIgZD0iTTM5MSwxNjkuM2wtMjQuMy0xMC44bDE1LjEtMzRjMC43LTEuNSwyLjQtMi4yLDQtMS41bDE4LjgsOC4zYzEuNSwwLjcsMi4yLDIuNCwxLjUsNEwzOTEsMTY5LjN6Ii8+CiAgPHBhdGggZmlsbD0iIzAyN0IzOCIgZD0iTTM5My4xLDE2NC40bC0yMC41LTEuM2MtMS43LTAuMS0yLjktMS41LTIuOC0zLjJsMi4xLTM0LjJjMC4xLTEuNywxLjUtMi45LDMuMi0yLjhsMjAuNSwxLjNjMS43LDAuMSwyLjksMS41LDIuOCwzLjJsLTIuMSwzNC4yQzM5Ni4yLDE2My4yLDM5NC44LDE2NC41LDM5My4xLDE2NC40eiIvPgogIDxwYXRoIGZpbGw9IiMzQzlDMzYiIGQ9Ik0zOTkuMiwxNTguN2wtMTkuMiw3LjRjLTEuNSwwLjYtMy4zLTAuMi0zLjktMS43bC0xMi4zLTMxLjljLTAuNi0xLjUsMC4yLTMuMywxLjctMy45bDE5LjItNy40YzEuNS0wLjYsMy4zLDAuMiwzLjksMS43bDEyLjMsMzEuOUM0MDEuNSwxNTYuNCw0MDAuOCwxNTguMSwzOTkuMiwxNTguN3oiLz4KICA8cGF0aCBmaWxsPSIjOTJDMTQyIiBkPSJNMzk3LjMsMTUxLjRsLTkuMS0yMy42Yy0yLjQsMC45LTUtMC4zLTUuOS0yLjZsLTEyLjEsNC43YzAuOSwyLjQtMC4zLDUtMi42LDUuOWw5LjEsMjMuNkwzOTcuMywxNTEuNHpNMzc1LjIsMTM0LjhjLTAuNy0xLjcsMC4yLTMuNiwxLjktNC4yczMuNiwwLjIsNC4yLDEuOWwxLjcsNC4zYzAuNywxLjctMC4yLDMuNi0xLjksNC4yYy0xLjcsMC43LTMuNi0wLjItNC4yLTEuOUwzNzUuMiwxMzQuOHpNMzc3LjMsMTUxLjljMC00LjYsMy43LTguMyw4LjMtOC4zczguMywzLjcsOC4zLDguM0gzNzcuM3oiLz4KICA8cGF0aCBmaWxsPSIjRTk4QjEzIiBkPSJNNDA2LjcsMTgzLjZoLTIuOHYtMzhoMi44YzEuNCwwLDIuNSwxLjEsMi41LDIuNXYzM0M0MDkuMiwxODIuNCw0MDguMSwxODMuNiw0MDYuNywxODMuNnoiLz4KICA8cGF0aCBmaWxsPSIjRjZBRTQ5IiBkPSJNMzY0LjksMTgzLjZIMzYyYy0xLjQsMC0yLjUtMS4xLTIuNS0yLjV2LTMzYzAtMS40LDEuMS0yLjUsMi41LTIuNWgyLjlWMTgzLjZ6Ii8+CiAgPHBhdGggZmlsbD0iI0Y0OUMwQiIgZD0iTTQwNC43LDE4My42aC00MC41Yy0xLjQsMC0yLjUtMS4xLTIuNS0yLjV2LTMzYzAtMS40LDEuMS0yLjUsMi41LTIuNWg0MC41YzEuNCwwLDIuNSwxLjEsMi41LDIuNXYzM0M0MDcuMiwxODIuNCw0MDYuMSwxODMuNiw0MDQuNywxODMuNnoiLz4KICA8ZyBmaWxsPSJub25lIiBzdHJva2U9IiNGQkNBNzYiIHN0cm9rZS13aWR0aD0iMC43IiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiPgogICAgPGxpbmUgeDE9IjQwNS4xIiB5MT0iMTc0LjQiIHgyPSI0MDUuMSIgeTI9IjE3NS4zIi8+CiAgICA8bGluZSB4MT0iNDA1LjEiIHkxPSIxNTIuOSIgeDI9IjQwNS4xIiB5Mj0iMTUzLjgiLz4KICAgIDxwYXRoIHN0cm9rZS1kYXNoYXJyYXk9IjEuNzE5MiwzLjQzODQiIGQ9Ik00MDUuMSwxNzguN3YxYzAsMC40LTAuMywwLjctMC43LDAuN2gtMzkuOGMtMC40LDAtMC43LTAuMy0wLjctMC43di0zMC4yYzAtMC40LDAuMy0wLjcsMC43LTAuN2gzOS44YzAuNCwwLDAuNywwLjMsMC43LDAuN3YxLjciLz4KICA8L2c+CiAgPHBhdGggZmlsbD0iI0NBNjIxMyIgZD0iTTQwOS41LDE3MC4zaC0xLjF2LTExLjVoMS4xYzAuNiwwLDEsMC40LDEsMXY5LjVDNDEwLjUsMTY5LjksNDEwLjEsMTcwLjMsNDA5LjUsMTcwLjN6Ii8+CiAgPHBhdGggZmlsbD0iI0QxNzMxMSIgZD0iTTQwOC40LDE3MC4zaC0xMi44Yy0zLjIsMC01LjgtMi42LTUuOC01Ljh2MGMwLTMuMiwyLjYtNS43LDUuOC01LjdoMTIuOFYxNzAuM3oiLz4KICA8cGF0aCBmaWxsPSIjRjFEMkFFIiBkPSJNMzk1LjUsMTY3LjNjLTEuNSwwLTIuOC0xLjItMi44LTIuOHMxLjItMi44LDIuOC0yLjhWMTY3LjN6Ii8+CiAgPHBhdGggZmlsbD0iI0M4QTU3RSIgZD0iTTM5NS41LDE2MS44YzEuNSwwLDIuOCwxLjIsMi44LDIuOHMtMS4yLDIuOC0yLjgsMi44VjE2MS44eiIvPgogIDxlbGxpcHNlIGZpbGw9IiNEOEI5OTciIGN4PSIzOTUuNSIgY3k9IjE2NC42IiByeD0iMS4yIiByeT0iMi44Ii8+Cjwvc3ZnPg==

Edit

Just noticed @Ratatosk already did this :sweat_smile:

5 Likes

Hi Jonathon, can you share a link to where you convert it?

Any base64 encoder will work, for example: https://www.base64encode.org/

Then just add a datatype declaration: data:image/svg+xml;base64,<base64 encoded string>

Example

This SVG:

<svg width="100" height="100">
<circle cx="50" cy="50" r="40" fill="red" />
</svg>

Becomes this base64 string:

PHN2ZyB3aWR0aD0iMTAwIiBoZWlnaHQ9IjEwMCI+CjxjaXJjbGUgY3g9IjUwIiBjeT0iNTAiIHI9IjQwIiBmaWxsPSJyZWQiIC8+Cjwvc3ZnPg==

Which you would preface with a data declaration as such:

data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAwIiBoZWlnaHQ9IjEwMCI+CjxjaXJjbGUgY3g9IjUwIiBjeT0iNTAiIHI9IjQwIiBmaWxsPSJyZWQiIC8+Cjwvc3ZnPg==

6 Likes

Hai jonathan,

Thank your for help

I will try your trick…

Hi Jonathon, would you add that the brackets (<>) should not be used on the “base64 encoded string”. I had some trouble before understanding it.

A plus on using your technique is that the SVG also loads faster than my method with a url. And the google sheets data also loads faster!

Edit: sorry I saw now that you added an example… My mistake.

1 Like