web-dev-qa-db-ja.com

Snap.svgとSvg.js

最新のブラウザに適したSVGライブラリを見つけようとしました。私の目標は、例えばどのライブラリがシンプルなオンラインSVGエディターを作成するのに適しているかを決めることです。テキストとパスの編集およびパス付きのテキストのクリッピング。

適切な2つのライブラリが見つかりました：Snap.svgおよびSvg.js。

SNAP.SVG

Github： https://github.com/Adobe-webplatform/Snap.svg
ソースコード行：6925 Github Stars：3445
Doc： http://snapsvg.io/docs/
はじめに： http://snapsvg.io/start/
スターターの例（ [〜＃〜] jsbin [〜＃〜] ）

var draw = Snap(800, 600);

// create image
var image = draw.image('/images/shade.jpg', 
                       0, -150, 600, 600);

// create text
var text = draw.text(0,120, 'SNAP.SVG');

text.attr({
  fontFamily: 'Source Sans Pro',
  fontSize: 120,
  textAnchor: 'left'
});

// clip image with text
image.attr('clip-path', text);

SVG.JS

Github： https://github.com/svgdotjs/svg.js
ソースコード行：3604 Github Stars：1905
Doc： https://svgdotjs.github.io/

スターターの例（ [〜＃〜] jsbin [〜＃〜] ）：

var draw = SVG('drawing');

// create image
var image = draw.image('/images/shade.jpg');
image.size(600, 600).y(-150);

// create text
var text = draw.text('SVG.JS').move(300, 0);
text.font({
  family: 'Source Sans Pro',
  size: 180,
  anchor: 'middle',
  leading: '1em'
});

// clip image with text
image.clipWith(text);

使い方はかなり似ているようです。

これら2つのライブラリの主な違いは何ですか？

javascriptsvgsnap.svgsvg.js
67
Timo Kähkönen

私は SVG.js の作成者です（だから私も偏っています:)。あなたは両方を試して、あなたに一番合っているものを見なければなりません。 SVG.jsでは、すべてのスクリプトがより動的になるように、より多くのJavaScriptベースの構文を維持しようとしますが、Snapは多くの場合文字列ベースの構文を使用します。これにより、SVG.jsで生成されたコードがより人間に読みやすくなることがよくあります。例として勾配を取りましょう。

SNAP.SVG：

var g = paper.gradient("L(0, 0, 100, 100)#000-#f00:25%-#fff");

paper.circle(50, 50, 40).attr({
  fill: g
});

SVG.JS：

var g = draw.gradient('linear', function(stop) {
  stop.at(0, '#000')
  stop.at(0.25, '#f00')
  stop.at(1, '#fff')
})

draw.circle(80).center(50,50).fill(g)

Snap.svg構文はもう少し簡潔で、SVG.jsコードは読みやすくなっています。だから、それは本当に好みの問題です。

一般的に、SVG.jsははるかにオブジェクト指向です。すべてが numbers および colors までのクラスであるため、拡張可能です。 OO構造のため、どのレベルでも プラグインの作成 および 既存のオブジェクトの拡張 が非常に簡単です。

72
wout

もともとSnapを試したのは、素敵なWebサイトと良いドキュメントのようでした。説明できなかったいくつかの問題の後、SVG.jsを試すことにしました。理由を特定することはできませんが、SVG.jsの方が簡単に書けるようです。より直感的。 Snapが悪いと言っているわけではありませんが、私のスタイルに合わず、ドキュメントの内容が少しまばらでした。

13
Nate

ほとんどの人がどちらかの経験を持っているので、あなたが公平な答えを得るかどうかはわかりません。

両方とも基本的なSVG仕様へのインターフェイスであるため、どちらでもほとんどのことができるはずです。そのため、どちらを選択しても心配する必要はありません。解決策は、違いを見るのではなく、類似しています。

私はSnapの経験が豊富です（とても偏っています）が、ドキュメントを見ると、svg.jsはアニメーションやテキストなどのいくつかの側面に少し砂糖を持っているようですが、おそらくSnapは物事に少し向いているようですマトリックスのように（私はそれらと時々苦労するので非常に便利だと感じました）、タッチ要素のようないくつかの余分なものをサポートしているようです（それらは何らかの形で利用可能で、ブラウザのサポートに一部依存していますが、タッチサポートはsvgでますます重要になる可能性があります）。

最終的には、どちらか一方でコーディングするだけで、心配する必要はありません。 SVGを理解していれば、必要に応じて比較的簡単にSVGを交換できると思います。

11
Ian