SVG ou toile?

SVG et canvas sont des technologies que vous pouvez utiliser pour dessiner quelque chose sur des pages Web. Par conséquent, ils doivent être comparés et déterminés quand utiliser SVG et quand utiliser canvas. Même une compréhension très superficielle de l'essence de ces technologies vous permet de faire un choix très éclairé. En fait, voici deux situations typiques, dans l'une où vous devriez préférer SVG, et dans l'autre - canvas:

• Besoin de dessiner une petite icône? C'est certainement le territoire de SVG.
• Besoin de créer un jeu par navigateur interactif? Ici, certainement, nous avons besoin de la technologie canvas.

L'auteur de l'article, dont nous publions aujourd'hui la traduction, dit qu'il sait qu'il n'a pas encore révélé les raisons de ce choix. Mais il espère que ces raisons deviendront complètement évidentes après avoir partagé quelques détails sur SVG et la toile.

SVG - graphiques vectoriels décrits de manière déclarative

Si vous savez que vous devez placer une image vectorielle sur une page Web, cela signifie que SVG est fait pour vous. Les images vectorielles sont généralement plus belles que les images raster similaires stockées, par exemple, dans des fichiers JPG. De plus, les fichiers d'images vectorielles sont généralement plus petits que les fichiers d'images raster.

Le résultat est que SVG est très souvent utilisé pour dessiner des logos . Le code décrivant de telles images peut être intégré directement dans HTML. Cela ressemble à un ensemble d'instructions déclaratives:

<svg viewBox="0 0 100 100">   <circle cx="50" cy="50" r="50" /> </svg> 

Si vous avez besoin d'images pour être flexibles et réactives, alors SVG est votre choix.

Canvas - API JavaScript pour le dessin

Pour créer des images de canevas dans le code HTML de la page, placez l' <canvas> , après quoi, en utilisant JavaScript, ils "dessinent" sur cet élément. En d'autres termes, le programmeur donne au navigateur des instructions sur la façon dont il doit dessiner quelque chose (cette approche est plus proche de l'impératif que du déclaratif). Voici à quoi ça ressemble:

 <canvas id="myCanvas" width="578" height="200"></canvas> <script>  var canvas = document.getElementById('myCanvas');  var context = canvas.getContext('2d');  var centerX = canvas.width / 2;  var centerY = canvas.height / 2;  var radius = 70;  context.beginPath();  context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);  context.fillStyle = 'green';  context.fill(); </script> 

Les images SVG sont stockées dans le DOM

Si vous connaissez les événements DOM, tels que click et mouseDown , sachez que ces événements peuvent également être utilisés lorsque vous travaillez avec SVG. À cet égard, l'élément SVG <circle> n'est pas très différent de l'élément HTML <div> .

 <svg viewBox="0 0 100 100">   <circle cx="50" cy="50" r="50" />   <script>    document.querySelector('circle').addEventListener('click', e => {      e.target.style.fill = "red";    });  </script> </svg> 

SVG est meilleur pour rendre le contenu de la page accessible

L'élément canvas peut être assigné à son alternative textuelle:

 <canvas aria-label="Hello ARIA World" role="img"></canvas> 

La même chose peut être faite pour l'élément SVG. Mais, étant donné que les images SVG et leurs mécanismes internes sont stockés directement dans le DOM, SVG est généralement considéré comme une technologie utilisée dans les cas où ils créent des projets accessibles aux personnes handicapées.

En d'autres termes, vous pouvez créer une image SVG, avec des éléments dont les technologies d'assistance peuvent fonctionner pour aider leurs utilisateurs à naviguer sur les pages Web.

Les données texte qui font partie des images sont également le cas lorsqu'il est préférable d'utiliser SVG. SVG a même un élément spécial - <text> . Il vous permet d'afficher des caractères clairs des textes, il est perçu par la technologie d'assistance . Si vous utilisez l'élément canvas pour visualiser des textes, ces textes sont souvent mal affichés et sont flous.

La toile est meilleure pour travailler avec des images pixel individuelles

Ci-dessous, nous donnons plusieurs tableaux compilés sur la base de la comparaison de SVG et de toile par divers experts. Dans une de ces comparaisons, réalisée par Sarah Drasner, il est dit qu'en utilisant la toile, vous pouvez faire danser les pixels. Ceci, bien sûr, est une blague, mais, essentiellement, la façon dont c'est.

Canvas est idéal pour créer des images interactives contenant de nombreux détails complexes, des transitions de couleurs dégradées et plus encore. Pour cette raison, canvas est utilisé dans le développement d'un nombre beaucoup plus grand de jeux par navigateur que SVG. Bien sûr, vous pouvez toujours trouver des écarts par rapport aux tendances générales. Voici , par exemple, un jeu dont les graphiques sont créés à l'aide d'outils SVG.


Jeu SVG

