CODEWITHSUNDEEP
javascriptgoogle-chromesvgd3.js
user1528760
user1528760

Reputation: 167

Display an svg image on Google Chrome

I encounter a problem when I want to display an SVG image with the library D3.js on Google Chrome.

Below is the code:

var svg = d3.select("body").append("embed");

svg.attr("src","img/drawing.svg").attr("type","image/svg+xml");

This code works on Firefox, but not on Google Chrome (same problem if I use object instead of embed).

But if I add this style to my SVG picture : attr("style", "display:block"), my picture displays on Google Chrome.

...Can someone explain me what happens? Because it's pretty ugly to display my image like that.

Upvotes: 2

Views: 1779

Answers (1)

Rafael
Rafael

Reputation: 454

According to w3schools, the embed tag is "deprecated in HTML4 and XHTML (but allowed in HTML5)". You should use the object tag. The following snippet works in my Chrome:

var svg = d3.select("body").append("object");

svg.attr("data", "http://upload.wikimedia.org/wikipedia/commons/6/6b/Bitmap_VS_SVG.svg")
   .attr("type","image/svg+xml");

Upvotes: 2

Related Questions