Canvas vs SVG : Choisir le bon outil pour la tâche

HTML5 Canvas et SVG sont tous deux des technologies HTML5 standardisées que vous pouvez utiliser pour créer des graphiques et des expériences visuelles incroyables. La question que je me pose dans cet article est la suivante : Doit-il y avoir une raison particulière de choisir HTML5 Canvas plutôt que SVG pour votre projet? En d’autres termes, existe-t-il des cas d’utilisation qui préfèrent HTML5 Canvas à SVG?

Tout d’abord, passons en revue quelques explications sur HTML5 Canvas et SVG.

Qu’est-ce que HTML5 Canvas?

Voici comment la spécification WHATWG présente l’élément canvas:

L’élément canvas fournit aux scripts un canevas bitmap dépendant de la résolution, qui peut être utilisé pour rendre des graphiques, des graphiques de jeux, de l’art, ou d’autres images visuelles à la volée.

En d’autres termes, la balise <canvas> expose une surface où vous pouvez créer et manipuler des images rasterisées pixel par pixel à l’aide d’une interface programmable JavaScript.

Voici un exemple de code de base:

Le HTML:

<canvas id="myCanvas" width="800" height="800"></canvas>

Le JavaScript:

const canvas = document.getElementById('myCanvas');
const context = canvas.getContext('2d');
context.fillStyle = '#c00';
context.fillRect(10, 10, 100, 100);

Vous pouvez profiter des méthodes et propriétés de l’API HTML5 Canvas en obtenant une référence à l’objet de contexte 2D. Dans l’exemple ci-dessus, j’ai dessiné un simple carré rouge, de taille 100 x 100 pixels, placé à 10px de la gauche et à 10px du haut de la surface de dessin <canvas> .

Étant dépendant de la résolution, les images que vous créez sur <canvas> peuvent perdre en qualité lorsqu’elles sont agrandies ou affichées sur des écrans Retina.

Le dessin de formes simples n’est que la partie émergée de l’iceberg. L’API Canvas HTML5 vous permet de dessiner des arcs, des chemins, du texte, des dégradés, etc. Vous pouvez également manipuler vos images pixel par pixel. Cela signifie que vous pouvez remplacer une couleur par une autre dans certaines zones des graphiques, vous pouvez animer vos dessins, et même dessiner une vidéo sur le canvas et changer son apparence.

Qu’est-ce que SVG?

SVG signifie Scalable Vector Graphics. Selon la spécification:

SVG est un langage pour décrire des graphiques en deux dimensions. En tant que format autonome ou lorsqu’il est mélangé avec d’autres XML, il utilise la syntaxe XML. Lorsqu’il est mélangé avec HTML5, il utilise la syntaxe HTML5. …

Les dessins SVG peuvent être interactifs et dynamiques. Les animations peuvent être définies et déclenchées soit de manière déclarative (c’est-à-dire en intégrant des éléments d’animation SVG dans le contenu SVG) soit via le scripting.

SVG est un format de fichier XML conçu pour créer des graphiques vectoriels. Étant scalable, il présente l’avantage de vous permettre d’augmenter ou de diminuer une image vectorielle tout en conservant sa netteté et sa haute qualité. (Ceci ne peut pas être fait avec les images générées par HTML5 Canvas.)

Voici le même carré rouge (précédemment créé avec HTML5 Canvas) cette fois dessiné en utilisant SVG :

<svg xmlns="https://www.w3.org/2000/svg" viewbox="0 0 600 600">
  <desc>Red rectangle shape</desc>
  <rect x="10" y="10" width="100" height="100" fill="#c00"  />  
</svg>

