Programmatically creating an SVG image element with javascript

Question

Like my title says, I\'m trying to programmatically creating an SVG image element in a HTML page using javascript. For some reason my basic javascript code isn\'t working, h

Answer 1

SVG native attributes (not including xlink:href) do not share the SVG namespace; you can either use just setAttribute instead of setAttributeNS, or use

svgimg.setAttributeNS(null,'x','0');

for example.

Here it is, working: http://jsfiddle.net/UVFBj/8/

Note that I changed your fiddle to properly use XHTML, so that SVG works nicely within it in all major browsers.

Answer 2

For futher reference.

I've been using the function bellow to create SVG elements and it was failing to create images because of xlink:href must be created using setAtributeNS.

The code bellow is corrected to do that (create any svg element on the fly)

function makeSVG(parent, tag, attrs) {
            var el= document.createElementNS('http://www.w3.org/2000/svg', tag);
            for (var k in attrs){
                if(k=="xlink:href"){
                    el.setAttributeNS('http://www.w3.org/1999/xlink', 'href', attrs[k]);
                }else{
                    el.setAttribute(k, attrs[k]);
                }
            }
        }

Sample usage:

makeSVG('#map-tiles', 'image', { class:'map-tile', 'xlink:href':'map/xxx.jpg', width:'512px', height: '512px' x:'0', y:'0'});

The parent is used to organize 'layers' on svg groups tag.