Loading SVGs in AppInventor?

MIT App Inventor Help
1

I found a weather icon set on Github with animated SVGs I'd like to use, however the picture elements don't load a URL to an SVG.
image

Is it possible to load an SVG into an image? I hate to use a webview because the background will not be transparent. I would also like to avoid downloading, converting, and uploading all of the SVGs to PNGs and to the app. (source)

I found an SVG loading extension on Kodular, but it requires a logged in user to download and I have never been able to sign up with them.

2

Seems both svg extensions are on Kodular...

Can you try a webviewer ? Would that work ?

3

And the Kodular signup process either fails or I never receive the confirmation email.

4

With the webviewextra extension you can set the webviewer background transparent (plus many other good reasons to use it :wink: )

5

Is this correct? The webviewer is just an empty white page.

image
image761×244 23.5 KB

6

You can embed an SVG image in an HTML file in several ways:

  • Using an iframe element
  • Using an img element
  • Using the SVG image as background image.
  • Using an svg element
  • Using an embed element

ref

1 Like
7

Interesting. I made this page that loads an SVG into a <img>.

On the companion, i see nothing but a blank white webview.
If I build the app, the animation shows but it looks very laggy. Not to mention the webview is not transparent.

8

I will do some testing, but will have to be later on...

1 Like
9

Turns out it was the webview size haha... Made it smaller and it is now smooth as butter.
The companion also renders the animation now as well (no idea what happened there).

However, it is still not transparent (I'll leave you to take a look at that :slight_smile:)

10

Oh..
image

One moment :person_facepalming:

11

Yep that was it! Transparent background works. Thanks for the help.

However, it would be nice to disable scrolling and zooming.

12

It is odd that one, sometimes it works, other times it doesn't

This seems to work for me:

image

<!DOCTYPE html>
<html>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

<head>
<title>SVG</title>
<style>
</style>
</head>

<body>
	<img src="isolated-thunderstorms-night.svg"/>
</body>

</html>
13

I'm looking to use a web svg, I don't want to download and upload so many images.

After modifying the Github Page a little, using a webview with your extension creates a decent design:

Screenshot_20241213_115009
Screenshot_20241213_115009720×1186 34.4 KB

1 Like