Load src content to SVG image dynamically

Question

I have a SVG rendered in the browser. I would like to change its content dynamically as attempted on http://jsfiddle.net/dt1510/pXA9P/1/ . In console.debug the

Answer 1

1. As you've seen, SVG <image> elements use an href attribute to source their content. Setting a src attribute (as with HTML's <img> elements) will not work.

2. The href attribute is in the XLink namespace. Even though you never declared the namespace prefix, that's what it is, and so you need to set it as such.

You can do this either via jQuery demo: http://jsfiddle.net/pXA9P/4/:

$("image").attr('xlink:href',srcAirline);

Or standard DOM demo: http://jsfiddle.net/pXA9P/5/:

document.querySelector('image')
  .setAttributeNS('http://www.w3.org/1999/xlink','href',srcAirline);

Answer 2

If you are using D3 library then you can use following to load svg image dynamically.

d3.select("body") //select body in html
.append("svg")  //add svg element in body tag
.append("image")  // add image tag in svg element
.attr('xlink:href',"image.svg") //set href property of image element..
.attr("width",50) //set width of image
.attr("height",50) //set height of image

This can be very useful for those who are using D3 library.