SVG added to DOM using javascript is not visible.

Question

I have a valid SVG file which I verified by opening it in a image viewer.

I tried adding this SVG to a HTML file using the javascript code

d3.xml("assets/abc.svg", function(xml) {
   document.body.appendChild(xml.documentElement);
});

I check the HTML source and I can see that SVG is added in the HTML. But the SVG is not visible on the page. Any idea what could be the reason?

Note :

1. D3 is working fine.
2. The SVG is valid.
3. The SVG is getting added to the DOM structure within body.'
4. Its not visible in both chrome and firefox.

Answer 1

Works OK for me in IE/FF/CH. I have valid svg, with the following in my root svg:

<svg
   xmlns:svg="http://www.w3.org/2000/svg"
   xmlns="http://www.w3.org/2000/svg"
...>

If you have that namespace, then the problem is most likely the svg is not formed correctly. Or possibly, the svg itself is not viewable ie display="none" or the viewBox is tiny

Answer 2

If your HTML is correct, open up the "Elements" panel on Chrome dev tools and check the svg's 'display' (block), 'height', 'width', 'visibility' (visible) and 'opacity' (> 0) properties. If there really is anything there to be shown by the rendering engine (visible or not), chrome will outline it in the page while you hover over the DOM node in "Elements". Also check if anything might mask/overlay the SVG nodes.

Additionaly, you can try setting a 'fill' or 'stroke' color on your svg nodes.