Menu
I've searched for an answer all over but I can't find a way to convert a SVGSVGElement to a string. I'm using Chrome(22). I apologize if this has been answered before but I wasn't able to find it (here or on Google).
I have an SVG (XML) image embedded in an HTML page and am manipulating the SVG with Javascript (adding/removing shapes, etc). My goal is to take the modified SVG XML image in memory and save it to a file (by posting to a php form). The post and php form are working, but the issue I'm currently having is that I can't get the string representation of the modified SVG image.
I've posted a simplified page below where I'm just trying to get the raw XML from the loaded SVG and paste it into the textarea. If you test the html below you'll see that the textarea just contains the string: "[object SVGSVGElement]".
I can access each element in the SVG with Javascript and manipulate the elements and attributes, but I can't seem to just get the whole thing into a string. I've tried JQuery and JQuery SVG but wasn't able to get it working. console.log() is able to show the svg/xml, but it's not a string, so I can't seem to store/send it. Any assistance is greatly appreciated!
I would even settle for a way to convert any SVG*Element object to a string as I can use the .childNodes[x] property to traverse through all of them, but these are still objects and I can't seem to just get the raw XML.
Test.html:
<html>
<head>
<script type='text/javascript' src='js/jquery.js'></script>
<script>
function startup() {
svgOutput = document.getElementById("svgCanvas").getSVGDocument().documentElement;
console.log(svgOutput);
document.getElementById("output").value = svgOutput;
}
</script>
</head>
<body style="margin: 0px;" onload="startup()">
<textarea id="output"></textarea><br/>
<embed src="svg1.svg"
id="svgCanvas"
width="75%" height="75%"
type="image/svg+xml"
codebase="http://www.adobe.com/svg/viewer/install"
></embed>
</body>
</html>
svg1.svg:
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:ev="http://www.w3.org/2001/xml-events">
<image id="svgBackground" x="0px" y="0px" width="100%" height="100%" preserveAspectRatio="none" xlink:href="bg1.jpg"/>
<g id="1">
<text id="shape" x="30" y="30" font-size="16pt" fill="black" visibility="hidden">circle</text>
<text id="elementName" x="30" y="30" font-size="16pt" fill="black" visibility="hidden">Element 1</text>
<circle id="circle" cx="12%" cy="34%" r="15" opacity="1" fill="grey" stroke="darkgrey" stroke-width="5px"/>
</g>
<g id="2">
<text id="shape" x="30" y="30" font-size="16pt" fill="black" visibility="hidden">circle</text>
<text id="elementName" x="30" y="30" font-size="16pt" fill="black" visibility="hidden">Element 2</text>
<circle id="circle" cx="21%" cy="63%" r="15" opacity="1" fill="grey" stroke="darkgrey" stroke-width="5px"/>
</g>
</svg>
631
You can use XMLSerializer to convert elements to a string.
var s = new XMLSerializer();
var str = s.serializeToString(documentElement);
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
