web-dev-qa-db-ja.com

SVGファイルをHTML5のキャンバスに変換する方法は？

SVGファイルをHTML5のキャンバス互換コマンドに変換する方法はありますか？

htmlsvgcanvas
15
Gabriel A. Zorrilla

100％の解決策はありませんが、svgのサブセットをcanvasに変換できるスクリプトライブラリがあります（例： http://code.google.com/p/canvas-svg/ ）。 svgパスデータ文字列をキャンバスに描画できる実験的な Path2D APIもありますが、ブラウザ間でどれだけサポートされているかはわかりません。

5
Erik Dahlström

canvg より良い解決策のようです。 2012年1月現在活発なプロジェクトです。

canvas-svg 2009年6月に公開されて以来、更新されていません。

18
schellmax

SVGファイルからCanvasjavascriptを静的に生成したいだけの場合は、Javaプロジェクト SVGToCanvas をお勧めします。

5
emerix

Inkscapeの現在のバージョンは、「名前を付けて保存：HTML5キャンバス」をサポートしています。

https://inkscape.org/en/

次のようなコードが生成されます。

<!DOCTYPE html>
<html>
<head>
    <title>Inkscape Output</title>
</head>
<body>
    <canvas id='canvas' width='200' height='200'></canvas>
    <script>
    var ctx = document.getElementById("canvas").getContext("2d");

// #layer1

// #rect3336
    ctx.beginPath();
    ctx.lineJoin = 'miter';
    ctx.lineCap = 'butt';
    ctx.lineWidth = 1.000000;
    ctx.fillStyle = 'rgb(30, 144, 255)';
    ctx.rect(0.000000, 88, 64.000000, 64.000000);
    ctx.fill();

// #path4138
    ctx.beginPath();
    ctx.strokeStyle = 'rgb(255, 255, 255)';
    ctx.lineWidth = 1.494353;
    ctx.arc(32.000000, 120, 29.252823, 0.000000, 6.28318531, 1);
    ctx.stroke();

    </script>
</body>
5
Kamil

これを試して：

http://www.professorcloud.com/svg-to-canvas/

2
Professor Cloud

これが私の試みです！

http://appsynergy.net/projects/converting-svg-path-to-html5-canvas/

0
Adam

変換後にオブジェクトを操作したい場合は、 http://www.kineticjs.com/ SVGパスデータ形式もサポートしていることをお勧めします。例： http://www.html5canvastutorials.com/kineticjs/html5-canvas-kineticjs-path-tutorial/ 。

Svgをループして、長方形、パス、線などを対応するkineticJS（キャンバス）オブジェクトに変更するのは非常に簡単です。

0
Pawel Dubiel