概要
snap.svgなどjavascriptのライブラリを使用すると、svgタグを使用してお絵描きできる。svgタグを使用して描いた絵をsvgファイルとして保存する方法を説明する。
svgタグを利用して絵を描く
今回はsnap.svgを使用した例を紹介する。
↓のコードをhtmlファイルとして保存して、ブラウザで開くと黒い丸が表示される。
<!DOCTYPE html>
<html>
<head>
<title>Draw svg</title>
<script src="./dist/snap.svg-min.js"></script>
</head>
<body>
<svg id="figure" width="600px" height="600px"><pattern id="pattern"></pattern></svg>
<script>
function draw(){
var s = Snap("#figure");
var bigCircle = s.circle(150, 150, 100);
}
window.onload = function (){
draw();
}
</script>
</body>
</html>svgタグをファイルとして保存する
<!DOCTYPE html>
<html>
<head>
<title>Draw svg</title>
<script src="./dist/snap.svg-min.js"></script>
</head>
<body>
<svg id="figure" width="600px" height="600px"><pattern id="pattern"></pattern></svg>
<a download="sample.svg" id='link' onclick="save()">ダウンロード</a>
<script>
function draw(){
var s = Snap("#figure");
var bigCircle = s.circle(150, 150, 100);
}
window.onload = function (){
draw();
}
function save(){
var svg = document.getElementById("figure");
var serializer = new XMLSerializer();
var source = serializer.serializeToString(svg);
var url = "data:image/svg+xml;charset=utf-8,"+encodeURIComponent(source);
document.getElementById("link").href = url;
}
</script>
</body>
</html>ダウンロードボタンを押すとsvgファイルがダウンロードされる。
参考
- javascript – How do I save/export an SVG file after creating an SVG with D3.js (IE, safari and chrome)? – Stack Overflow
- Snap.svg – Home
Comments