Unable to load SVG Image from url

[infofcc3]

Problem statement summary : Unable to Load External SVG Image as Icon in Grafana Canvas Plugin on Cloud Version.
The user is trying to load an external SVG image as an icon using the Canvas plugin in Grafana Cloud. The method involves providing an external URL in the designated field. However, the image fails to load and appears empty in the interface, although setting the same image as a background works without issues.

Step to load svg image from url in canvas

Step 1 : First load your svg image on github to generate url of the svg image wich is use in canvas url.

• Create new repository on github

Step 2 : Give repository name and click on Create Repository(Must be public )

Now click on uplode an existing file and then uplode your svg image and then commit it.

Step 3 : Now open the repository and open the image in my case (img.svg) and then inspect the image and then select the element using element selector.

Now right click on image and select Edit attribute and then copy the Url link of the image.

Step 4: Create new dashboard in Grafana Click on add visualization

Step 5 : Now select Canvas in Visualization

Step 6 : Now right click on panel and then click on set background and click on Url field.

In Url field past the url link which is copy earlier then select the image.

Final Output : Successfully load SVG Image from url in canvas

[jangaraj]

@infofcc3

Now right click on image and select Edit attribute and then copy the Url link of the image.

Why you are using that not human friendly url, when you can refer it directly, e. g. https://raw.githubusercontent.com/aryanngoswami/img/refs/heads/main/img.svg?

[infofcc3]

Thank you for your valuable suggestion! I’m glad it worked out better—your input is always appreciated. Feel free to share more ideas anytime!

[raymonvt]

@infofcc3 thank you so much, I had this problem for months. Since I’m running on a Azure managed grafana I cannot add the icons to the docker container but the icon URL just is not working. You showing that this is working for the canvas background gave me a idea and it worked as a great workaround!

1. create a icon set the source as URL and paste in the HTTP(s) URL:
   As we know this is not working, so you end up with a empty icon

2. now comes the fix, select the icon
3. go to background, select fixed colour and click on select a value:

4. click on URL and past your icon URL , click save:

doing this will populate the background of the icon so it looks like our custom icon:

The downside of this workaround is that you cannot change the color of the Icon so this problem should still get fixed. However its better than nothing