Vous pouvez faire avec SVG la plupart des choses que vous pouvez faire avec Canvas — telles que dessiner des formes et des chemins, utiliser des dégradés, des motifs, de l’animation, et ainsi de suite. Cependant, ces deux technologies fonctionnent de manière fondamentalement différente. Contrairement à une image basée sur Canvas, SVG a un DOM, et donc à la fois CSS et JavaScript ont accès à celui-ci. Par exemple, vous pouvez changer l’apparence d’une image SVG en utilisant CSS, animer ses noeuds avec CSS ou JavaScript, faire en sorte que certaines de ses parties réagissent à un événement souris ou clavier de la même manière qu’un `<div>`. Comme cela deviendra plus clair dans les sections suivantes, cette différence joue un rôle significatif lorsque vous devez choisir entre Canvas et SVG pour votre prochain projet.

Mode Implicite et Mode Retenu

Il est crucial de distinguer entre mode implicite et mode retenti. HTML5 Canvas est un exemple du premier, SVG du second.

Le mode implicite signifie que, une fois que votre dessin est sur le canvas, le canvas cesse de le suivre. En d’autres termes, en tant que développeur, vous devez élaborer les commandes pour dessiner des objets, créer et maintenir le modèle ou la scène de ce que la sortie finale devrait être, et spécifier ce qui doit être mis à jour. L’API graphique du navigateur communique simplement vos commandes de dessin au navigateur, qui les exécute ensuite.

SVG utilise l’approche conservée, où vous donnez simplement vos instructions de dessin de ce que vous souhaitez afficher à l’écran, et l’API graphique du navigateur crée un modèle en mémoire ou une scène de la sortie finale et la traduit en commandes de dessin pour votre navigateur.

Étant un système graphique immédiat, Canvas n’a pas de DOM, ou Document Object Model. Avec Canvas, vous dessinez vos pixels et le système les oublie, réduisant ainsi la mémoire supplémentaire nécessaire pour maintenir un modèle interne de votre dessin. Avec SVG, chaque objet que vous dessinez est ajouté au modèle interne du navigateur, ce qui facilite un peu la vie du développeur, mais au prix d’un certain coût en termes de performance.

Sur la base de la distinction entre mode immédiat et mode conservé, ainsi que d’autres caractéristiques spécifiques de Canvas et SVG respectivement, il est possible de définir certains cas où l’utilisation d’une technologie plutôt que l’autre pourrait mieux servir les objectifs de votre projet.

HTML5 Canvas : Avantages et Inconvénients

La spécification HTML5 Canvas recommande clairement que les auteurs ne devraient pas utiliser l’élément <canvas> lorsqu’ils ont d’autres moyens plus appropriés à leur disposition.

Par exemple, pour un élément <header> riche en graphismes, les meilleurs outils sont HTML et CSS, pas <canvas> (et ni SVG, d’ailleurs). Dr Abstract, créateur et fondateur du cadre Zim JS canvas, confirme cette vue en écrivant :

Le DOM et les frameworks DOM sont excellents pour afficher des informations, en particulier des informations textuelles. En comparaison, le canvas est une image. Le texte peut être ajouté au canvas et il peut être rendu réactif, mais le texte ne peut pas être facilement sélectionné ou recherché comme sur le DOM. Les longues pages défilantes de texte ou de texte et d’images sont une excellente utilisation du DOM. Le DOM est idéal pour les sites de médias sociaux, les forums, les achats, et tous les applications d’information auxquelles nous sommes habitués. — “Quand utiliser une bibliothèque ou un framework JavaScript Canvas”

Donc, c’est un exemple clairement défini de quand ne pas utiliser <canvas>. Mais quand est-ce que <canvas> est une bonne option?

Cette tweet de Sarah Drasner résume quelques grands avantages et inconvénients des fonctionnalités et capacités du canvas, ce qui peut nous aider à déterminer certains cas d’utilisation pour cette puissante technologie:

I had this slide in a lot of talks and workshops over the years: pic.twitter.com/4K0C7mNzg2

— Sarah Drasner (@sarah_edo) October 2, 2019

Vous pouvez voir l’image du tweet ici.

Pourquoi HTML5 Canvas peut être excellent

