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
