CODEWITHSUNDEEP
javascripthtmlajaxsvg
baskin
baskin

Reputation: 139

Why is my SVG loaded via javascript blank?

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>

Upvotes: 2

Views: 1817

Answers (3)

smkskr
smkskr

Reputation: 11

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();

Upvotes: 0

snwflk
snwflk

Reputation: 3527

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";

Upvotes: 0

Zeeshan Ahmad Khalil
Zeeshan Ahmad Khalil

Reputation: 861

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>

Upvotes: 1

Related Questions