Программное создание элемента изображения SVG с помощью javascript

Как сказано в моем заголовке, я пытаюсь программно создать элемент изображения SVG на странице HTML с помощью javascript. По какой-то причине мой базовый код javascript не работает, однако, если я использую библиотеку raphaeljs, она работает нормально. Итак, очевидно, что проблема с моим js - я просто не могу понять, что это такое.

(примечание: целевой браузер - FF4 +)

Вот базовая страница с html-версией того, что я ' м пытаюсь достичь вершины:

А вот мой javascript:

var paper = Raphael(document.getElementById("testP1"), 200, 200);
paper.image("http://i.imgur.com/LQIsf.jpg", 0,0, 100, 100);



var svg = document.createElementNS('http://www.w3.org/2000/svg','svg');
svg.setAttributeNS('http://www.w3.org/2000/svg','xlink','http://www.w3.org/1999/xlink');
svg.setAttributeNS('http://www.w3.org/2000/svg','height','200');
svg.setAttributeNS('http://www.w3.org/2000/svg','width','200');
svg.setAttributeNS('http://www.w3.org/2000/svg','id','test2');

var svgimg = document.createElementNS('http://www.w3.org/2000/svg','image');
svgimg.setAttributeNS('http://www.w3.org/2000/svg','height','100');
svgimg.setAttributeNS('http://www.w3.org/2000/svg','width','100');
svgimg.setAttributeNS('http://www.w3.org/2000/svg','id','testimg2');
svgimg.setAttributeNS('http://www.w3.org/1999/xlink','href','http://i.imgur.com/LQIsf.jpg');
svgimg.setAttributeNS('http://www.w3.org/2000/svg','x','0');
svgimg.setAttributeNS('http://www.w3.org/2000/svg','y','0');

svg.appendChild(svgimg);

document.querySelector('#testP2').appendChild(svg);    

Живой пример: http://jsfiddle.net/Yansky/UVFBj/5/