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を使っています。嫌いな人すいません。