Snap.svg vs Svg.js

Я попытался найти подходящую библиотеку 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/
Пример стартера (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/

Пример стартера (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);

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

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

Ответ 1

Я создатель 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 и цвета и поэтому расширяемы. Из-за структуры OO чрезвычайно легко написать плагины и расширить существующие объекты на любом уровне.

Ответ 2

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

Ответ 3

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

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

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

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