Alvin Wan a benchmarké Canvas et SVG en termes de performance tant en relation avec le nombre d’objets dessinés qu’en relation avec la taille des objets ou du canvas lui-même. Il présente ses résultats comme suit:

En somme, le surcoût de rendu DOM est plus aigu lorsqu’on manipule des centaines, sinon des milliers d’objets ; dans ce scénario, Canvas est clairement le gagnant. Cependant, à la fois le canvas et SVG sont invariants par rapport aux tailles des objets. Étant donné le bilan final, le canvas offre une victoire claire en termes de performance.

En nous basant sur ce que nous savons du Canvas, en particulier son excellente performance pour dessiner de nombreux objets, voici quelques scénarios possibles où il pourrait être approprié, voire préférable à SVG.

Jeux et Art Génératif

Pour graphiques intensifs, jeux hautement interactifs, ainsi que pour art génératif, Canvas est généralement la solution à privilégier.

Ray Tracing

Ray tracing est une technique pour créer des graphiques 3D.

Le ray tracing peut être utilisé pour animer une image en traçant le chemin de la lumière à travers les pixels d’un plan d’image et en simulant les effets de ses rencontres avec des objets virtuels. … Les effets obtenus par le ray tracing, … vont de … créer des images réalistes à partir de graphiques vectoriels simples jusqu’à appliquer des filtres photographiques pour supprimer l’effet yeux rouges. — SVG vs Canvas: comment choisir, Microsoft Docs.

Si vous êtes curieux, voici une application de lancer de rayons en action par Mark Webster.

Cependant, bien qu’HTML5 Canvas soit certainement mieux adapté à la tâche que SVG ne le pourrait jamais, cela ne signifie pas nécessairement que le lancer de rayons est le mieux exécuté sur un élément <canvas>. En fait, la contrainte sur le CPU peut être assez importante, au point que votre navigateur pourrait cesser de répondre.

Dessiner un Nombre Important d’Objets sur une Petite Surface

Un autre exemple est un scénario où votre application doit dessiner un nombre important d’objets sur une surface relativement petite — comme des visualisations de données en temps réel non interactives, telles que des représentations graphiques de modèles météorologiques.

L’image ci-dessus provient de cet article MSDN, qui faisait partie de mes recherches pour cet article.

Remplacement de Pixels dans des Vidéos

Comme démontré dans cet article HTML5 Doctor, un autre exemple où Canvas serait approprié est lors du remplacement de la couleur de fond d’une vidéo par une autre couleur, une autre scène, ou une image.

Ce que HTML5 Canvas n’est pas si bon pour

D’un autre côté, il existe de nombreux cas où Canvas pourrait ne pas être le meilleur choix par rapport à SVG.

Scalabilité

La plupart des scénarios où la scalabilité est un atout seront mieux servis en utilisant des SVG plutôt que Canvas. Des graphiques complexes de haute fidélité tels que les plans de construction, les diagrammes techniques, les organigrammes, les schémas biologiques, etc., en sont des exemples.

Lorsqu’ils sont dessinés en SVG, l’agrandissement des images ou leur impression préserve tous les détails à un haut niveau de qualité. Vous pouvez également générer ces documents à partir d’une base de données, ce qui rend le format XML de SVG très adapté à la tâche.

De plus, ces graphiques sont souvent interactifs. Pensez aux plans de sièges lorsque vous réservez votre billet d’avion en ligne par exemple, ce qui en fait un excellent cas d’utilisation pour un système de graphiques conservés comme SVG.

Cela étant dit, avec l’aide de bibliothèques excellentes comme CreateJS et Zim (qui étend CreateJS), les développeurs peuvent relativement rapidement intégrer des événements souris, des tests de collision, des gestes multitouch, des capacités de glisser-déposer, des contrôles, et plus encore, à leurs créations basées sur Canvas.

Accessibilité

