Je travaille sur une interface interactive utilisant SVG et JavaScript / jQuery, et j'essaie de choisir entre Raphael et jQuery SVG . J'aimerais savoir
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:
J'ai récemment utilisé Raphael et jQuery SVG - et voici mes réflexions:
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.
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 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.
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.
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.
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 .
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.
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
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.
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).
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.
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 vrai tutoriel étape par étape.
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
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
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/
Une autre bibliothèque javascript svg que vous voudrez peut-être regarder est d3.js. http://d3js.org/
Je préfère utiliser RaphaelJS car il a de grandes capacités multi-navigateurs. 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 la prise en charge SVG dans IE: http://svgweb.googlecode.com/files/svgweb-2009-08-20-B.zip
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.