Load src content to SVG image dynamically

Question

I have a SVG <image> 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 content is changed, however in the browser it is the same.

<svg>  
  <image x="20" y="20" width="300" height="80"
     xlink:href="http://www.erh.noaa.gov/ilm/OpenLayers/img/marker.png" />    
</svg>​

var srcAirline = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAD0AAAA9CAYAAAAeYmHpAAADD0lEQVR42u2aq3LrMBCG+0oH9hUOPK9QWFhYemBhYWhhYWBpYGBgqGGgYduv039mq65l+SY7sjXjcS62pW/1e6Vd6eZ9heVGH46nS/FHdal/Qv+5OxZ/PO+rDTpr5bf3x/fDp9wed+f1QO8Pl686689XDAMUDw2kLU+vVfnQSNqW47kuH1rStqV46HNV/4L+9/9UNrRXcnnxWaDpUa/s9lW50HdPPnQuZzYL9O670g36e5JSLLQ3XOWsfxZoZLxBZx6rFweNZy8OmsAiVjDI1BFXNmjFzikFLz5lj2eBBqC6dE/cTTVDmxy6aUxOLVPIfTJoGhpzWF3K2HKfBJoG1vX4eeqXt2qZ0EPl3FaIw/8+npYBPaacU+T+8HyeF5oG1Hl4R5H7YGgqTi2M00xOYqElBiQgSTViH7n3hqYiL8/lgZIGssNOahIBA2DUtjG+q9x7QcfkzO/0VAiakjmJTUYIRNoMQL0pY3ov6NBhCTTV2qhkyAwMA3Ctp7QUqfeClsU59500eKXPKgeQ3CcDXF0KOEdYOSu0N6avEjrXyuVs0N74XvxaVphQwDEWu5aFhJsmNUPn1IuEpidTMihTL9BnhaaHcWBMLOhRK3E8N7BMcrju6nNkbQt5gK5qSxWSz7nJZttHNgZ0alzLdepdzlfb04Aw5LRlM7SrSI4Kp8VxtT0NcNsEQ1kTQWOERe8YRIYaVpT6sdIESDCc+a7Yl4NrPWjF0ahFz+B31eGth/Ef7QiHNt2nugdDhxvewhSPTQR4eTAPWoFHakbFC1Q0i/Pq9IzWWd40jMZbA8SgsbqGJk/eHjSzNuqQn+C70lThM/lfPkHP4jolFzwn2QmaSqiQh3NoShmDDuWXAu31rL0XWeuVsW3Q/3KoTaNJJ2glAzlbmeWGjm3b4BqbtPScZDJ0KD0bE+eC1oJ+SiSm18/bppUMbTOYknjunlYb6EmgMLpdyqVdvN8YR/cNgg7lRY/bBuWAVg9a+fJZTtJmRWPxeWfvjbVzJfBi8wXa0NQOtbFpersFHBv0Bl049JrKB2+Sq02r4bQjAAAAAElFTkSuQmCC";

$('document').ready(change_image);

function change_image(){    
    var images = $("image");
    var image = images[0];        
    $(image).removeAttr("xlink:href");
    $(image).attr("src", srcAirline);
    console.debug(image);
}

I read somewhere that it might be possible with AJAX requests, however the page needs to be displayable offline. I also have the constraint, that the image content needs to be stored in a variable and cannot be saved as an external resource.

Is there any simple way to change the content of a SVG image dynamically?

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.