SVGはJavaScriptで操作できるので、テンプレートとして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;
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とはならない)