Canvas vs SVG: Choisir le bon outil pour le travail

Canvas HTML5 vs SVG: lequel choisir?

HTML5 Canvas et SVG sont tous deux basés sur des technologies HTML5 standard qui peuvent être utilisées pour créer des graphiques et des effets visuels étonnants. Cet article traite d'une question clé: quelle technologie est la plus adaptée à choisir dans le projet? En d'autres termes, dans quels cas êtes-vous plus enclin à utiliser la toile HTML5 que SVG?

Tout d'abord, introduisons brièvement le toile HTML5 et SVG.

Points clés

• HTML5 Canvas et SVG sont tous deux des technologies HTML5 utilisées pour créer des expériences graphiques et visuelles. Canvas repose sur la résolution et est utilisé pour rendre dynamiquement des graphiques, des graphiques de jeux, des œuvres ou d'autres images visuelles. SVG (Scalable Vector Graphics) est un format de fichier XML qui maintient sa qualité lors de la mise à l'échelle.
• toile HTML5 et SVG fonctionnent complètement différemment. Canvas est un système graphique instantané qui est jeté une fois les pixels dessinés. SVG adopte un mode de rétention, où chaque objet dessiné est ajouté au modèle interne du navigateur, ce qui est plus facile pour les développeurs mais peut affecter les performances.
• HTML5 Le canevas est idéal pour les jeux très interactifs, très interactifs, l'art génératif et les scènes où il existe de nombreux objets qui doivent être dessinés sur de petites surfaces. Cependant, lorsqu'il est zoom sur ou affiché sur un écran de rétine, sa qualité peut baisser.
• SVG est préférable pour les scénarios qui nécessitent une évolutivité (tels que la haute fidélité, des graphiques complexes tels que les dessins architecturaux et d'ingénierie, les dessins biologiques et les dessins organisationnels). SVG est également meilleur en termes d'accessibilité, car il peut être lu par les humains et les machines.
• Le toile HTML5 et le SVG peuvent être combinés pour des scénarios avancés. Par exemple, un jeu basé sur Canvas peut utiliser une image SVG en tant que spritz, ou un programme de dessin peut utiliser SVG pour concevoir son interface utilisateur et intégrer des éléments de toile pour le dessin.

Qu'est-ce que la toile HTML5?

La spécification whatwg introduit l'élément de toile comme suit:

L'élément

Canvas fournit un canevas Bitmap dépendant de la résolution pour que le script rende des graphiques, des graphiques de jeux, des œuvres d'art ou d'autres images visuelles à la volée.

En d'autres termes, la balise <canvas></canvas> fournit une surface où vous pouvez créer et manipuler des images raster pixels par pixel à l'aide d'une interface programmable javascript.

Ceci est un exemple de code de base:

(L'exemple de codepen doit être intégré ici pour montrer la forme de canevas de base)

En raison de la dépendance de la résolution, les images créées sur <canvas></canvas> peuvent dégrader la qualité lors du zoom avant ou affiché sur un écran de rétine.

Dessin de formes simples n'est que la pointe de l'iceberg. L'API HTML5 Canvas vous permet de dessiner des arcs, des chemins, du texte, des gradients, etc. Vous pouvez également utiliser des images Pixel par pixel. Cela signifie que vous pouvez remplacer les couleurs dans certaines zones des graphiques, animer vos dessins et même dessiner la vidéo sur la toile et changer son apparence.

Qu'est-ce que SVG?

SVG représente les graphiques vectoriels évolutifs. Selon la spécification:

SVG est un langage utilisé pour décrire les graphiques bidimensionnels. Il utilise la syntaxe XML lorsqu'il est utilisé comme format autonome ou lorsqu'il est mélangé avec d'autres XML. Lorsqu'il est mélangé avec HTML5, il utilise la syntaxe HTML5 ...

Les dessins

SVG peuvent être interactifs et dynamiques. L'animation peut être définie et déclenchée par des moyens déclaratifs (c'est-à-dire en intégrant des éléments d'animation SVG dans le contenu SVG) ou via des scripts.

SVG est un format de fichier XML utilisé pour créer des graphiques vectoriels. Les propriétés évolutives lui permettent d'augmenter ou de diminuer les images vectorielles tout en maintenant la clarté et la haute qualité. (L'image générée du canevas HTML5 ne peut pas le faire).

Ce qui suit est le même carré rouge dessiné en utilisant SVG (créé précédemment à l'aide de toile HTML5):

(L'exemple de codepen doit être intégré ici pour afficher la forme SVG de base)

Vous pouvez utiliser SVG pour effectuer la plupart des opérations qui peuvent être effectuées avec du toile, telles que des formes de dessin et des chemins, des gradients, des motifs, des animations, etc. Cependant, les deux technologies travaillent fondamentalement différemment. Contrairement aux graphiques basés sur Canvas, SVG a un DOM, donc il peut être accessible par CSS et JavaScript. Par exemple, vous pouvez utiliser CSS pour modifier l'apparence d'un graphique SVG, animer ses nœuds à l'aide de CSS ou JavaScript, afin que toute pièce réponde aux événements de souris ou de clavier comme

. Comme on le verra plus clairement dans les sections suivantes, cette différence joue un rôle important lorsque vous devez choisir entre Canvas et SVG dans votre prochain projet.

Mode en temps réel et mode de rétention

Il est crucial de distinguer le mode en temps réel et le mode de rétention. HTML5 Canvas est un exemple du premier et SVG est un exemple de la seconde.

Le mode en temps réel signifie qu'une fois que votre dessin est sur la toile, la toile cesse de le suivre. En d'autres termes, en tant que développeur, vous devez formuler des commandes pour dessiner des objets, créer et maintenir le modèle ou le scénario de ce à quoi devrait ressembler la sortie finale et spécifier ce qui doit être mis à jour. L'API graphique du navigateur transmet simplement vos commandes de dessin au navigateur et le navigateur exécute ces commandes.

SVG utilise le mode de rétention, vous émettez simplement une instruction de dessin pour ce que vous souhaitez afficher à l'écran, et l'API graphique du navigateur créera le modèle ou la scène en mémoire de sortie finale et le convertira en commande de dessin du navigateur.

En tant que système graphique instantané, Canvas n'a pas de modèle d'objet DOM ou document. Avec la toile, vous dessinez des pixels et le système les oublie tous, réduisant la mémoire supplémentaire requise pour maintenir le modèle interne du dessin. Avec SVG, chaque objet que vous dessinez est ajouté au modèle interne du navigateur, ce qui vous facilite la vie en tant que développeur, mais paie un prix en matière de performance.

En fonction de la différence entre le mode en temps réel et le mode de rétention, ainsi que d'autres fonctionnalités spécifiques de Canvas et SVG chacune, certaines situations où l'utilisation d'une technologie plutôt qu'une autre pourrait mieux servir les objectifs du projet.

toile html5: avant et inconvénient

La spécification du canevas HTML5 recommande explicitement que les auteurs ne devraient pas utiliser l'élément

lorsque d'autres méthodes plus appropriées sont disponibles. <canvas></canvas>

Par exemple, pour les éléments graphiquement riches, les meilleurs outils sont HTML et CSS, pas

(en passant, SVG ne l'est pas non plus). Cette vue a été confirmée par le Dr Résumé, le créateur et fondateur de Zim JS Canvas Framework, qui a écrit: <canvas></canvas>

Les cadres

DOM et DOM sont bons pour afficher des informations, en particulier les informations textuelles. En revanche, la toile est une image. Le texte peut être ajouté à la toile et peut le rendre réactif, mais le texte ne peut pas être sélectionné ou recherché aussi facilement que sur le DOM. De longs pages de texte à défilement ou des pages de texte et d'image sont une grande utilité pour DOM. Dom est parfait pour les sites de médias sociaux, les forums, les achats et toutes les applications d'information que nous avons l'habitude d'utiliser. —— "Quand utiliser la bibliothèque ou le framework JavaScript Canvas"

Voici donc un exemple clair du moment de ne pas utiliser

. Mais quand <canvas></canvas> est-il un bon choix? <canvas></canvas>

(La capture d'écran de Tweet de Sarah Drasner doit être intégrée ici)

À quoi est-ce que la toile est bonne?

Alvin Wan a comparé les performances de Canvas et SVG en fonction du nombre d'objets dessinés et de la taille de l'objet ou de la toile elle-même. Il a résumé les résultats comme suit:

Quoi qu'il en soit, le rendu de Dom est plus évident lorsqu'il s'agit de centaines ou même de milliers d'objets; Cependant, ni la toile ni le SVG ne sont affectées par la taille de l'objet. Compte tenu des statistiques finales, la toile offre un avantage clair en termes de performances.

Sur la base de ce que nous savons de la toile, en particulier de ses excellentes performances pour attirer un grand nombre d'objets, voici quelques scénarios qui peuvent être appropriés ou encore meilleurs que SVG.

jeu et art génératif

Canvas est généralement le meilleur choix pour les jeux graphiques à forte intensité de graphique et très interactifs et l'art génératif.

Ray Traçage Le traçage des rayons est une technique pour créer des graphiques 3D.

Le traçage des rayons peut être utilisé pour remplir une image en suivant les chemins de rayons des pixels dans le plan de l'image et en simulant sa rencontre avec un objet virtuel ... les effets réalisés par le traçage des rayons ... variez de ... Création de réalistes Les images des graphiques vectoriels simples appliquent un filtre de type photo pour éliminer les yeux rouges. —— SVG et Canvas: Comment choisir, Microsoft Docs.

Si vous êtes curieux, c'est l'application Ray Tracing que Mark Webster exécute.

Cependant, bien que HTML5 Canvas soit certainement plus adapté à cette tâche que SVG, cela ne signifie pas nécessairement que le traçage des rayons est mieux effectué sur l'élément

. En fait, la pression sur le CPU peut être si élevée que le navigateur peut cesser de répondre.

Dessinez un grand nombre d'objets sur de petites surfaces

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

Remplacement des pixels dans la vidéo

Comme le montre cet article de Doctor HTML5, un autre exemple adapté à l'utilisation du toile consiste à remplacer la couleur d'arrière-plan vidéo par une couleur différente, une autre scène ou une image.

Qu'est-ce que la toile HTML5 n'est pas bonne?

En revanche, dans de nombreux cas, la toile peut ne pas être le meilleur choix par rapport à SVG.

Évolutivité

La plupart des scénarios où l'évolutivité est un avantage utilisera mieux SVG au lieu de la toile. La haute fidélité, les graphiques complexes, tels que les dessins architecturaux et d'ingénierie, les dessins organisationnels, les dessins biologiques, etc., sont des exemples de cette situation.

Lors du dessin avec SVG, l'agrandissement de l'image ou l'impression, l'image conservera tous les détails pour atteindre un niveau de qualité très élevé. Vous pouvez également générer ces documents à partir de la base de données, ce qui rend le format XML de SVG parfait pour cette tâche.

De plus, ces graphiques sont généralement interactifs. Par exemple, lorsque vous réservez vos billets en ligne, considérez la carte des sièges, ce qui en fait un excellent cas d'utilisation pour les systèmes graphiques conservés comme SVG.

c'est-à-dire que, avec d'excellentes bibliothèques comme CreateJS et Zim (étendue CreateJS), les développeurs peuvent intégrer leurs événements de souris, faire des tests, des gestes multi-touchs, des fonctions de glisser-déposer, de contrôles et plus rapidement dans la création en fonction de la Toile.

Accessibilité

Bien que vous puissiez prendre des mesures pour améliorer l'accessibilité des graphiques de toile - une bonne bibliothèque en toile (comme Zim) peut vous aider à accélérer le processus - la toile n'est pas excellente en ce qui concerne l'accessibilité. Ce que vous dessinez sur la surface de la toile n'est qu'un tas de pixels que la technologie d'assistance ou les robots de moteur de recherche ne peut pas lire ou interpréter. Il s'agit d'un autre domaine préférable pour SVG: SVG n'est que du XML, ce qui permet à la fois aux humains et aux machines de le lire.

ne dépend pas de javascript

Si vous ne souhaitez pas utiliser JavaScript dans votre application, Canvas n'est pas votre meilleur choix. En fait, la seule façon dont vous utilisez des éléments

est d'utiliser JavaScript. Au lieu de cela, vous pouvez dessiner des graphiques SVG à l'aide de programmes d'édition vectoriels standard comme Adobe Illustrator ou Inkscape, et vous pouvez utiliser des CSS purs pour contrôler son apparence et effectuer des animations et des micro-interactions subtiles convaincantes. <canvas></canvas>

combinant la toile HTML5 et SVG pour les scénarios avancés

Dans certains cas, votre application peut tirer le meilleur parti des deux mondes en combinant le toile HTML5 et SVG. Par exemple, les jeux basés sur Canvas peuvent utiliser des images SVG générées par les programmes d'édition vectoriels comme sprites pour profiter de leur évolutivité et une taille de téléchargement plus petite par rapport aux images PNG. Alternativement, un programme de dessin peut concevoir son interface utilisateur à l'aide des éléments SVG et intégrés <canvas></canvas> pour le dessin.

Enfin, une bibliothèque puissante comme Paper.js vous permet d'écrire des scripts graphiques vectoriels en plus de la toile HTML5, offrant aux développeurs un moyen pratique d'utiliser les deux technologies en même temps.

Conclusion

Dans cet article, j'explore certaines des principales caractéristiques de HTML5 Canvas et SVG pour vous aider à déterminer quelle technologie convient le mieux à une tâche particulière.

Quelle est la réponse?

Chris Coyier est d'accord avec Benjamin de Cock, qui a tweeté:

Une façon extrêmement fondamentale de répondre à cette question est "Utiliser Canvas lorsque vous ne pouvez pas utiliser SVG" (où "ne peut pas" peut signifier l'animation de milliers d'objets, manipuler chaque pixel individuellement, etc.). En d'autres termes, SVG devrait être votre choix par défaut et Canvas est votre plan de sauvegarde.

- Benjamin de Cock (@BDC) 2 octobre 2019

DR Résumé fournit une liste de nombreuses meilleures choses à construire avec la toile, y compris les logos interactifs et la publicité, les infographies interactives, les applications d'apprentissage en ligne et plus encore.

À mon avis, il n'y a pas de règles strictes et rapides lorsqu'il est préférable d'utiliser Canvas au lieu de SVG. La différence entre le mode en temps réel et le mode de rétention montre que la toile HTML5 est le gagnant incontesté lorsqu'il s'agit de créer des jeux à forte intensité graphique, et SVG est préférable pour les images plates, les icônes, les éléments d'interface utilisateur, etc. Cependant, entre les deux, la toile HTML5 a également de la place pour étendre sa portée d'application, en particulier compte tenu de ce que peut fournir une variété de bibliothèques de toiles puissantes. Non seulement ils facilitent l'utilisation des deux technologies en même temps dans le même travail graphique, mais ils réalisent également des fonctionnalités difficiles dans les projets natifs de toile (tels que les contrôles et événements interactifs, la réactivité, les fonctionnalités d'accessibilité, etc.) Pour cela, ouvre la porte à des utilisations plus intéressantes de la toile HTML5, qui est utilisée par la plupart des développeurs.

FAQ pour toile vs svg

(La partie FAQ doit être incluse ici, réécrite en fonction du contenu d'origine, le garder concis et clair, et utiliser une expression du langage plus naturel.)

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!