首页 文章

Snap.svg vs Svg.js [关闭]

提问于
浏览 次
59

我试图为现代浏览器找到一个合适的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);

用法似乎非常相似 .

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

javascript svg snap.svg svg.js

3 回答

  • 10

    我是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结构，在任何级别上都非常容易write plugins和extend existing objects .

    回复于
  • 67

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

    回复于
  • 13

    我不确定你会得到一个公正的答案，因为大多数人都会有这样或那样的经历 .

    因为它们本质上是基础SVG规范的接口，所以你应该能够用其中任何一个做大部分事情，所以我不会过于担心选择它们 . 解决方案将类似，而不是看到差异 .

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

    最终，我只是在一个或另一个编码，而不是担心它 . 我想如果您了解SVG，如果您需要的话，您可以相对容易地在它们之间进行切换 .

    回复于

相关问题