Bibliothèque de dessin/canevas JavaScript la plus largement supportée (IE + Opera)

Question

Je cherche à faire un site portfolio, et je voulais faire du dessin créatif sur le site sans utiliser d'images.

Je considérais la toile, ce que je pense vraiment serait cool, plus un projet intéressant, cependant, j'ai entendu que IE n'a pas de compatibilité (est-ce vrai?), Donc je ne peux pas avoir cela. Ensuite, j'ai considéré Raphaël, ce qui semble être l'option la plus viable jusqu'à présent. Ughh, il y avait une autre bibliothèque dont je ne me souviens pas du nom, qui semblait aussi être une bonne option.

Que pensez-vous de Raphaël et de sa compatibilité globale, et de ses capacités, en ce qui concerne les types de dessin dont il est capable. Je parcourais la documentation et je pense que c'est assez puissant.

Answer 1

Eh bien, vous pouvez télécharger Inkscape et dessiner ce que vous voulez cross-navigateur là-bas. Ensuite, allez sur mon site Web (Page avec l'outil et les instructions ci-dessous) et utilisez le convertisseur SVGTOHTML. J'en ajoute plus avec chaque version. Le SVG est converti en Raphael et il y a quelques options quant au format que vous pouvez avoir.

La version est à 0,57 au moment de taper ceci.

http://www.irunmywebsite.com/raphael/svgsource.php

Answer 2

Est-ce que vous voulez dessiner les graphiques vectoriels sur le site lui-même, ou tout simplement publier des graphiques vectoriels premade?

• Si l'ancien, un coup d'oeil à svg-edit qui peut facilement être intégré dans votre site, et qui fonctionne dans la plupart des navigateurs (anciennes versions IE nécessitent le plugin cadre chromé, mais IE9 sera pris en charge par svg-edit 2.6).

• Dans ce dernier cas alors il y a probablement beaucoup d'options, voici quelques du haut de ma tête:

  • Utilisez SVGWeb - démarrer rapidement que l'aide de modèles de svgboilerplate.com

  • Servir svg aux navigateurs qui le supportent, et des images statiques à tout le monde

    < données objet = "your.svg" type = "image/svg + xml"> < img src = "staticyoursvg.png"> </obj ect>

Answer 3

Il est pas vrai que IE ne supporte pas la toile. IE9 le prendra en charge, qui est la même version qui prendra en charge SVG.

Pour le développement SVG, cela dépend de ce que vous voulez faire. Pour les images statiques, vous pouvez même utiliser Illustrator ou Inkscape, puis enregistrer/exporter au format SVG. Si vous faites cela, n'oubliez pas d'utiliser Scour [0], car le balisage généré automatiquement peut être un peu brouillon. J'écris habituellement le SVG à la main, sauf si je fais quelque chose de complexe, auquel cas il vaut mieux utiliser un éditeur d'image.

Il n'y a pas vraiment de bons éditeurs pour ajouter des animations, donc je les ajoute toujours à la main.Des choses comme SMIL (utilisées pour animer SVG) ne sont pas si difficiles à apprendre, mais un peu verbeuses. Si vous utilisez SMIL, il est recommandé d'utiliser FakeSMIL, qui est inclus dans la SVGBoilerplate avec laquelle Erik fait un lien ci-dessus, car certains navigateurs n'ont pas de support pour SMIL.

Si vous voulez utiliser une bibliothèque JS pour générer le SVG plutôt que d'écrire à la main ou en utilisant un éditeur, alors Raphaël est probablement le plus mature. Il y a aussi Dojo GFX [1]. Le mieux dépend vraiment de vos préférences personnelles et de ce que vous essayez de faire. Il serait préférable de les essayer avec quelque chose de simple et voir ce que vous préférez.

[0] http://www.codedread.com/scour/ [1] http://docs.dojocampus.org/dojox/gfx

Answer 4

Regardez dans SVG Web, il utilise Flash pour émuler SVG dans les navigateurs non-support. Il est écrit par des leaders de l'industrie comme Brad Neuberg et il n'interfère pas avec la façon dont vous voulez écrire le balisage SVG, alors quand les navigateurs qui ne supportent pas SVG disparaissent, vous pouvez le supprimer et votre balisage SVG fonctionnera. Avec Raphaël, vous devez écrire du code JavaScript au lieu du balisage SVG, vous devez donc continuer à l'utiliser pour toujours, ou re-coder vos graphiques. De plus, Raphaël ne supporte que le plus petit dénominateur commun entre SVG et VML, donc vous ne pouvez pas faire grand-chose. Il émule même certains bugs VML en SVG, de sorte que les deux graphismes se ressemblent. Raphaël est meilleur pour SVG généré dynamiquement, mais pour d'autres cas, je recommande SVG Web.