HTML5キャンバスをSVGに変換する方法は？

Question

編集のためにHTML5キャンバスをSVGに変換する必要がありますか？ ポインタが

Answer 1

キャンバス、SVGはあなたが2D http://code.google.com/p/canvas-svg/ を保存することができますあなたはhttp://code.google.com/p/canvg/

Answer 2

も参照http://code.google.com/p/html5-canvas-svg/

Fabric.js「キャンバス・ツー・SVG」パーサを持つアドバタイズcanvgと逆の操作を行うことができます理解されるであろう、それは明らかにconverts canvas to SVGのデモを持っています。コントロールを使用して「SVGにキャンバスをラスタライズする」と他の項目は機能しますが、デフォルトのイメージを変換する際に問題があります。実際には生のキャンバスをSVGに変換できるかどうか、エディタを使用してアイテムを作成する場合

Answer 3

お試しcanvas2svg.js [Demo]

私はこれを必要とし、このためにライブラリを作成しました。当時、他のライブラリは少し疎であったか、有効なSVGを生成しなかった。

基本的な考え方は同じです。モックキャンバスの2Dコンテキストを作成し、キャンバスの描画コマンドを呼び出すときにSVGシーングラフを生成します。基本的に同じ描画機能を再利用することができます。どのコンテキストに渡すかによって、標準の2Dキャンバスに描画するか、シリアル化できるSVGドキュメントを生成します。

描画されたキャンバス要素を実際には「変換」できません。ちょうどビットマップなので、そのことを念頭に置いてください。 SVGにエクスポートするときに、偽のコンテキストを使用して同じ描画関数を呼び出すだけです。

はそう簡単な例として：

//create a canvas2svg mock context 
var myMockContext = new C2S(500,500); //pass in your desired SVG document width/height 

var draw = function(ctx) { 
    //do your normal drawing 
    ctx.fillRect(0,0,200,200); 
    //etc... 
} 

draw(myMockContext); 
myMockContext.getSerializedSvg(); //returns the serialized SVG document 
myMockContext.getSvg(); //inline svg 

Answer 4

は、私はキャンバスがすでにこのメソッドのSVGを描画しなければならないと思うが、私は自分自身をダウンロードSVGボタンを作成しようとする過程でそれを見つけ、また走りました同じ検索でこのスタックオーバーフローの問題に該当する可能性があると考えました。

ライン200ish周り https://bramp.github.io/js-sequence-diagrams/

から

、彼は将来

エディタでサイトを編集することができます知っているだけのdiv要素であり、このノイズの目的のために、彼はただのものの梱包ですsvgはダウンロードしたsvgに生成されました。

diagram_divは、実際のSVGが中に座っているキャンバスです。ライブラリの

function(ev) { 
    var svg = diagram_div.find('svg')[0]; 
    var width = parseInt(svg.width.baseVal.value); 
    var height = parseInt(svg.height.baseVal.value); 
    var data = editor.getValue(); 
    var xml = '<?xml version="1.0" encoding="utf-8" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN" "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd"><svg xmlns="http://www.w3.org/2000/svg" width="' + width + '" height="' + height + '" xmlns:xlink="http://www.w3.org/1999/xlink"><source><![CDATA[' + data + ']]></source>' + svg.innerHTML + '</svg>'; 

    var a = $(this); 
    a.attr("download", "diagram.svg"); // TODO I could put title here 
    a.attr("href", "data:image/svg+xml," + encodeURIComponent(xml)); 
}