htmlのsvg要素内部のソースをjavascriptで取得するには

htmlに埋め込まれたsvg要素にjavascriptからアクセスした際，通常htmlのdomで提供されているinnerHTMLプロパティのような要素の中身にアクセスするためのAPIが無い事に気付いた．（というか見つけられなかった．）
これはjavascriptでdocument.getElementByIdメソッド等で得られるオブジェクトがsvgのdomに由来するからである．

この問題を解決するには一旦対象となるsvg要素をdiv要素などでくるみ，親HTML要素のもつinnerHTMLプロパティを参照すると良い．


下はjQueryを使ってsvg要素のソースをsvg画像の隣に出力するスクリプトの例である．

$(function(){
 $("svg").each(asideSvgSource);
 function asideSvgSource(){
  var div = $(this).wrap("<div>").parent();
  div.addClass("svg");
  var newElem = $("<code>");
  newElem.html(
   div[0]
    .innerHTML
    .replace(/\>\<\/.+?\>/g,"/>")//中身のない要素の書き換え
    .replace(/\n\s*?\n/g, "\n")
    .replace(/\shref\=/g, " xlink:href=")//chrome対策
    .replace(/\t/g, "&nbsp;&nbsp;&nbsp;&nbsp;")
    .replace(/\</g, "&lt;")
    .replace(/\>/g, "&gt;")
    .replace(/\n/g, "<br/>");
  div.append($("<div>").append(newElem));
 }
});

注意点

• svg要素の内部に記述されたscript要素は取得できない．
• chromeにおいてはxlink:href属性の名前空間指定部が削除されてしまう． 
• 必ずしもsvg要素の中身をそのまま取得可能というわけではない．一旦domオブジェクトに分解されたものがソースコードに再構成されている．従ってsvg要素内部に記述ミスが存在した場合，必ずしも元となるコードと同じ結果が得られるとは限らない．
  （本来svgはxmlで定義されているだけあって厳密な構文のチェックが成されるはずが，html5のsvg要素においては記述ミスがあったとしてもブラウザ側で勝手に解釈してしまうため．）