image tag is not loading inside the svg

[dnskmr]

Hi Admin,

Image tag is not loading inside the svg ,am using HTMLINNodes to create the custom label in that i wanna load the windows.png,but it is not getting loaded.Kindly share your solution.

var svg = '<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"  width="200" height="225">' +
            '<rect x="0" y="0" width="100%" height="100%" fill="#7890A7" stroke-width="20" stroke="#7890A7" ></rect>' +
            '<foreignObject x="15" y="10" width="100%" height="100%">' +
            '<div xmlns="http://www.w3.org/1999/xhtml"  style="font-size:20px">' +
            ' <em>I</em> am' +
            '<span style="color:white;">' +
            ' HTML in SVG!</span>' +
            '<br></br>' +
            '<text x="0" y="15" fill="red">I love SVG!</text>' +
            '<br></br>' +
            '<text x="0" y="15" fill="red">I love SVG!</text>' +
            '<br></br>' +
            '<image xlink:href="../windows.png" x="0" y="0" height="50px" width="50px"/>' +
            '<br></br>' +
            '</div>' +
            '</foreignObject>' +
            '</svg>';

[wimrijnders]

With respect to Network, this is a bit meta because SVG's are treated as images within the module. So from the module's perspective, you're trying to load an image within an image.

I don't think there's much chance of this succeeding, but I'll have a look regardless to see if this can be made to work.

[dnskmr]

Thanks for your reply,Is there any possibilities to load the icons inside the svg/do we have any css changes to load the image inside the svg?

[wimrijnders]

I noticed that the image is not displaying, even if I put it in a web page in the regular manner.

This is your svg converted from the javascript:

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"  width="200" height="225">
<rect x="0" y="0" width="100%" height="100%" fill="#7890A7" stroke-width="20" stroke="#7890A7" ></rect>
<foreignObject x="15" y="10" width="100%" height="100%">
<div xmlns="http://www.w3.org/1999/xhtml"  style="font-size:20px">
 <em>I</em> am
<span style="color:white;">
 HTML in SVG!</span>
<br></br>
<text x="0" y="15" fill="red">I love SVG!</text>
<br></br>
<text x="0" y="15" fill="red">I love SVG!</text>
<br></br>
<image xlink:href="../windows.png" x="0" y="0" height="50px" width="50px"/>
<br></br>
</div>
</foreignObject>
</svg>

It works much better if the content of the foreign object is put directly in the main svg:

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"  width="200" height="225">
<rect x="0" y="0" width="100%" height="100%" fill="#7890A7" stroke-width="20" stroke="#7890A7" ></rect>
 <em>I</em> am
<span style="color:white;">
 HTML in SVG!</span>
<br></br>
<text x="0" y="15" fill="red">I love SVG!</text>
<br></br>
<text x="0" y="15" fill="red">I love SVG!</text>
<br></br>
<image xlink:href="../windows.png" x="0" y="0" height="50px" width="50px"/>
<br></br>
</svg>

(Also note the duplicate 'I love SVG!')

I'm not so well-versed with SVG, but I get the impression that the svg was not correct in the first place.

---

Edit: Toned down language.

[wimrijnders]

Thanks for your reply,Is there any possibilities to load the icons inside the svg/do we have any css changes to load the image inside the svg?

No, not an option at all. However, please consider the following, which I just typed into #3176:

---

As an alternative to actually drawing an svg image on the canvas, I hereby propose to overlay it as a DOM object over the network view.

The basics are discussed in #3300 and it works surprisingly well for HTML. It should work for a displayed svg as well. A great consequence of this is that the overlaid elements can be made to be interactive. Specifically for the svg, it all works as you would expect.

There are issues to be looked at, however. E.g. something needs to be done for zooming the overlaid elements (you can of course just disable zoom). But on the whole, this is a very promising technique.

HTH.

[dnskmr]

However after we removed the foreignObject also we could not see the image,Kindly look into my whole javascript,

Note:I know i have duplicated the 'I Love SVG' ,I need the node with images & icons ,labels to draw the better network diagram,

Code:

