htmlのsvgタグをファイルとして保存する

概要

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ファイルがダウンロードされる。

参考

Comments

タイトルとURLをコピーしました