Des graphiques dans du HTML : svg ou canvas ?

Alors que j'ai besoin de développer un petit outil simple en javascript pour dessiner des graphiques, j'hésite encore entre les deux technologies actuellement disponibles : SVG et canvas...

Chacune de ces technologies à ses propres avantages et inconvénients ; j'aurai plutôt tendance à me tourner vers le svg, puisqu'il s'agit de xml, et que l'on peut donc le manipuler ou interagir avec les différents éléments dans un environnement DOM. Canvas n'est pas pour autant à négliger, c'est pourquoi j'ai décidé de développer en parallèle 2 objets permettant de créer des graphes avec des API similaires, l'un produisant du svg, l'autre du canvas. C'est loin d'être terminé, mais c'est en fonction des besoins et des exigences qui apparaîtront au fur et à mesure que je pourrais finalement trancher entre les deux technologies. Je commence d'ailleurs déjà à passer plus de temps sur l'implémentation svg...

Exemple de graphe simple en SVG.
Exemple de graphe simple en canvas.
require(['rnb/ui/graphic/graph'], function (graph) {
    var cfg = {
        width: 460,
        height: 200,
        bounds: "30",
        y: {
            name: "rate",
            legend: { label: "Notes", coords: [5,5] },
            min: 0,
            max: 5,
            step: 1,
            grid: true
        },
        x: {
            name: "num",
            legend: { label: "Episodes" }
        },
        datas: [
            { num: "A", rate: 4.5 }, 
            { num: "B", rate: 4 },
            { num: "C", rate: 3 },
            { num: "D", rate: 5 },
            { num: "E", rate: 3 },
            { num: "F", rate: 2 }
        ]
    };
    var svg = new graph.Svg(cfg);
    var canvas = new graph.Canvas(cfg);
});
Code pour la librairie javascript rnb-js permettant la création de deux graphes, l'un en svg, l'autre en canvas.

Développer de tels outils est avant tout un exercice de familiarisation à ces deux technologies ; pour des projets complexes, des librairies javascript toutes prêtes existent déjà, comme d3js, Raphael ou Three.js.

Canvas. Mozilla Developer Network,

SVG. Mozilla Developer Network,

SUCAN, Mihai. SVG or Canvas ? Сhoosing between the two. dev.opera,