Snap.svg проти Svg.js [закрито]

Я спробував знайти відповідну бібліотеку 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);

Здається, використання досить схоже.

Які основні відмінності між цими двома бібліотеками?

Я є творцем 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 набагато більш об'єктно-орієнтований. Все - це клас, навіть до цифр та кольорів, і тому його можна розширити. Завдяки структурі ОО надзвичайно легко писати плагіни та розширювати існуючі об’єкти на будь-якому рівні.

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

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

Оскільки обидва вони є по суті інтерфейсами до базової специфікації SVG, ви повинні мати змогу робити більшість речей з будь-яким, тому я б не надто турбувався про вибір. Рішення будуть схожими, а не бачити відмінності.

У мене більше досвіду з Snap (настільки упередженим), але, дивлячись на документи, мої враження склалися б, що svg.js, здається, має трохи більше цукру до деяких аспектів, таких як анімація та текст, тоді як, можливо, Snap має трохи більше до речей на зразок Матриць (які мені здаються дуже корисними, оскільки я часом борюся з ними), і, схоже, підтримує кілька додаткових речей, таких як сенсорні елементи (я підозрюю, що вони доступні як в деякому роді, так і частково залежать від підтримки браузера, але такі речі, як підтримка дотику може стати дедалі важливішою зі svg).

Зрештою, я просто отримав би кодування в одному чи іншому і не хвилювався б про це. Думаю, якщо ви зрозумієте SVG, ви зможете помінятись місцями між ними порівняно легко, якщо вам коли-небудь знадобиться.