5568 sujets

Sémantique web et HTML

[Résolu] SVG ou Canvas ?

Bonjour,

je suis en train de développer une petite application web en pur javascript, pour m'amuser un petit peu avec les toutes dernières technos du Web.
Dans cette appli, j'aurai besoin de faire des graphiques (des courbes, et peut-être des camemberts).
Mais voilà, j'ai un gros dilemme, je ne sais pas s'il vaut mieux utiliser SVG ou Canvas.

Etant plutôt égoïste, mes critères sont surtout la facilité de coder et la beauté du code, mais je m'en fiche du support dans les navigateurs non modernes.

J'ai un petit penchant pour SVG pour son coté balises, j'ai l'impression que ça a plus de sens, mais de l'autre, Canvas est plus récent, donc ça doit être marrant aussi.

Bref, vous feriez quoi à ma place ?

Merci Smiley biggrin
Modifié par fabien_m (19 Apr 2011 - 15:57)
fabien_m a écrit :
Bref, vous feriez quoi à ma place ?

Je me renseignerais sur les caractéristiques de chacune de ces deux technos. Dans certains cas utiliser Canvas sera pertinent, et dans d'autres SVG sera plus adapté.
<canvas> permet de rendre une image sous forme d'un bitmap ; il est toujours possible de dessiner par-dessus, d'appliquer des filtres sur l'image, mais les éléments créés ne sont plus accessibles donc non modifiables. Le rendu est très rapide. Seuls les navigateurs récents implémentent cette technique (Firefox, Safari, Chrome, Opera, IE9).
-http://apps.mathieu-rodic.com/Beautiful/Mandelbrot-Fractal


<svg> permet le dessin vectoriel ; il est possible d'utiliser la librairie JavaScript RaphaëlJS qui offre une interopérabilité (dessin en SVG pour les navigateurs W3C, en VML pour IE). Les éléments créés sont ensuite manipulables comme des éléments DOM avec JavaScript, ce qui permet de les animer, changer leur couleurs, faire de la gestion d’évènements (click...), etc. Pour cette raison, le rendu est plus lent qu'avec Canvas.
-http://apps.mathieu-rodic.com/Beautiful/Clock
-http://apps.mathieu-rodic.com/Beautiful/Growing-Tree-Animation
Modifié par Laurie-Anne (19 Apr 2011 - 10:17)
Merci pour vos réponses.

@fvsch : je me suis renseigné quand même un minimum avant de poser la question. Mais sur plusieurs sites, il y avait marqué que les 2 étaient adaptés pour faire des graphiques.

Au final, j'ai choisi SVG, parce que j'aime bien le fait de pouvoir jouer avec le CSS et peut-être les animations bientôt.

Je n'ai pas utilisé de librairies, mais ça se code très rapidement quand même Smiley smile
Pour la simple réalisation de courbe ou autre graphes je ne me serait jamais embeter à faire SVG ou Canvas, pour moi leur utilité sont plus dans l'animation.

Il y a pas mal de tuto sympa pour faire des courbes, histogrammes et camembert en CSS3 et le rendu est vraiment pas mal Smiley smile

j'ai fortement apprécié la rapidité d'écriture et d'apprentissage.
Autant les histogrammes en CSS3, je connais et j'ai déjà pratiqué, autant les courbes et camemberts, je trouve que ça ressemble à du bricolage plus qu'à autre chose.

En plus, ce ne sont pas des graphs fixes, mais ils sont générés via javascript alors j'ai peur que ça devienne vite compliqué comme code.

SVG est plutôt rapide à apprendre au final. J'ai du mettre une soirée pour avoir un truc qui marche à peu près. Le plus long a été de trouver la méthode createElementNS() sans quoi les éléments SVG n'était pas considérés comme SVG.
Voici une copie d'écran de l'état actuel de mon appli. C'est plutôt basique, mais ça me convient pour le moment. Il reste quand même un peu de boulot, axe horizontal notamment.

L'affichage se fait instantanément après avoir chargé les données, malgré qu'il y ait pas mal de calculs à faire. (d'ailleurs, si quelqu'un sait faire du sous échantillonnage proprement dans la salle, je suis preneur)

upload/14590-Capturedec.png

Le cercle rouge correspond au point survolé par la souris. L'affichage se fait par un simple :hover en css Smiley smile

Je ne connais pas encore trop les filtres. Je ne vois pas ce que je pourrais faire avec. Des idées ?
Sujet clos
Aller à