Is there a neat way to extract all elements from an SVG doc and place them in a html text box?

Question

I am trying to give the user an ability to manually edit an SVG document.

Is there a strait forward way to use DOM to extract all the elements from an SVG document and place it in a text box? I tried to use innerHTML but that didn't work (not available for SVG).

Is there a method within JavaScript to extract all SVG elements from an embedded SVG document and store them as a string? I don't want to use jQuery or plugin if I can avoid it..

Sorry for my wording, my english is very poor.

Have a look here: http://stackoverflow.com/questions/2753732/how-to-access-svg-elements-with-javascript — SeeSharp, Mar 22 '13 at 10:59

score 0 · Accepted Answer · answered Mar 25 '13 at 16:30

You can use XMLSerializer to do this.

var str = new XMLSerializer().serializeToString(svgDocument);

If you have an <object> tag that references the svg, your svgDocument variable should be set to something like yourObjectElm.contentDocument. If the svg is inline in the html, then you can pass the element(s) instead of the document.

Is there a neat way to extract all elements from an SVG doc and place them in a html text box?

1 Answers1