<!doctype html>
<html>
<head>
    <title>Network | HTML in nodex</title>

    <style type="text/css">
        body {
            font: 10pt arial;
        }
        #mynetwork {
            width: 600px;
            height: 600px;
            border: 1px solid lightgray;
            background-color:#eeeeee;
        }

    </style>

    <script type="text/javascript" src="../../../dist/vis.js"></script>
    <link href="../../../dist/vis-network.min.css" rel="stylesheet" type="text/css" />

    <script type="text/javascript">
        var nodes = null;
        var edges = null;
        var network = null;

        var DIR = 'img/refresh-cl/';
        var LENGTH_MAIN = 150;
        var LENGTH_SUB = 50;

       
        var svg = '<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"  width="200" height="225">' +
            '<rect x="0" y="0" width="100%" height="100%" fill="#7890A7" stroke-width="20" stroke="#7890A7" ></rect>' +
            ' <em>I</em> am' +
            '<span style="color:white;">' +
            ' HTML in SVG!</span>' +
            '<br></br>' +
            '<text x="0" y="15" fill="red">I love SVG!</text>' +
            '<br></br>' +
            '<img xlink:href="../windows.png" x="0" y="0" height="50px" width="50px"/>' +
            '<br></br>' +
            '</svg>';


        var url = "data:image/svg+xml;charset=utf-8,"+ encodeURIComponent(svg);

        // Called when the Visualization API is loaded.
        function draw() {
       
        try{
        // Create a data table with nodes.
            nodes = [];

            // Create a data table with links.
            edges = [];

            nodes.push({id: 1, label: 'Get HTML', image: url, shape: 'image'});
            nodes.push({id: 2, label: 'Using SVG', image: url, shape: 'image'});
            edges.push({from: 1, to: 2, length: 300});

            // create a network
            var container = document.getElementById('mynetwork');
            var data = {
                nodes: nodes,
                edges: edges
            };
            var options = {
                physics: {stabilization: false},
                edges: {smooth: false}
            };
            network = new vis.Network(container, data, options);
        }catch(err){
        alert(err);
        }
            
        }
    </script>
    
</head>

<body onload="draw()">
<p>
    This example demonstrates showing custom HTML in Nodes, by using an SVG image.
</p>
<p style="color: red;">
    WARNING: this is currently not supported by all browsers.
</p>
<div id="mynetwork"></div>
</body>
</html>

Thanks in advance.

[dnskmr]

@wimrijnders ,

I want to create the network diagram like below attached image or something better,

[wimrijnders]

However after we removed the foreignObject also we could not see the image,Kindly look into my whole javascript

That's because this approach does not work. Using an SVG with an embedded image for an image node will not display the embedded images. This is not a vis.js problem, it's simply not possible to do this with a canvas element. See also my previous comment.

[wimrijnders]

You might want to take a look at #3293 to get some ideas on how to do that layout. The issue discusses how to draw borders around multiple nodes.

[wimrijnders]

Does this answer your question? If so, please close the issue.

[wimrijnders]

This issue has been labeled Inactive, because there has been no activity here for two months.

You can:

• Close the issue yourself, so that we know we don't need to take it into account (thanks!).
• Post a new comment to keep it active. The Inactive label and this message will be removed.
• Ignore this comment. If the inactivity continues, the issue will be closed in two weeks.

[binDongKim]

I think I've made some sort of a workaround for this like following:

const img = new Image();

img.src = `../windows.png`;
fromEvent(img, 'load').pipe(
    map((e: Event) => {
        const canvas = document.createElement('canvas');

        canvas.getContext('2d').drawImage(e.target as HTMLImageElement, 0, 0);
        const dataURL = canvas.toDataURL();
        const svg = `<svg xmlns="http://www.w3.org/2000/svg" width="200" height="225" xmlns:xlink="http://www.w3.org/1999/xlink">` +
            `<image xlink:href="${dataURL}" x="0" y="0" height="50" width="50" />` +
            `</svg>`;
        const url = 'data:image/svg+xml;charset=utf-8,' +  encodeURIComponent(svg);

        return url;
    });
).subscribe((url) => {
  // make nodes with it
});

I needed this technique in my project, which is Angular based so I used rxjs and it works well. In my case, I used other operators such as mergeMap, scan and filter to make it work perfectly but I made it simpler above to show the core concepts.

[amorigoye]

Hi please is there any way I can view text on nodes of visjs network as pop up or click on the nodes will reveal some html text apart from the label. Thank you