79

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

我找到了两个可能合适的库：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);

用法似乎很相似。

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

4

3 回答 3

82

我是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 结构，编写插件和扩展任何级别的现有对象都非常容易。

于 2014-02-20T19:15:42.483 回答
17

我最初尝试了 Snap，因为它有一个不错的网站和看起来不错的文档。在一些我无法解释的问题之后，我决定尝试 SVG.js。我无法确定原因，但 SVG.js 似乎更容易编写；更直观。我并不是说 Snap 不好，但它不符合我的风格，而且文档的内容有点稀疏。

于 2014-03-08T01:56:07.797 回答
13

我不确定您是否会得到公正的答案，因为大多数人都会有其中一种经验。

由于两者本质上都是底层 SVG 规范的接口，因此您应该能够使用其中任何一种来做大部分事情，所以我不会太担心选择任何一种。解决方案将是相似的，而不是看到差异。

我对 Snap 有更多的经验（所以有偏见），但是查看文档，我的印象是 svg.js 似乎对动画和文本等某些方面有更多的糖分，而也许 Snap 对事物有更多的了解像矩阵（我发现它有时非常有用，因为我有时会遇到这些问题），并且似乎支持一些额外的东西，比如触摸元素（我怀疑它们在某种程度上都可用，并且部分依赖于浏览器的支持，但是像对 svg 的触控支持可能会变得越来越重要）。

最终，我只会在其中一个中进行编码，而不用担心它。我认为，如果您了解 SVG，您将能够在需要时相对轻松地在它们之间进行交换。

于 2014-02-16T09:26:36.157 回答