Bien qu’il y ait des mesures à prendre pour rendre un graphique Canvas plus accessible — et une bonne bibliothèque Canvas comme Zim peut être utile ici pour accélérer le processus — Canvas ne brille pas en matière d’accessibilité. Ce que vous dessinez sur la surface du canvas n’est qu’un tas de pixels, qui ne peuvent pas être lus ou interprétés par des technologies d’assistance ou des bots de moteurs de recherche. C’est un autre domaine où SVG est préférable : SVG est simplement du XML, ce qui le rend lisible à la fois par les humains et les machines.

Pas de dépendance envers JavaScript

Si vous ne souhaitez pas utiliser JavaScript dans votre application, alors Canvas n’est pas votre meilleur ami. En fait, la seule façon de travailler avec l’élément <canvas> est via JavaScript. En revanche, vous pouvez dessiner des graphiques SVG à l’aide d’un programme d’édition vectorielle standard comme Adobe Illustrator ou Inkscape, et vous pouvez utiliser du CSS pur pour contrôler leur apparence et réaliser des animations subtiles et des microinteractions captivantes.

Combinaison de HTML5 Canvas et SVG pour des scénarios avancés

Il existe des cas où votre application peut bénéficier des deux mondes en combinant HTML5 Canvas et SVG. Par exemple, un jeu basé sur Canvas pourrait intégrer des sprites à partir d’images SVG générées par un programme d’édition vectorielle, pour tirer parti de la scalabilité et de la taille de téléchargement réduite par rapport à une image PNG. Ou un programme de peinture pourrait avoir son interface utilisateur conçue à l’aide de SVG, avec un élément <canvas> intégré, qui pourrait être utilisé pour dessiner.

Enfin, une bibliothèque puissante comme Paper.js permet de script des graphiques vectoriels au-dessus de HTML5 Canvas, offrant ainsi aux développeurs un moyen pratique de travailler avec ces deux technologies.

Conclusion

Dans cet article, j’ai exploré certaines caractéristiques clés de HTML5 Canvas et SVG pour vous aider à décider quelle technologie pourrait être le mieux adaptée à certaines tâches.

Quelle est la réponse?

Chris Coyier est d’accord avec Benjamin De Cock, comme le dernier tweete:

Une manière extrêmement basique de répondre est « utilisez canvas quand vous ne pouvez pas utiliser SVG » (où « ne pouvez pas » pourrait signifier animer des milliers d’objets, manipuler chaque pixel individuellement, etc.). Pour le dire autrement, SVG devrait être votre choix par défaut, canvas votre plan de secours.

— Benjamin De Cock (@bdc) October 2, 2019

Dr Abstract propose une longue liste de choses qui sont le mieux construites en utilisant Canvas, y compris des logos interactifs et des publicités, des infographies interactives, des applications e-learning, et bien plus encore.

À mon avis, il n’y a pas de règles strictes et fixes quant à savoir quand il est préférable d’utiliser Canvas au lieu de SVG. La distinction entre mode immédiat et mode conservé pointe vers HTML5 Canvas comme étant le vainqueur incontesté en ce qui concerne la construction de choses comme des jeux intensifs en graphismes, et vers SVG comme étant préférable pour des choses comme des images plates, des icônes et des éléments d’interface utilisateur. Cependant, entre les deux, il y a de la place pour que HTML5 Canvas élargisse son champ d’action, en particulier en considérant ce que les différentes bibliothèques puissantes de Canvas pourraient apporter. Non seulement elles facilitent le travail avec les deux technologies dans le même projet graphique, mais elles permettent également que certaines fonctionnalités difficiles à mettre en œuvre dans un projet natif basé sur Canvas — comme les contrôles interactifs et les événements, la réactivité, les fonctionnalités d’accessibilité, et ainsi de suite — soient désormais à portée de la plupart des développeurs, ce qui ouvre la porte à la possibilité d’utilisations toujours plus intéressantes de HTML5 Canvas.

Foire aux questions (FAQs) sur Canvas vs SVG