Snap.svg vs Svg.js

Question

Я попытался найти подходящую библиотеку SVG для современных браузеров. Моя цель - решить, какая библиотека подходит для создания простого онлайн-редактора SVG, например. редактирование текста и пути и обрезание текста с помощью путей.

я нашел две библиотеки, которые могут быть пригодны: Snap.svg и Svg.js.

---

SNAP.SVG

Github: https://github.com/adobe-webplatform/Snap.svg
Источник строк кода: 6925 Github Звезды: 3445
Doc: http://snapsvg.io/docs/
Начало работы: http://snapsvg.io/start/
Starter пример (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 Звезды: 1905
Doc: https://svgdotjs.github.io/

Starter пример (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); 

---

Использование кажется довольно похожим.

В чем основные отличия между этими двумя библиотеками?

Answer 1

Я не уверен, что вы получите объективный ответ, так как большинство людей будет иметь опыт того или другого.

Поскольку оба интерфейса по существу связаны с базовым спецификацией SVG, вы также сможете делать большинство вещей, поэтому я не стал бы слишком беспокоиться о том, чтобы выбрать. Решения будут похожи, а не видят различия.

У меня больше опыта работы с Snap (настолько предвзятым), но, глядя на документы, мои впечатления состоят в том, что у svg.js, похоже, есть немного больше сахара для некоторых аспектов, таких как анимация и текст, тогда как, возможно, Snap имеет немного больше по отношению к таким вещам, как Matrices (которые я нашел очень полезными, поскольку я иногда боюсь с ними) и, кажется, поддерживают несколько дополнительных вещей, таких как сенсорные элементы (я подозреваю, что они доступны как-то, и частично зависят от поддержки браузера, хотя , но такие вещи, как поддержка касания, могут приобретать все большее значение с svg).

В конечном счете, я бы просто получил кодирование в том или ином и не беспокоился об этом. Я думаю, что если вы поймете SVG, вы сможете обмениваться между ними относительно легко, если вам когда-нибудь понадобится.

Answer 2

Я являюсь создателем 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 на любом уровне.

Answer 3

Я изначально попробовал Snap, поскольку у него был хороший сайт и, казалось бы, хорошая документация. После нескольких вопросов, которые я не мог объяснить, я решил попробовать SVG.js. Я не могу определить, почему, но SVG.js кажется легче писать; более интуитивно понятный. Я не говорю, что Snap плохой, но это не соответствует моему стилю, и документация была немного скудной по содержанию.