jQuery SVG vs. Raphael [fermé]


254

Je travaille sur une interface interactive utilisant SVG et JavaScript / jQuery, et j'essaie de choisir entre Raphael et jQuery SVG . J'aimerais savoir

  1. Quels sont les compromis entre les deux
  2. Où la dynamique de développement semble être.

Je n'ai pas besoin du support VML / IE dans Raphael, ni des capacités de traçage de jQuery SVG. Je m'intéresse principalement à la manière la plus élégante de créer, animer et manipuler des éléments individuels sur un canevas SVG.

Réponses:


194

J'ai récemment utilisé Raphael et jQuery SVG - et voici mes réflexions:

Raphael

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. Idéal avec animation.

Inconvénients: est une couche sur le balisage SVG réel, il est difficile de faire des choses plus complexes avec SVG - comme le regroupement (il prend en charge les ensembles, mais pas les groupes). Ne fait pas grand-chose avec l'édition d'éléments déjà 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: l' architecture n'est pas aussi extensible que Raphael. Certaines choses pourraient être mieux documentées (comme la configuration de l'élément SVG). Ne fait pas grand-chose avec l'édition d'éléments déjà existants. Repose sur la sémantique SVG pour l'animation - ce qui n'est pas terrible.

SnapSVG comme une pure version SVG de Raphael

SnapSVG est le successeur de Raphael. Il est pris en charge uniquement dans les navigateurs compatibles SVG et prend en charge presque toutes les fonctionnalités de SVG.

Conclusion

Si vous faites quelque chose de rapide et de facile, Raphael est un choix facile. Si vous allez faire quelque chose de plus complexe, j'ai choisi d'utiliser jQuery SVG car je peux manipuler le balisage réel beaucoup plus facilement qu'avec Raphael. Et si vous voulez une solution non jQuery, SnapSVG est une bonne option.


15
La documentation de RaphaelJS n'est pas terrible non plus, elle est limitée et vous devez parfois aller dans la documentation SVG ou jQuery pour obtenir toutes les informations. Cela dit, avec la démo (code source) disponible ainsi que le forum et de nombreux utilisateurs, j'arrive à obtenir les réponses dont j'ai besoin.
Roalt

11
Je viens de commencer à utiliser Raphael et j'ai trouvé la documentation parmi les meilleures que j'ai rencontrées pour une API javascript, avec des exemples très clairs à côté des spécifications plus formelles

71
N'oubliez pas que RaphaelJS est rétrocompatible avec VML pour Internet Explorer. C'est ÉNORME parce que SVG ne fonctionne pas sur les anciens navigateurs.
strongriley

3
La question portait spécifiquement sur SVG, pas sur la compatibilité ascendante. Si le désir est des graphiques vectoriels multi-navigateurs, vous avez raison.
Anatoly G

4
Un autre con de jQuery SVG est que le projet bien que le projet soit opensoucer (GPL et MIT) semble avoir été abandonné par son développeur (version 1.4.5 dernière mise à jour 28 avril 2012). jquery.svg.dom provoque certains conflits avec jQuery 1.8. Idéalement, j'attendrais que quelqu'un prenne le contrôle du projet et, espérons-le, le mette en place
Hoffmann

53

Pour la postérité, je voudrais noter que j'ai fini par choisir Raphael, à cause de l'API propre et du support IE "gratuit", et aussi parce que le développement actif semble prometteur (le support des événements vient d'être ajouté en 0.7, par exemple). Cependant, je laisserai la question sans réponse, et je serais toujours intéressé d'entendre les expériences des autres utilisant les bibliothèques Javascript + SVG.


1
Le bon support IE pour Raphael est génial. Des carrés aux coins arrondis dans IE? ... pas de problème;)
Peter Ajtai

26

Je suis un grand fan de Raphael et la dynamique de développement semble aller forte (la version 0.85 a été publiée à la fin de la semaine dernière). Un autre gros avantage est que son développeur, Dmitry Baranovskiy , travaille actuellement sur un plug-in de cartographie Raphael, g.raphael , qui semble être assez élégant (il existe quelques exemples de la sortie des premières versions sur Flickr ) .

Cependant, juste pour jeter un autre concurrent possible dans le mélange de bibliothèques SVG, le Web SVG de Google semble très prometteur (même si je ne suis pas un grand fan de Flash, qu'il utilise pour effectuer le rendu dans des navigateurs non compatibles SVG). Probablement un à regarder, en particulier avec la prochaine conférence SVG Open .


1
C'est Raphael v. 1.5.2 pour le moment.
topright gamedev

3
ce n'est pas grave de remarquer que la version actuelle est 2.1.2. Ce commentaire attend d'être corrigé par un autre gars dans quelques années ...
Tebe

Kopat 'Sho Ya Nashel, Quelques années plus tard ... C'est Raphael v2.2.1 maintenant
Nathangrad

12

Raphael est certainement plus facile à configurer et à démarrer, mais notez qu'il existe des moyens d'exprimer des choses en SVG qui ne sont pas possibles dans Raphael. Comme indiqué ci-dessus, il n'y a pas de "groupes". Cela implique que vous ne pouvez pas implémenter des couches de transfomations de coordonnées. Au lieu de cela, il n'y a qu'une seule transformation de coordonnées disponible.

Si votre conception dépend de transformations de coordonnées imbriquées, Raphael n'est pas pour vous.


11

Oh Raphael a considérablement évolué depuis juin. Il existe une nouvelle bibliothèque de graphiques qui peut fonctionner avec elle et celles-ci sont très accrocheuses. Raphael prend également en charge la syntaxe de chemin SVG complète et intègre des méthodes de chemin vraiment avancées. Venez voir 1.2.8+ sur mon site (plug Shameless) puis rebondissez sur le site de Dmitry à partir de là. http://www.irunmywebsite.com/raphael/raphaelsource.html


6

Je pense que ce n'est pas totalement indépendant, mais avez-vous pensé à la toile? quelque chose comme Process JS peut le rendre plus simple.


12
J'ai regardé à la fois la toile en général et le traitement en particulier. Le problème est que (pour autant que je sache), les événements de souris ne peuvent pas être facilement attachés à des éléments individuels sur le canevas, pour des fonctionnalités telles que le glisser-déposer, contrairement à SVG, qui est entièrement exposé au DOM.
Luke Dennis

1
Je n'ai pas fait beaucoup de travail avec canvas mais jetez un œil au plugin Flot - jquery qui utilise canvas pour les graphiques. Il gère très bien les clics de souris.
Bharani

4
Mouseclicks oui, mais pas les événements dom sur les éléments du canevas. En fait, pour Canvas, vous ne pouvez pas placer le gestionnaire d'événements sur le canvas (à cause d'IE), bien que vous puissiez le placer sur un div qui contient le canvas.
Nosredna

3
la toile est idéale pour les bitmaps, SVG est idéale pour les graphiques vectoriels. La capacité de SVG à évoluer est fantastique pour cela. Je pense que la toile et le SVG sont des technologies complémentaires.
Anatoly G

En ce qui concerne les événements de souris pour le canevas, jetez un œil à Easel.js qui gère tout cela pour vous.
Neil

6

Vous devriez également jeter un œil à svgweb. Il utilise flash pour rendre svg dans IE, et éventuellement sur d'autres navigateurs (dans les cas où il prend en charge plus que le navigateur lui-même).

http://code.google.com/p/svgweb/


5

Je voterai derrière Raphael - le support multi-navigateur, l'API propre et les mises à jour cohérentes (jusqu'à présent) en font un plaisir à utiliser. Il joue également très bien avec jQuery. Le traitement est cool, mais plus utile en tant que démo pour des trucs de pointe pour le moment.



