vis.js library - Rendering a network of nodes with svg and custom html

Looks like with visjs it's not possible to load an external image inside an SVG, nor in <foreignObject>, neither in <Image> tag. Here is an open issue for the problem on github: Image tag is not loading inside the svg

The maintainer of the repository answered that it was not possible.

A workaround can be found in the same thread (but it may not be suitable for you): the idea is to load the image separately and render it as dataUrl

Loading the svg image and converting it to dataUrl:

 loadImage(url) { const img = new Image(); img.crossOrigin = "anonymous"; img.src = url; return Observable.fromEvent(img, 'load') .map((e: Event) => { const canvas = document.createElement('canvas'); canvas.getContext('2d').drawImage(e.target as HTMLImageElement, 0, 0); const dataURL = canvas.toDataURL(); return dataURL; }) } 

Using the acquired dataUrl as background instead of the direct svg file url:

 '<i style="background-image: url(' + dataUrl + '); display: inline-block; width: 40px; height: 20px; background-size: contain;"></i>' + 

Here is the corrected project https://stackblitz.com/edit/visjs-with-angular-m63jme (I also replaced the svg file, which was used in the original project and contained a US flag, with another arbitrary svg to avoid issues in FF, see below)

FF issues with rendering svg on canvas

Firefox has some issues with rendering an svg file on canvas, when the file contains width and height attributes specified as percentages. See the SO questions for more details: 1, 2. So be sure to use an svg with width and height attributes that are not percentages.