Veuillez noter que sa composante graphique est très simple et semble assez «vectorielle».

Les images CSS peuvent être influencées à l'aide de CSS

Nous avons déjà dit que les éléments SVG sont stockés dans le DOM et que l'accès à ces éléments peut être obtenu à partir du code JavaScript. Dans le cas de CSS, cette histoire se répète:

 <svg viewBox="0 0 100 100">   <circle cx="50" cy="50" r="50" />   <style>    circle { fill: blue; }  </style> </svg> 

Veuillez noter que dans les exemples, les blocs <script> et <style> sont placés à l'intérieur du bloc <svg> . C'est parfaitement normal. Mais si nous prenons en compte le fait que l'élément SVG est en code HTML normal, il s'avère que les blocs internes <script> et <style> peuvent en être complètement supprimés. De plus, si nécessaire, vous pouvez travailler sur l'élément SVG à l'aide de styles et de scripts externes.

Voici beaucoup d'informations sur les propriétés des éléments SVG et CSS. La chose la plus importante ici est que tout ce qui peut être fait avec des éléments de page en utilisant CSS s'applique à SVG. Par exemple, cela utilise la pseudo- :hover et les éléments d'animation.

Voici un exemple d'animation d'un élément <circle> avec CSS.

 <svg viewBox="0 0 100 100">   <circle cx="50" cy="50" r="50" />   <style>    circle { fill: blue; animation: pulse 2s alternate infinite; }    @keyframes pulse {      100% {        r: 30;      }    }  </style>   <script>    document.querySelector('circle').addEventListener('click', e => {      e.target.style.fill = "red";    });  </script> </svg> 

Animations d'éléments CSS à l'aide de CSS

Combinaison de SVG et de toile

D'un point de vue technique, les technologies canvas et SVG ne peuvent pas être appelées mutuellement exclusives. Par exemple, les images SVG peuvent être affichées dans les éléments <canvas> . En même temps, comme on peut le voir dans cet exemple, les images SVG affichées dans l'élément <canvas> peuvent très bien rester très claires et de haute qualité.


Sortie de l'image SVG vers l'élément <canvas>

Voyons maintenant quelques tableaux qui résument les comparaisons entre SVG et canvas réalisées par divers experts.

Comparaison de SVG et de toile

UthRuth John

Voici le projet sur la base duquel le tableau suivant est construit.

▍ Sarah Drasner

Le tableau suivant est basé sur ce tweet.

▍Shirley Wu

Le tableau suivant est basé sur ce tweet.

Beaucoup de gens pensent que la toile est meilleure pour travailler avec un grand nombre d'objets (selon Shirley - quand il y en a plus de 1000).

SVG est le choix standard. La toile est un repli

Voici la réponse à mon tweet sur les options d'utilisation de SVG et de canvas. L'auteur de cette réponse dit que le choix entre SVG et canvas doit se faire comme ceci: "Utilisez canvas lorsque vous ne pouvez pas utiliser SVG." Parmi les situations dans lesquelles il n'est pas possible d'utiliser normalement SVG, nous pouvons mentionner celles dans lesquelles vous devez animer des milliers d'objets, travailler avec chaque pixel spécifique de l'image, etc.

Résumé

Au début de cet article, nous avons présenté deux utilisations typiques du SVG et du canvas. Nous y reviendrons et développerons leurs descriptions en tenant compte de ce que nous venons d'apprendre.

• Besoin de dessiner une petite icône? C'est certainement le territoire de SVG. Le fait est que la description de l'image SVG est stockée dans le DOM, car le résultat de SVG est idéal pour dessiner quelque chose comme une icône sur un bouton. Inutile de dire que les images SVG peuvent être influencées par CSS et qu'en utilisant JavaScript, vous pouvez connecter des gestionnaires d'événements à leurs éléments.
• Besoin de créer un jeu par navigateur interactif? Ici, certainement, nous avons besoin de la technologie canvas. Le jeu par navigateur, à coup sûr, contiendra de nombreux éléments mobiles et des animations complexes. Des éléments du monde du jeu vont interagir les uns avec les autres, ce qui signifie certaines exigences de performances. Canvas est idéal pour résoudre de tels problèmes.

Il convient de noter qu'entre ces deux options extrêmes, il existe une grande zone intermédiaire. Par exemple, en tant que développeur et concepteur Web, je pense que SVG est plus pratique d'un point de vue pratique. Je ne sais même pas si je ferais un vrai projet en utilisant canvas. C'est peut-être en partie parce que je ne suis pas assez familier avec la toile. Et je connais assez bien SVG. J'ai étudié cette technologie, écrit un livre à ce sujet. Par conséquent, j'en sais assez sur SVG pour que cette technologie puisse m'aider à faire ce dont j'ai besoin.

Chers lecteurs! Dans quelles situations utilisez-vous SVG et dans quelle toile?