In a webpage i have loaded an SVG file in to a div, looking something like this:

<svg id="svg" width="500px" height="500px">
    <g id="1">
        <rect id="0" x="50" y="25" width="50px" height="50px" style="fill:blue;"/>
        <rect id="2" x="110" y="125" width="50px" height="50px" style="fill:blue;"/>
    </g>
    <g id="2">
        <circle id="2" cx="150" cy="50" r="40"  stroke-width="4"  />
        <polygon id="3" points="200,10 250,190 160,210" style="stroke-width:1" />
    </g>
</svg>

Then with some loops i put each node into an array, that looks something like this:

array[<g id="1"></g>,<rect id="0" x="50" y="25" width="50px" height="50px" style="fill:blue;"/>, <rect id="2" x="110" y="125" width="50px" height="50px" style="fill:blue;"/>, <g id="2"><circle id="2" cx="150" cy="50" r="40"  stroke-width="4"/>,<polygon id="3" points="200,10 250,190 160,210" style="stroke-width:1" />]

the problem here is that is stores them as objects, i would like it to be stored as a string, i have tried things like JSON.stringify on any of the objects but no luck so far. I am using javascript and jQuery

In a webpage i have loaded an SVG file in to a div, looking something like this:

<svg id="svg" width="500px" height="500px">
    <g id="1">
        <rect id="0" x="50" y="25" width="50px" height="50px" style="fill:blue;"/>
        <rect id="2" x="110" y="125" width="50px" height="50px" style="fill:blue;"/>
    </g>
    <g id="2">
        <circle id="2" cx="150" cy="50" r="40"  stroke-width="4"  />
        <polygon id="3" points="200,10 250,190 160,210" style="stroke-width:1" />
    </g>
</svg>

Then with some loops i put each node into an array, that looks something like this:

array[<g id="1"></g>,<rect id="0" x="50" y="25" width="50px" height="50px" style="fill:blue;"/>, <rect id="2" x="110" y="125" width="50px" height="50px" style="fill:blue;"/>, <g id="2"><circle id="2" cx="150" cy="50" r="40"  stroke-width="4"/>,<polygon id="3" points="200,10 250,190 160,210" style="stroke-width:1" />]

the problem here is that is stores them as objects, i would like it to be stored as a string, i have tried things like JSON.stringify on any of the objects but no luck so far. I am using javascript and jQuery

• javascript
• jquery
• svg

• Why don't you just put them into a string instead of an array? var str += newStuff – StudioTime Commented Mar 17, 2016 at 7:59
• 1 Please share the code that is creating the array. – Milind Anantwar Commented Mar 17, 2016 at 8:01
• You can try Array.join(delimeter) – Rajesh Commented Mar 17, 2016 at 8:03

2 Answers 2

You can use outerHTML of HtmlElement:

var arr = $.map($('svg *'), function(v){ return v.outerHTML; });

Example: https://jsbin./qijicibime/edit?html,js,output

Gene is right. Why not using outerHTML? Here is a solution in vanilla JavaScript (i.e. without jQuery):

var nodesHTML = [].slice.call( document.querySelectorAll("svg *") ).map(
    function( node ) { return node.outerHTML; });