jQuery SVG contre Raphael
Je travaille sur une interface interactive utilisant SVG et JavaScript/jQuery, et j'essaie de choisir entre Raphael et jQuery SVG . J'aimerais savoir
- Quels sont les compromis entre les deux
- Où le développement semble être.
Je n'ai pas besoin du support VML/IE de Raphael, ni des capacités de traçage de jQuery SVG. Je suis principalement intéressé par la manière la plus élégante de créer, d’animer et de manipuler des éléments individuels sur un canevas SVG.
J'ai récemment utilisé Raphael et jQuery SVG - et voici ce que je pense:
Raphaël
Avantages: une bonne bibliothèque de démarrage, facile à faire BEAUCOUP de choses avec SVG rapidement. Bien écrit et documenté. Beaucoup d'exemples et de démos. Architecture très extensible. Parfait avec l'animation.
Inconvénients: est un calque recouvrant le balisage SVG, ce qui rend difficile la réalisation de tâches plus complexes avec SVG - telles que le regroupement (il prend en charge les ensembles, mais pas les ensembles). groupes). Ne fait pas grand chose avec l'édition d'éléments existants.
jQuery SVG
Avantages: un plugin jquery, si vous utilisez déjà jQuery. Bien écrit et documenté. Beaucoup d'exemples et de démos. Prend en charge la plupart des éléments SVG, permet un accès natif aux éléments facilement
Inconvénients: architecture pas aussi extensible que Raphaël. Certaines choses pourraient être mieux documentées (comme la configuration d'un élément SVG). Ne fait pas grand chose avec l'édition d'éléments existants. S'appuie sur la sémantique SVG pour l'animation - ce qui n'est pas si génial.
SnapSVG en tant que version SVG pure de Raphael
SnapSVG est le successeur de Raphael. Il n'est pris en charge que par les navigateurs compatibles SVG et supporte presque toutes les fonctionnalités de SVG.
Conclusion
Si vous faites quelque chose de rapide et facile, Raphael est un choix facile. Si vous voulez faire quelque chose de plus complexe, j'ai choisi d'utiliser jQuery SVG car je peux manipuler le balisage de manière bien plus simple qu'avec Raphael. Et si vous voulez une solution non-jQuery, alors SnapSVG est une bonne option.
Pour la postérité, je voudrais noter que j’ai finalement choisi Raphael, à cause de la nouvelle API et du support "gratuit" IE, et aussi parce que le développement actif semble prometteur ( le support d'événement vient d'être ajouté dans 0.7, par exemple). Cependant, je laisserai la question sans réponse et je serais toujours intéressé de connaître les expériences des autres utilisateurs des bibliothèques Javascript + SVG.
Je suis un grand fan de Raphael et la dynamique de développement semble aller bien (la version 0.85 est sortie tard la semaine dernière). Un autre gros avantage est que son développeur, Dmitry Baranovskiy , travaille actuellement sur un plugin de création de graphiques pour Raphaël, g.raphael . Voici quelques exemples de la sortie des premières versions sur Flickr ).
Cependant, juste pour ajouter un autre candidat possible au mélange de bibliothèques SVG, le SVG Web de Google est vraiment très prometteur (même si je ne suis pas un grand fan de Flash, qu'il utilise pour le rendu non SVG). navigateurs compatibles). Probablement à surveiller, en particulier avec le prochain conférence SVG Open .
Raphael est bien plus facile à configurer et à utiliser, mais notez qu'il existe des manières d'exprimer des choses en SVG qui ne sont pas possibles à Raphael. Comme indiqué ci-dessus, il n'y a pas de "groupes". Cela implique que vous ne pouvez pas implémenter de couches de transferts de coordonnées. Au lieu de cela, une seule transformation de coordonnées est disponible.
Si votre conception dépend de transformations de coordonnées imbriquées, Raphael n'est pas pour vous.
Oh Raphael a beaucoup évolué depuis juin. Il existe une nouvelle bibliothèque de graphiques qui peut fonctionner avec, et ceux-ci sont très accrocheurs. Raphael prend également en charge la syntaxe complète du chemin SVG et incorpore des méthodes de chemin vraiment avancées. Venez voir 1.2.8+ sur mon site (Shameless plug), puis rendez-vous sur le site de Dmitry à partir de là. http://www.irunmywebsite.com/raphael/raphaelsource.html
Je pense que ce n'est pas totalement indépendant, mais avez-vous considéré la toile? quelque chose comme Process JS peut simplifier les choses.
Vous devriez également jeter un coup d'œil à svgweb. Il utilise flash pour rendre svg dans IE et éventuellement sur d'autres navigateurs (dans les cas où il prend en charge davantage que le navigateur lui-même).
En tant que débutant javascript, j’ai trouvé les échantillons Rapahel pas si faciles, je recommande http://cancerbero.mbarreneche.com/raphaeltut , qui est un véritable didacticiel pas à pas.
Pour ceux qui ne se soucient pas de IE6/IE7, le même gars qui a écrit Raphael a construit un moteur svg spécifiquement pour les navigateurs modernes: Snap.svg .. ils ont un site vraiment sympa avec une bonne documentation: http://snapsvg.io
snap.svg ne pourrait pas être plus facile à utiliser et peut manipuler/mettre à jour des SVG existants ou en générer de nouveaux. Vous pouvez lire ces informations sur le site snap.io à propos de cette page, mais voici un bref aperçu:
Inconvénients
- Pour utiliser les fonctionnalités de capture instantanée, vous devez renoncer au support des navigateurs plus anciens. Raphael prend en charge les navigateurs tels que IE6/IE7. Les fonctionnalités de capture instantanée ne sont prises en charge que par IE9 et versions ultérieures, Safari, Chrome, Firefox et Opera.
Pros
Implémente toutes les fonctionnalités de SVG telles que le masquage, le découpage, les motifs, les gradients complets, les groupes, etc.
Capacité à travailler avec des SVG existants: il n'est pas nécessaire de générer du contenu avec Snap pour qu'il fonctionne avec Snap, ce qui vous permet de créer le contenu avec des outils de conception courants.
Prise en charge complète de l'animation à l'aide d'une API JavaScript simple et facile à implémenter
Fonctionne avec des chaînes de fichiers SVG (par exemple, des fichiers SVG chargés via Ajax) sans avoir à les restituer au préalable, comme pour un conteneur de ressources ou une feuille Sprite.
allez voir si ça vous intéresse: http://snapsvg.io
Je voterai derrière Raphael: la prise en charge multi-navigateurs, une API propre et des mises à jour cohérentes (jusqu'à présent) en font un plaisir à utiliser. Il joue aussi très bien avec jQuery. Le traitement est cool, mais plus utile en tant que démo pour le moment en effleurant.
Une autre bibliothèque javascript svg que vous voudrez peut-être consulter est d3.js. http://d3js.org/
Comme ce n'est pas encore mentionné ici: vous devriez également jeter un oeil à Dojox.drawing , qui fournit également de bonnes capacités de dessin SVG. Il a un ensemble assez impressionnant de fonctionnalités. Je commence juste un projet avec, mais il me semble que c'est de loin supérieur (du moins en termes de fonctionnalités) à Raphael et JQuerySVG.
Cette présentation m'a convaincu de l'utiliser à la place de Raphael/JQuerySVG: http://www.slideshare.net/elazutkin/dojo-gfx-svg-in-the-real-world-2114082
Référence: http://dojotoolkit.org/reference-guide/dojox/index.html
Référence sur Dojocampus: http://docs.dojocampus.org/dojox/drawing
Télécharger Dojo (y compris Dojox): http://dojotoolkit.org/download/
Je préfère utiliser RaphaelJS car il offre d'excellentes capacités de navigation croisée. Cependant, certains effets SVG et VML ne peuvent pas être obtenus avec RaphaelJS (dégradés complexes ...).
Google a également développé sa propre bibliothèque pour activer le support SVG dans IE: http://svgweb.googlecode.com/files/svgweb-2009-08-20-B.Zip
Si vous n'avez pas besoin des supports VML et IE8, utilisez Canvas (PaperJS par exemple). Regardez les dernières démos IE10 pour Windows 7. Ils ont des animations étonnantes dans Canvas. SVG n'est pas capable de faire quoi que ce soit près d'eux. Overall Canvas est disponible sur tous les navigateurs mobiles. SVG ne fonctionne pas dans les premières versions de Android 2.0- 2.3 (comme je le sais)
Oui, Canvas n'est pas évolutif, mais il est si rapide que vous pouvez redessiner l'intégralité de la toile plus rapidement qu'un navigateur capable de faire défiler le port d'affichage.
De mon point de vue, les optimisations de Microsoft permettent d’utiliser Canvas comme moteur GDI classique et de mettre en oeuvre des applications graphiques comme nous le faisons maintenant pour Windows.