How to get tree of svg inserted to the DOM as text - text

Question

I have embeded svg that I created dynamicaly using ajax
$.ajax({
url: 'file.svg',
dataType: 'text',
success: function(svg) {
var svg = $(svg).appendTo('body');
var shape = svg.find('g#shape');
// how to get shape as text.
}
});
How can I get svg Tree for instance a group with few paths as text the same as html() work in jQuery?

Answer 1

You can use XMLSerializer to serialise a node. Something like this...
var XMLS = new XMLSerializer();
var string = XMLS.serializeToString(node);

Answer 2

Depending on your browser, it can use one of two serializer:
function xmltostring(domElem) { // Input the NODE of the DOM element
if (window.XMLSerializer) { // FF, Chrome, IE10 has an internal serializer
var XMLS = new XMLSerializer();
var xmlString = XMLS.serializeToString(domElem);
} else if (window.ActiveXObject){ // IE9 uses ActiveX
var xmlString = domElem.xml;
}
return xmlString;
}
Note: Works on Safari too. IE8 and below cannot handle SVG natively (needs plugin), untested with this function.

Answer 3

I found a way, I wrote this plugin that return the text of SVG, probably will work with any xml embeded into html DOM.
$.fn.xml = function() {
function serialize(node) {
var i;
var text = '<' + node.nodeName;
for(i = 0; i < node.attributes.length; ++i) {
text += ' ' + node.attributes[i].name + '="' +
node.attributes[i].value + '"';
}
text += '>';
if (node.childNodes.length) {
for (i = 0; i < node.childNodes.length; ++i) {
if (node.childNodes[i] instanceof Text) {
text += node.childNodes[i].wholeText
} else if (node.childNodes[i] instanceof SVGElement) {
text += serialize(node.childNodes[i]);
}
}
}
return text + '</' + node.nodeName + '>';;
}
return serialize(this[0]);
};