Estoy trabajando en una interfaz interactiva usando SVG y JavaScript / jQuery, y estoy tratando de decidir entre Raphael y jQuery SVG . Me gustaría saber
No necesito el soporte VML / IE en Raphael, o las capacidades de trazado de jQuery SVG. Me interesa principalmente la forma más elegante de crear, animar y manipular elementos individuales en un lienzo SVG.
Respuestas:
Recientemente he usado tanto Raphael como jQuery SVG, y aquí están mis pensamientos:
Pros: una buena biblioteca de inicio, fácil de hacer MUCHAS cosas con SVG rápidamente. Bien escrito y documentado. Muchos ejemplos y demostraciones. Arquitectura muy extensible. Genial con la animación.
Contras: es una capa sobre el marcado SVG real, hace que sea difícil hacer cosas más complejas con SVG, como la agrupación (admite Conjuntos, pero no grupos). No funciona muy bien con la edición de elementos ya existentes.
Pros: un complemento jquery, si ya está utilizando jQuery. Bien escrito y documentado. Muchos ejemplos y demostraciones. Admite la mayoría de los elementos SVG, permite el acceso nativo a los elementos fácilmente
Contras: arquitectura no tan extensible como Rafael. Algunas cosas podrían estar mejor documentadas (como configurar el elemento SVG). No funciona muy bien con la edición de elementos ya existentes. Se basa en la semántica SVG para la animación, lo que no es tan bueno.
SnapSVG es el sucesor de Raphael. Solo se admite en los navegadores habilitados para SVG y admite casi todas las características de SVG.
Si está haciendo algo rápido y fácil, Raphael es una opción fácil. Si vas a hacer algo más complejo, elegí usar jQuery SVG porque puedo manipular el marcado real significativamente más fácil que con Raphael. Y si desea una solución que no sea jQuery, entonces SnapSVG es una buena opción.
Para la posteridad, me gustaría señalar que terminé eligiendo Raphael, debido a la API limpia y al soporte de IE "gratuito", y también porque el desarrollo activo parece prometedor (el soporte de eventos se agregó en 0.7, por ejemplo). Sin embargo, dejaré la pregunta sin responder, y todavía estaría interesado en escuchar sobre las experiencias de otros usando las bibliotecas Javascript + SVG.
Soy un gran admirador de Raphael y el impulso de desarrollo parece estar fortaleciéndose (la versión 0.85 se lanzó a fines de la semana pasada). Otra gran ventaja es que su desarrollador, Dmitry Baranovskiy , actualmente está trabajando en un plugin de gráficos Raphael, g.raphael , que parece ser bastante ingenioso (hay algunas muestras del resultado de las primeras versiones en Flickr ) .
Sin embargo, solo para lanzar otro posible contendiente a la mezcla de la biblioteca SVG, la web SVG de Google parece muy prometedora (aunque no soy un gran fanático de Flash, que utiliza para renderizar en navegadores que no cumplen con SVG). Probablemente uno para ver, especialmente con la próxima conferencia abierta SVG .
Raphael es definitivamente más fácil de configurar y poner en marcha, pero tenga en cuenta que hay formas de expresar cosas en SVG que no son posibles en Raphael. Como se señaló anteriormente, no hay "grupos". Esto implica que no puede implementar capas de Transfomations de coordenadas. En cambio, solo hay una transformación de coordenadas disponible.
Si su diseño depende de transformaciones de coordenadas anidadas, Raphael no es para usted.
Oh Raphael ha avanzado significativamente desde junio. Hay una nueva biblioteca de gráficos que puede funcionar con ella y estos son muy llamativos. Raphael también es compatible con la sintaxis de ruta SVG completa y está incorporando métodos de ruta realmente avanzados. Ven a ver 1.2.8+ en mi sitio (Shameless plug) y luego salta al sitio de Dmitry desde allí. http://www.irunmywebsite.com/raphael/raphaelsource.html
Creo que no está totalmente relacionado, pero ¿consideró el lienzo? algo como Process JS puede simplificarlo.
También deberías echar un vistazo a svgweb. Utiliza flash para renderizar svg en IE y, opcionalmente, en otros navegadores (en los casos en que admite más que el navegador).
Daré mi voto a favor de Raphael: el soporte para varios navegadores, la API limpia y las actualizaciones consistentes (hasta ahora) hacen que sea un placer usarlo. También juega muy bien con jQuery. El procesamiento es genial, pero más útil como demostración para cosas de vanguardia en este momento.
Como principiante de Javascript, encontré que las muestras de Rapahel no son tan fáciles, recomiendo http://cancerbero.mbarreneche.com/raphaeltut , que es un verdadero tutorial paso a paso.
Para aquellos que no se preocupan por IE6 / IE7, el mismo tipo que escribió Raphael creó un motor de svg específicamente para navegadores modernos: Snap.svg ... tienen un sitio realmente agradable con buenos documentos: http://snapsvg.io
snap.svg no podría ser más fácil de usar desde el primer momento y puede manipular / actualizar SVG existentes o generar nuevos. Puede leer estas cosas en la página acerca de snap.io, pero aquí hay un resumen rápido:
Contras
Pros
Implementa las características completas de SVG como enmascaramiento, recorte, patrones, gradientes completos, grupos y más.
Capacidad para trabajar con SVG existentes: el contenido no tiene que generarse con Snap para que funcione con Snap, lo que le permite crear el contenido con cualquier herramienta de diseño común.
Soporte completo de animación utilizando una API de JavaScript sencilla y fácil de implementar
Funciona con cadenas de SVG (por ejemplo, archivos SVG cargados a través de Ajax) sin tener que renderizarlos primero, de forma similar a un contenedor de recursos o una hoja de sprite.
échale un vistazo si estás interesado: http://snapsvg.io
Como todavía no se menciona aquí: también debe echar un vistazo a Dojox.drawing , que también proporciona buenas capacidades de dibujo SVG. Tiene un conjunto de características bastante impresionante. Estoy comenzando un proyecto con él, pero me parece que es muy superior (al menos en términos de características) a Raphael y JQuerySVG.
Esta presentación me convenció de usarlo en lugar de Raphael / JQuerySVG: http://www.slideshare.net/elazutkin/dojo-gfx-svg-in-the-real-world-2114082
Referencia: http://dojotoolkit.org/reference-guide/dojox/index.html
Referencia en Dojocampus: http://docs.dojocampus.org/dojox/drawing
Descargar Dojo (incluido Dojox): http://dojotoolkit.org/download/
Otra biblioteca de svg javascript que es posible que desee ver es d3.js. http://d3js.org/
Prefiero usar RaphaelJS porque tiene excelentes capacidades de navegador cruzado. Sin embargo, algunos efectos SVG y VML no se pueden lograr con RaphaelJS (gradientes complejos ...).
Google también ha desarrollado una biblioteca propia para habilitar el soporte SVG en IE: http://svgweb.googlecode.com/files/svgweb-2009-08-20-B.zip
Si no necesita compatibilidad con VML e IE8, utilice Canvas (PaperJS, por ejemplo). Mira las últimas demostraciones de IE10 para Windows 7. Tienen animaciones increíbles en Canvas. SVG no es capaz de hacer nada cerca de ellos. Overall Canvas está disponible en todos los navegadores móviles. SVG no funciona en las primeras versiones de Android 2.0- 2.3 (como sé)
Sí, Canvas no es escalable, pero es tan rápido que puede volver a dibujar todo el lienzo más rápido que el navegador capaz de desplazar el puerto de vista.
Desde mi punto de vista, las optimizaciones de Microsoft proporcionan medios para usar Canvas como motor GDI normal e implementar aplicaciones gráficas como las hacemos ahora para Windows.