web-dev-qa-db-fra.com

Snap.svg vs Svg.js

J'ai essayé de trouver une bibliothèque SVG appropriée pour les navigateurs modernes. Mon objectif est de décider quelle bibliothèque est appropriée pour créer un éditeur SVG en ligne simple avec par exemple. modification de texte et de chemin et découpe de texte avec des chemins.

J'ai trouvé deux bibliothèques, qui peuvent convenir: Snap.svg et Svg.js .

SNAP.SVG

Github: https://github.com/Adobe-webplatform/Snap.svg
Lignes de code source: 6925 Github Stars: 3445
Doc: http://snapsvg.io/docs/
Pour commencer: http://snapsvg.io/start/
Exemple de démarrage ( 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
Lignes de code source: 3604 Github Stars: 1905
Doc: https://svgdotjs.github.io/

Exemple de démarrage ( 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);

L'utilisation semble assez similaire.

Quelles sont les principales différences entre ces deux bibliothèques?

javascriptsvgsnap.svgsvg.js
67
Timo Kähkönen

Je suis le créateur de SVG.js (donc je suis aussi biaisé :). Vous devrez les essayer tous les deux et voir ce qui vous convient le mieux. Avec SVG.js, j'essaie de garder la syntaxe plus basée sur javascript pour que tout soit plus dynamique, alors que Snap utilise souvent une syntaxe basée sur des chaînes. Cela rend le code résultant souvent plus lisible par l'homme dans SVG.js, ce que je préfère évidemment. Prenons un dégradé comme exemple.

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)

La syntaxe Snap.svg est un peu plus concise, le code SVG.js est plus lisible. C'est donc vraiment une question de goût.

Généralement, SVG.js est beaucoup plus orienté objet. Tout est une classe, même jusqu'à nombres et couleurs et sont donc extensibles. En raison de la structure OO, il est extrêmement facile de écrire des plugins et étendre les objets existants à n'importe quel niveau.

72
wout

J'ai à l'origine essayé Snap car il avait un site Web agréable et une documentation apparemment bonne. Après quelques problèmes que je n'ai pas pu expliquer, j'ai décidé d'essayer SVG.js. Je ne sais pas pourquoi, mais SVG.js semble plus facile à écrire; plus intuitif. Je ne dis pas que Snap est mauvais, mais il ne correspond pas à mon style et la documentation était un peu clairsemée.

13
Nate

Je ne suis pas sûr que vous obtiendrez une réponse impartiale, car la plupart des gens auront l'expérience de l'un ou de l'autre.

Comme les deux sont essentiellement des interfaces avec la spécification SVG sous-jacente, vous devriez pouvoir faire la plupart des choses avec l'un ou l'autre, donc je ne m'inquiéterais pas trop de choisir non plus. Les solutions seront similaires, plutôt que de voir des différences.

J'ai plus d'expérience avec Snap (donc biaisé), mais en regardant les documents, mes impressions seraient que svg.js semble avoir un peu plus de sucre pour certains aspects comme les animations et le texte, alors que peut-être Snap a un peu plus de choses comme les matrices (que j'ai trouvées très utiles car j'ai parfois du mal avec celles-ci), et semblent prendre en charge quelques éléments supplémentaires comme les éléments tactiles (je soupçonne qu'ils sont disponibles à la fois d'une manière ou d'une autre et dépendent en partie de la prise en charge du navigateur, mais des choses comme le support tactile peut devenir de plus en plus important avec svg).

En fin de compte, j'obtiendrais simplement le codage dans l'un ou l'autre et ne m'inquiéterais pas à ce sujet. Je pense que si vous comprenez SVG, vous serez en mesure de basculer entre eux relativement facilement si vous en avez besoin.

11
Ian