Snap.svg vs Svg.js [关闭]

我试图为现代浏览器找到合适的SVG库。我的目标是确定哪种库适合使用例如创建简单的在线SVG编辑器。文本和路径编辑和剪切带有路径的文本。

我发现两个库，其可以是合适的：Snap.svg和Svg.js。

快照

Github：https : //github.com/adobe-webplatform/Snap.svg
源代码行：6925 Github星星：3445
文档：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文件

Github：https : //github.com/svgdotjs/svg.js
源代码行：3604 Github星星：1905
文档：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);

用法似乎相当相似。

这两个库之间的主要区别是什么？

— 蒂莫·卡科宁（TimoKähkönen）
source

这可能是一个基于观点的问题，但这是一个很好的问题，对于那些试图决定将时间花在哪里的人，实际使用图书馆的人的观点可以节省大量时间。此外，关于SO的大多数答案都是基于观点的。

— isapir '17

相反，@ Igal，由于未公开的基于意见的问题而“浪费”的时间可以忽略不计。至少有56个人认为这个问题确实值得。

— KlaymenDK

@KlaymenDK我认为成千上万的人认为这个问题有用，因为到目前为止，该问题被查看了19,257次。即使他们觉得有用，大多数人也根本不会打扰提出问题或答案。

— 伊萨皮尔

Answers:

我是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更加面向对象。一切都是一类，甚至包括数字和颜色，因此都是可扩展的。由于采用OO结构，编写插件和扩展现有对象在任何级别上都非常容易。

— 瓦特
source

SVG.js似乎是一个非常受鼓励且面向社区的创建者-可能也是一个加分点！:)我也更喜欢编码的链接方式，而不是jQuery的“基于字符串”的模式。

— Florian Loch 2014年

@wout：在SVG文件中使用svg.js时，是否可以捕获文档元素而不是插入其他元素？

— Williham Totland 2014年

@wout：很棒的工作！我一周前从snap.svg开始，但是我已经有一些疑问了。通读svg.js文档，我发现我发现Snap缺少的东西，例如相对移动。而且我看到了诸如viewbox，rbox，Use类，defs，更多缓动函数和过滤器（带有插件），循环动画之类的东西。总体而言，它似乎更具模块化和开放性。svg.js上的文档似乎也更加详尽和完整。我只希望svg.js的性能与snap.svg一样好，因为snap专门针对较新的浏览器。有什么想法吗？人们做了基准测试吗？

— Thijs Koerselman 2014年

@ 0x80 svg.js轻易胜过snap.svg。attr()在jsperf上进行的简单测试表明，它的速度至少是其5倍：jsperf.com/raphael-vs-snapsvg-attr/3。还应考虑到svg.js仅是snap大小的一半，并且正如您自己所说的，它具有更多功能。

— 2014年

这样看，对元素的每次操作都是通过该attr()方法完成的。此方法是更改的中心，因此，如果速度缓慢，则总体性能影响将是指数级的。至于Raphael vs Snap，这两个库是同一作者。Snap基本上是Raphael 3.0，如果您看一下代码，会发现很多相似之处。这让我感到困惑，为什么Snap的表现如此糟糕，尤其是在Adobe支持下。

— 2014年

我最初尝试Snap是因为它有一个不错的网站和不错的文档。在我无法解释的一些问题之后，我决定尝试SVG.js。我无法查明原因，但是SVG.js似乎更容易编写；更直观。我并不是说Snap不好，但是它不适合我的风格，并且文档内容很少。

— 内特
source

Snap.svg的文档对我来说也是一个痛苦的地方。它是自动生成的，经常让读者猜测关键的事情。同样，如果没有从0.3.0（似乎有用-到目前为止只发现一个bug）前进，可能意味着缺乏动力。

— akauppi 2015年

我无法使svg.js工作。有人有可行的例子吗？

— David Spector

我不确定您会得到一个公正的答案，因为大多数人都会有一个或另一个的经验。

由于两者本质上都是底层SVG规范的接口，因此您应该能够对其中任何一个进行大多数操作，因此我不必为选择其中任何一个担心。解决方案将是相似的，而不是看到差异。

我对Snap有一定的经验（偏见），但看一下文档，我的印象是svg.js似乎在动画和文本等方面有更多的应用，而Snap可能在处理方面有更多的了解像矩阵（我有时会发现这些矩阵非常有用，我发现它们非常有用），并且似乎还支持触摸元素之类的一些额外功能（我怀疑它们在某种程度上都可用，尽管部分取决于浏览器的支持，但是类似SVG可能会增加触摸支持的重要性）。

最终，我只会使用一种或另一种进行编码，而不必担心。我认为，如果您了解SVG，也可以在他们之间相对容易地进行互换。

— 伊恩
source