5

Pour ceux qui ne se soucient pas d'IE6 / IE7, le même gars qui a écrit Raphael a construit un moteur svg spécialement pour les navigateurs modernes: Snap.svg .. ils ont un site vraiment sympa avec de bons documents: http://snapsvg.io

snap.svg ne pourrait pas être plus facile à utiliser dès la sortie de la boîte et peut manipuler / mettre à jour les SVG existants ou en générer de nouveaux. Vous pouvez lire ces informations sur la page à propos de snap.io, mais voici un bref résumé:

Les inconvénients

  • Pour utiliser les fonctionnalités de Snap, vous devez renoncer à la prise en charge des anciens navigateurs. Raphael prend en charge les navigateurs comme IE6 / IE7, les fonctionnalités d'accrochage ne sont prises en charge que par IE9 et versions ultérieures, Safari, Chrome, Firefox et Opera.

Avantages

  • Implémente toutes les fonctionnalités de SVG telles que le masquage, l'écrêtage, les motifs, les dégradés complets, les groupes, etc.

  • Capacité à travailler avec des SVG existants: le contenu n'a pas besoin d'être généré avec Snap pour qu'il fonctionne avec Snap, ce qui vous permet de créer le contenu avec n'importe quel outil de conception courant.

  • Prise en charge complète des animations à l'aide d'une API JavaScript simple et facile à implémenter

  • Fonctionne avec des chaînes de SVG (par exemple, des fichiers SVG chargés via Ajax) sans avoir à les rendre en premier, comme un conteneur de ressources ou une feuille de sprite.

vérifiez-le si vous êtes intéressé: http://snapsvg.io


3

Comme il n'est pas encore mentionné ici: vous devriez également jeter un œil à Dojox.drawing , qui offre également de bonnes capacités de dessin SVG. Il a un ensemble de fonctionnalités assez impressionnant. Je commence juste un projet avec, mais il me semble qu'il est de loin supérieur (au 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/




0

Si vous n'avez pas besoin du support VML et IE8, utilisez alors Canvas (PaperJS par exemple). Regardez les dernières démos IE10 pour Windows 7. Elles ont des animations incroyables dans Canvas. SVG n'est pas capable de faire quoi que ce soit près d'eux. Global Canvas est disponible sur tous les navigateurs mobiles. SVG ne fonctionne pas avec les premières versions d'Android 2.0-2.3 (comme je le sais)

Oui, Canvas n'est pas évolutif, mais il est si rapide que vous pouvez redessiner toute la toile plus rapidement que le navigateur peut faire défiler le port d'affichage.

De mon point de vue, les optimisations de Microsoft permettent d'utiliser Canvas comme moteur GDI standard et d'implémenter des applications graphiques comme nous les faisons pour Windows maintenant.


1
Pour le rendu graphique pur, je suis absolument d'accord. La seule chose que SVG / VML offre, ce qui n'est pas le cas, est un DOM et une hiérarchie d'événements, car les éléments dessinés sont des objets DOM complets plutôt qu'une image bitmap brute. Avec le canevas, les cordons de clic X / Y sont les meilleurs que l'on puisse faire. Quoi qu'il en soit, le projet est terminé depuis longtemps, il n'est donc pas pertinent actuellement, mais merci pour votre réponse. :)
Luke Dennis
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.