読者です 読者をやめる 読者になる 読者になる

SVGをテンプレートとして使う

スポンサーリンク

SVGJavaScriptで操作できるので、テンプレートとしてSVGを用意しておいて(デザイン自体はInkscapeとか使って)、JavaScriptで後から編集ってのは、わりと使い道がありそうな気がします。
あとは、File API使って、BlobのURLを作成すれば、クライアントサイドだけで、編集→編集後のSVGを出力ってのも出来ます。

SVGをDOMで操作して

var svg = displayElement.getElementsByTagName('svg')[0];

svg.getElementById('nameField').textContent = inputNameElement.value;
svg.getElementById('telField').textContent = inputTelElement.value;

そのSVGをFile API使ってBlob URLへ

var BlobBuilder = 
        window.BlobBuilder || window.MozBlobBuilder || window.WebKitBlobBuilder;

var URL = window.URL || window.webkitURL;

var blobBuilder = new BlobBuilder();
blobBuilder.append(displayElement.innerHTML);
var blob = blobBuilder.getBlob('image/svg+xml');
//var blob = blobBuilder.getBlob('application/octet-stream');

var blobUrl = URL.createObjectURL(blob);

window.open(blobUrl, '_blank');

BlobBuilder#getBlob で指定するcontentTypeを'application/octet-stream'としてあげれば、ダウンロードダイアログ出せますが、ちょっと無理やりな感じに。(当然拡張子はsvgとはならない)