I'm trying to add an image to an SVG file.. I tried this code::

drawImage : function(src, x, y, h, w) {
        var img = document.createElementNS("", "image");
        var $img = $(img);
        $img.attr('x', x);
        $img.attr('y', y);
        $img.attr('width', w);
        $img.attr('height', h);
        $img.attr('xlink:href', src);
        $('g').append($img);
    }

but the image does not appear. when I select all images.. using $('image') I find the image, and I can select it, but still.. it is not visible. I tried to investigate this issue, but found nothing. what am I doing wrong??

I'm trying to add an image to an SVG file.. I tried this code::

drawImage : function(src, x, y, h, w) {
        var img = document.createElementNS("http://www.w3/2000/svg", "image");
        var $img = $(img);
        $img.attr('x', x);
        $img.attr('y', y);
        $img.attr('width', w);
        $img.attr('height', h);
        $img.attr('xlink:href', src);
        $('g').append($img);
    }

but the image does not appear. when I select all images.. using $('image') I find the image, and I can select it, but still.. it is not visible. I tried to investigate this issue, but found nothing. what am I doing wrong??

• javascript
• jquery
• image
• svg

3 Answers 3

You can use the setAttributeNS method:

var img = document.createElementNS('http://www.w3/2000/svg','image');
img.setAttributeNS(null,'height','200');
img.setAttributeNS(null,'width','200');
img.setAttributeNS(null,'id','theID');
img.setAttributeNS('http://www.w3/1999/xlink','href','src');
img.setAttributeNS(null,'x','0');
img.setAttributeNS(null,'y','0');
$('#g').append(img);

How about assigning a width and height to $('g'), which is holding the $img in your code?

I found a jQuery plugin that solved my problem jQuery.svg

it has several methods to draw different shapes, including images.

It seems that it adds images by creating a dom node using native JavaScript.. and it works