CANVASの画像をSVGに変換してダウンロード

CANVAS 上に絵を書いているのですが、その絵を SVG に変換して、ダウンロードする機能を実装したいと思います。CANVAS に書く画像は簡単なもので線を引くだけです。その座標のデータ等も配列としてあるので、SVG の中身はプログラミングで文字列としてつくります。下記のサイトなどを参考にして考えてみました。

Data URIでSVGを指定する

SVG をダウンロードさせる方法ですが、ページ上に SVG を小さく表示しておいて、右クリックで「名前をつけて画像を保存」をしてもらおうと思います。

内容が SVG となっている文字列(tmpStr)を、id が my-svg である img 要素の src として設定してみました。

var tmpStr = '<?xml version="1.0" encoding="utf-8" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"  "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg width="120" height="120" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><line x1="10" y1="20" x2="100" y2="80" style="stroke:skyblue; " stroke-width="10" stroke-linecap="round" /></svg>';


tmpStr = "data:image/svg+xml," + encodeURIComponent(tmpStr);

$('#my-svg').attr("src",tmpStr);

これは表示されます。後は文字列を組み立てるだけです。

tmpStr の文字列の中に，強烈に危なそうな文字が並んでいます。でもとくに修正を加えることなく文字列として設定できたような…