HTML中に埋め込まれたSVGをファイル／データとして抽出する

Google Docや独自実装したGoogle Chartのグラフなど、SVGをHTML中で使うことが多くなっています。しかし、imgタグで外部にリンクしたSVGファイルはコピー、保存、画像として開く・・・等の処理ができますが、svgタグで直接埋め込まれたsvgはこうした処理ができません。そこで、svgタグをHTML5のData URI Schemeの仕様に基づいた形に変換するスクリプトを書きました。

(function($){
    $.fn.extend({
        svgToData : function(){
            var svg = this.filter('svg') || this.find('svg');
            svg.attr({
                "xmlns" : "http://www.w3.org/2000/svg",
            });
            return 'data:image/svg+xml;base64,'  + 
                btoa(svg.parent().html().replace(/[^\x00-\x7f]/g, function(x){
                        return "&#" + x.charCodeAt(0) + ";"
                }), true);
        },
    });
})(jQuery);

$('svg').each(function(){window.open($(this).svgToData())});
$('img#imagedSvg').attr('src', $('svg#bareSvg').svgToData());

処理的には、
1. xmlns属性を追加
2. 日本語の文字化け対策のため、非ASCII文字を数値参照に変換。
3. btoaでbase64エンコーディング
という流れで大したことをやってないのですが、試行錯誤に時間がかかりました。

実運用でデータを取得したいときは、上のサンプルスクリプトのように、いったんimgタグに変換するか、別ウィンドウで画像表示してから、「画像のURLをコピー」とすると楽です。「画像を保存」すればファイルにも保存できます。また、Google Docsを含めた対応ソフトウェアでは、画像をコピーしたものをはりつけることで、そのままSVG画像としてペースト可能です。

余談ですが、Redmineのコメント欄は、!URL!で任意のURLの画像を表示できます。なので、「画像のURLをコピー」して取得したSVGデータを!!で囲んでコメントに貼り付けるということをよくやっています。これを使って、独自に作ったシステムや、Google Docsのグラフをチーム内で共有しています。

最後に、jQueryを使うメリットはあまりないと思いますが、習慣なのでjQueryを使っています。嫌いな人すいません。