SVG要素を、SVGファイルとして保存、PNGファイルとして保存

はじめに

htmlのsvg要素でお絵描きした後、それをファイルとして保存したくなりました。
ダウンロードできれば、パワポとかほかの情報に転載できるので。

書き方と説明

答えは下記です。
svg要素のgetElementByIdのところと、ファイル名のとこだけ修正すれば、どこでも使えると思います。

See the Pen Untitled by yoichiro ikeda (@yo16) on CodePen.

説明

両方共の共通処理

svg要素を、htmlから文字列に変換して、それを元にBlobオブジェクトを作ります。
Blobになると、一時的にURL化できるのでそうしておきます。

SVGファイル保存

a要素を作って、hrefにBlobのURLをセットしてクリック。

PNGファイル保存

まず、htmlの<svg>にwidthとheightを設定していないと動かないので注意。（大体設定するとは思いますが）

Imageオブジェクトを作って、srcにBlobのURLを設定することでロード。

ロードが終わったら、canvas要素→contextを作ります。
contextに、ロードした画像を描く。

最後にcanvas要素をURL化して、a要素のhrefへセットし、クリック。

ちなみにPNG画像の背景は透過だけど、塗りつぶしたければ、ctx.drawImage()の前にctx.rect(0, 0, width, height)とかで四角形を描いちゃえば良い。

おわりに

よいsvgライフを！

応援お願いします！

SQLクエリから、カラムレベルのリネージを表示するツールを作っています。
SEやアナリストのSQL初心者の勉強サポートとして、また複雑なクエリの可視化によるミス防止のためになったらいいなと思っています。
※ 今回のSVGから保存する機能はここで使っています。
こんな機能あったらいいんじゃないのー？とか、使ってみたけど遅いよーとか、いろいろ教えていただけると嬉しいです！