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

はじめに 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を設定していないと動かないので注意。（大体設定する