Why is my SVG loaded via javascript blank?

Question

I am trying to load a svg via javascript. All I am getting is a blank screen, if I inspect it I see the code, but the svg is not rendering out. If you paste the link into the browser you can see the image. Any help is appreciated.

Thanks

var ajax = new XMLHttpRequest();
  ajax.open("GET", "https://edit.meridianapps.com/api/floors/5649391675244544.svg?namespace=4906933713108992_1&hash=8f1c6699ad05ff6ca0ba9414884546b1&style=6711e01fe4271fa2fd1f299eff4296da&default_style=original", true);
  ajax.send();
  ajax.onload = function(e) {
    var div = document.getElementById("svgContainer");
    div.innerHTML = ajax.responseText;
  
  }

<div id="svgContainer"></div>

you should use **Tag** for ajax to let us know that you are using ajax — Zeeshan Ahmad Khalil, Mar 08 '19 at 15:36
Try this: `div.innerHTML = ajax.responseText.replace(/ns0:/g,"")` — enxaneta, Mar 08 '19 at 16:00
Thank You, your solution worked @enxaneta. What is the reason behind that replace? — baskin, Mar 08 '19 at 16:12
Every tag in the svg element is prefixed with a namespace `ns0` While that works for XML, this won't work in HTML. Since the `ajax.responseText` is a string, I remove the namespace from every label, so that it works in HTML — enxaneta, Mar 08 '19 at 16:34

score 1 · Accepted Answer · answered Mar 08 '19 at 16:10

1

As told by enxaneta in the comment div.innerHTML =ajax.responseText.replace(/ns0:/g,"") solves the problem as follows;

var ajax = new XMLHttpRequest();
  ajax.open("GET", "https://edit.meridianapps.com/api/floors/5649391675244544.svg?namespace=4906933713108992_1&hash=8f1c6699ad05ff6ca0ba9414884546b1&style=6711e01fe4271fa2fd1f299eff4296da&default_style=original", true);
  ajax.send();
  ajax.onload = function(e) {
    var div = document.getElementById("svgContainer");
    div.innerHTML = ajax.responseText.replace(/ns0:/g,"");
  
  }

<div id="svgContainer"></div>

answered Mar 08 '19 at 16:10

Zeeshan Ahmad Khalil

793
1
12
29

Thanks, care to elaborate more as to what is going on and why? – baskin Mar 08 '19 at 16:13
While this answer identifies the problem, manipulating the SVG source with string replacements is error prone and should be avoided. – snwflk Mar 08 '19 at 16:43
`replace()` is js function which is finding `ns0: ` substrings in the response text.and replacing it with `""` To make proper `HTML` tags – Zeeshan Ahmad Khalil Mar 08 '19 at 16:45

score 0 · Answer 2 · edited Mar 08 '19 at 18:53

Check your CSS file for the id 'svgContainer' whether you had given some style or not. Your issue more or less seems like a styling issue.

The issue is you need to first import the document i.e the responseXML is in another DOM document. To insert into your document you need to use document.importNode

For more clarification, you can follow this answer.

var ajax = new XMLHttpRequest();
        ajax.open("GET", "https://edit.meridianapps.com/api/floors/5649391675244544.svg?namespace=4906933713108992_1&hash=8f1c6699ad05ff6ca0ba9414884546b1&style=6711e01fe4271fa2fd1f299eff4296da&default_style=original", true);
        ajax.onload = function() {
            var svg = ajax.responseXML.documentElement;
            var div = document.getElementById("svgContainer");
            svg = document.importNode(svg, true); // tried and tested in Chrome only . Need to check for other browsers
            div.appendChild(svg);
        };
        ajax.send();

I dont think so, here is a fiddle with no css at all. https://jsfiddle.net/0tqo63xL/ — baskin, Mar 08 '19 at 15:56

snwflk · Answer 3 · 2019-03-08T16:28:07.817

This issue seems to be unrelated to the Ajax call. Your code works with another image URL.

The problem appears to be with the SVG in question. Including it via an img tag works fine. Direct inclusion of the SVG markup inside the HTML shows the same problem as you described.

Chrome and Firefox both display the large viewbox, but do not render any image contents.

The SVG in question prefixes all SVG tags with the namespace prefix ns0. As a commenter suggested, removing this prefix from all tags is successful - Chrome and Firefox display the image.

However, a simple text replacement as suggested is a weak solution: if the prefix changes (it's an arbitrary string set by the creator of the SVG), the image will again not be displayed. Furthermore, the text replacement may remove occurrences of ns0 in the image source that are not a namespace prefix, possibly breaking the image or altering its contents.

While I could not find an answer to the canonical way to go about inlining this kind of SVG files, I'd recommend using an image tag and setting the source to the URL.

<img id="svgContainer">

var img = document.getElementById("svgContainer");
img.src = "https://example.com/image.svg";

Right, so what is the problem with the svg? Why does it load in an img tag and not load when inserting the text via js? — baskin, Mar 08 '19 at 16:09
I updated the answer to address the underlying issue and a potential solution. — snwflk, Mar 08 '19 at 16:36

Why is my SVG loaded via javascript blank?

3 Answers3