HTML 5 Canvas vs. SVG

Canvas et SVG permettent tous deux de créer des graphiques dans le navigateur, mais ils sont fondamentalement différents.

SVG

SVG est un langage utilisé pour décrire des graphiques 2D en XML.

SVG est basé sur XML, ce qui signifie que chaque élément du SVG DOM est disponible. Vous pouvez attacher un gestionnaire d'événements JavaScript à un élément.

Dans SVG, chaque graphique dessiné est considéré comme un objet. Si les attributs de l'objet SVG changent, le navigateur peut automatiquement redessiner le graphique.

Canvas

Canvas dessine des graphiques 2D via JavaScript.

Canvas est rendu pixel par pixel.

Dans canvas, une fois que les graphiques ont été dessinés, ils ne reçoivent plus l'attention du navigateur. Si leur position change, l'ensemble de la scène doit être redessiné, y compris tout objet peut-être couvert par les graphiques.

Comparaison entre Canvas et SVG

Le tableau suivant présente quelques différences entre canvas et SVG.

Canvas

  • Dépendant de la résolution
  • Ne prend pas en charge les gestionnaires d'événements
  • Capacité de rendu de texte faible
  • Peut enregistrer l'image de résultat au format .png ou .jpg
  • Le plus adapté aux jeux graphiques intensifs, où de nombreux objets sont redessinés fréquemment

SVG

  • Indépendant de la résolution
  • Support des gestionnaires d'événements
  • Le plus adapté aux applications avec de grandes zones de rendu (comme Google Maps)
  • Complexité élevée ralentit la vitesse de rendu (toute application qui surutilise le DOM ne sera pas rapide)
  • Non adapté aux applications de jeu