ajax load svg,jQuery appending to AJAX loaded SVG problem

jQuery is not really built to be aware of XML namespaces, so the string ""is likely getting parsed such that the generated DOM nodes are in the default namespace, as opposed to the SVG namespace. You can solve this by using regular DOM to create the nodes. This would look like the following:

svgns = "http://www.w3.org/2000/svg"

$("#svg").load(svgUrl + " svg", function() {

var g = document.createElementNS(svgns,"g");

g.setAttributeNS(null,'id','compass');

$("svg").append(g);

//do stuff

});

If you need to create more complex structures, then I would recommend looking at the jquery-svg library, which has a cleaner API for generating SVG DOM.

Updated

I misunderstood that you were trying to load an SVG document and append it to your host HTML document - instead, I thought you were trying to generate SVG using script. To solve your problem, I would recommend doing the following (not tested, but should work):

//get the SVG document using XMLHTTPRequest

$.get(svgUrl + " svg",

function(svgDoc){

//import contents of the svg document into this document

var importedSVGRootElement = document.importNode(svgDoc.documentElement,true);

//append the imported SVG root element to the appropriate HTML element

$("#svg").append(importedSVGRootElement);

},

"xml");