1. Accueil
  2. Question et réponse
  3. Lequel préférez-vous? SVG, HTML5 ou regen'd-PNG pour les graphiques et diagrammes?

Lequel préférez-vous? SVG, HTML5 ou regen'd-PNG pour les graphiques et diagrammes?

2009-11-09 18 views
3

Je suis en train de développer un nouveau site qui représente graphiquement certaines métriques opérationnelles. A ce titre, une dizaine de graphiques/graphiques seront affichés sur le site. Je veux être en mesure de les réduire dynamiquement (dans des limites raisonnables) en fonction de la taille du navigateur.Lequel préférez-vous? SVG, HTML5 ou regen'd-PNG pour les graphiques et diagrammes?

Je débat sur les avantages/inconvénients de générer ceux-ci comme une de ces options:

  1. SVG. Idéal pour la mise à l'échelle mais peut avoir un support limité,
  2. HTML5. Clairement un excellent choix pour le futur et pour les clients FF, IE?
  3. PNG. Cela nécessiterait que je régénère le PNG en fonction de la taille de la DIV & c.

Quelle est l'option préférable? Je penche vers PNG juste pour le support omniprésent, mais j'aimerais avoir une mise à l'échelle côté client. Quelle est la meilleure solution compte tenu de l'état de la prise en charge du format SVG et HTML5 dans les navigateurs?

Source

2009-11-09 Xailor

+2

4. Flash. Serait cross-navigateur et être très rapide/réactif.De plus, vous pouvez coder certains effets/interactions de fantaisie. –

+0

Environnement sécurisé. Pas d'option de flash. – Xailor

Répondre

4

Vous pourriez faire pire que d'explorer une nouvelle bibliothèque dressant une carte: http://g.raphaeljs.com/

Vous allez pas le croire au premier abord.

Source

2009-11-13 19:49:47 Chasbeen

2

La meilleure option serait SVG ou HTML5 qui retombera sur PNG si les autres ne sont pas disponibles.

Source

2009-11-09 18:50:06 Greg

+1

Une option consiste à générer des fichiers PNG/JPG à partir des fichiers SVG côté serveur pour les clients qui ne prennent pas en charge SVG. –

+0

Si la balise est utilisée cependant, alors une requête PNG par défaut pourrait être utilisée si le SVG n'est pas demandé ... peut-être le meilleur. – Xailor

0

ExplorerCanvas apporte <canvas> soutien à IE. Donc, ce serait un amalgamation de 1 & 2. L'avantage serait que (a) comme plus de navigateurs ajoutent du support pour <canvas>, vous auriez automatiquement les avantages de le supporter et (b) vous obtiendriez la mise à l'échelle avec la taille du navigateur.

Source

2009-11-09 18:53:47

3

SVG est pris en charge par tous les navigateurs modernes. Canvas est pris en charge par tous les navigateurs modernes. Internet Explorer ne prend pas en charge non plus. Une API partielle pour SVG, avec mécanisme de secours pour IE existe dans Raphaël (raphaeljs.com) toile la mise en œuvre partielle pour IE existe dans ExCanvas

Je dirais dire ne est pas une question de « Canvas ou SVG » , mais quelle bibliothèque de haut niveau existe qui répond le mieux à vos besoins.

Source

2009-11-09 20:25:19 Audun

+0

Eh bien, je vais utiliser gnuplot qui peut produire l'un des ci-dessus pour la plupart avec un coup de l'interrupteur terminal de sortie. Je dois mentionner que cela doit être sans plug-in client, je vais devoir lire plus sur ce ExCanvas. – Xailor

4

Je préfère SVG sur HTML5 canvas ou PNG pour les graphiques. Toile et PNG zoom comme bitmaps dans Firefox. (Canvas fournit une API vectorielle, mais il s'agit d'une surface de bitmaps pouvant être dessinée - pas un magasin vectoriel.) SVG effectue un zoom en tant que graphique vectoriel dans Firefox.

Je cours avec la vue zoomée, donc j'apprécie le zoom vectoriel réel.

(Canvas est logique pour les jeux qui ne peuvent pas gérer le succès perf des graphiques en mode non distribués.)

Source

2009-11-19 09:21:10 hsivonen

+0

Il se peut que je doive commencer une autre question, mais comment le SVG pourrait-il évoluer dynamiquement, disons un DIV redimensionné? – Xailor

+0

Dans les navigateurs qui ne disposent pas d'un zoom de pleine page et ne disposent que d'un zoom de texte, vous devez envelopper l'élément SVG dans une div de taille em et faire en sorte que la taille de la boîte SVG soit égale à 100%. Mon souci ci-dessus était d'avoir un zoom vectoriel du graphique avec le zoom de pleine page dans Firefox> = 3.5, et pour que cela fonctionne, le truc em/div n'est pas nécessaire. – hsivonen

 Questions connexes

  • Aucun problème connexe^_^