javascript - Snap.svg vs Svg.js
(3)
He intentado encontrar una biblioteca SVG adecuada para navegadores modernos. Mi objetivo es decidir qué biblioteca es adecuada para crear un simple editor SVG en línea, por ejemplo. texto y ruta de edición y recorte de texto con rutas.
Encontré dos bibliotecas, que pueden ser adecuadas: Snap.svg y Svg.js.
SNAP.SVG
Github: https://github.com/adobe-webplatform/Snap.svg
Líneas de código fuente: 6925 Github Stars: 3445
Doc: http://snapsvg.io/docs/
Primeros pasos: http://snapsvg.io/start/
Ejemplo de JSBIN ( 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
Líneas de código fuente: 3604 Github Stars: 1905
Doc: https://svgdotjs.github.io/
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);
El uso parece ser bastante similar.
¿Cuáles son las principales diferencias entre estas dos bibliotecas?
No estoy seguro de que vayas a obtener una respuesta imparcial, ya que la mayoría de las personas tendrá experiencia con uno u otro.
Como ambas son esencialmente interfaces con las especificaciones SVG subyacentes, usted debería poder hacer la mayoría de las cosas con cualquiera de ellas, de modo que no me preocuparía demasiado por elegirlas. Las soluciones serán similares, en lugar de ver diferencias.
Tengo más experiencia con Snap (tan parcial), pero mirando los documentos, mi impresión es que svg.js parece tener un poco más de azúcar en algunos aspectos como animaciones y texto, mientras que tal vez Snap tiene un poco más hacia las cosas como Matrices (que he encontrado muy útil ya que a veces me cuesta), y parecen admitir algunas cosas adicionales como elementos táctiles (sospecho que están disponibles de alguna manera, y en parte dependen del soporte del navegador, pero cosas como el soporte táctil puede volverse cada vez más importante con svg).
En última instancia, me gustaría obtener la codificación en uno u otro y no preocuparme por eso. Creo que si entiendes SVG, podrás intercambiarlos relativamente fácil si alguna vez lo necesitas.
Originalmente probé Snap ya que tenía un buen sitio web y una buena documentación. Después de algunos problemas que no pude explicar, decidí probar SVG.js. No puedo precisar por qué, pero SVG.js parece más fácil de escribir; más intuitivo. No digo que Snap sea malo, pero no se ajusta a mi estilo, y la documentación era un poco escasa de contenido.
Yo soy el creador de https://svgdotjs.github.io/ (así que también estoy predispuesto :). Tendrás que probarlos a los dos y ver qué te conviene más. Con SVG.js trato de mantener la sintaxis más basada en JavaScript para que todo sea más dinámico, mientras que Snap a menudo usa una sintaxis basada en cadenas. Esto hace que el código resultante a menudo sea más legible en SVG.js, que obviamente prefiero. Tomemos un gradiente como ejemplo.
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 sintaxis de Snap.svg es un poco más conciso, el código SVG.js es más legible. Entonces es realmente una cuestión de gusto.
En general, SVG.js está mucho más orientado a objetos. Todo es una clase, incluso hasta numbers y colors y por lo tanto extensible. Debido a la estructura OO, es extremadamente fácil escribir complementos y extender los objetos existentes en cualquier nivel.