お昼ごはんを食べながら「ブラウザで表示したSVGを画像にしてダウンロードしたい」というのは需要がありそうだなと思ったので調べました。
やはりstackoverflowにありました。ありがたいですね。
これをコピペして少しいじって試しました（Chromeで確認）
Demo: https://jsfiddle.net/r208on37/1/
画像をBlob URLで扱うついでに、1アクション挟んで「別タブ表示」「imgタグ」「ダウンロードリンクの生成」もできるか試しました。
仕組み
仕組みは大したことはやっていなくて、Blob URLとcanvas便利ですね、という感じです。
- DOM上のSVGをXMLSerializerでSVGタグのテキストとして取り出す
- SVGタグのテキストからBlob URLを生成
- Blob URLをimgタグに読み込ませる（モダンブラウザはSVGをimgタグで扱える）
- imgタグをcanvasに描画
- canvasからBlobを得る
- BLOBからBLOB URLを作り、よしなにする
なので、canvasで扱うタイミングでコピーライトを書き込んだり、いろいろできそうです。
反省
XMLSerializerを通していますが、ここはSVGの親タグからinnerHTMLでもいい気がします（svgタグ１つのみであれば）。
ページの使い方によりますが、revokeObjectURLはもう少しちゃんとしたほうがいいかもしれません。
「ダウンロードリンクの生成」はそもそも「最初から勝手に生成して表示してほしい」気はしますが、hrefはあらかじめ作る必要があるっぽいので動的に変化するSVGなどの場合は難しいかもしれません。もしかしたらclickイベントを拾ったタイミングで、Blob URLと<a>タグ生成してclickすればできる気がしますが、秋田ので試してないです。
あと、ここまで書いて思ったんですが、SVGのままで良い場合はわざわざ画像にする必要はなくimgやcanvasを経由せずに済むので、大幅な短縮ができるでしょう。チャートに書いておきます。
お昼ごはんは冷めました。