Serializing SVG using innerHTML

"Dailey, David P." <[email protected]> Fri, 11 Apr 2014 09:54:20 -0400
Newsgroups gmane.text.xml.svg.devel
Message-ID <C64F09DF6833C44782B27844765560BC229CD094A6@MSFEXCH01.srunet.sruad.edu>
Hi folks,
A couple of weeks ago I was experimenting with SVG animation inline in HTML (Brian Birtles had taught me a lesson about animating transforms that I wanted to try out).

http://srufaculty.sru.edu/david.dailey/svg/svgScaleinHTML.htm

In it, out of curiosity, and wanting my students to be able to see and compare the source code of the single animateTranform with the dual approach, I tried displaying the innerHTML of the SVG. I was astonished to find that it actually worked in Chrome and Firefox.

Cameron McCormack confirmed that this method should continue to work:
http://lists.w3.org/Archives/Public/www-svg/2014Mar/0021.html

So of course, the next issue was to make sure that the innerHTML would properly reflect the SVG DOM of a dynamically changed thing (as in a web app, where a user might want to be able to save her work):

http://cs.sru.edu/~ddailey/svg/IframeSVG.htm (Chrome and Firefox, and presumably OperaNew -- don't know about i-gadgets)

It was quite weird wrestling with the creation of an iframe dynamically, that could then have a textarea in it to display the SVG source, but, heck, wasn't it access from SVG to textareas that made people invent HTML5 in the first place? Of course, it might have been simpler to just add textarea into SVG (and get browsers to implement foreignObject) and then we would not really have needed HTML at all ;) At any rate, this is a lot easier than writing the recursive code to serialize (that ASV's printNode used to give us for free).

Presumably, other browsers will catch up one day, and serializing the output of a web app is a function for which the webdeveloper might not feel too badly in saying "please use browser X until the others catch up".

cheers
David