Quelle est la différence entre SVG et HTML5 Canvas?
Quelles sont les différences entre SVG et HTML5 Canvas? Ils semblent tous les deux faire la même chose pour moi. Fondamentalement, ils dessinent tous les deux des illustrations vectorielles à l'aide de points de coordonnées.
Qu'est-ce que je rate? Quelles sont les principales différences entre SVG et HTML5 Canvas? Pourquoi devrais-je choisir l'un sur l'autre?
Voir Wikipedia: http://en.wikipedia.org/wiki/Canvas_element
SVG est une norme antérieure pour dessiner des formes dans les navigateurs. Cependant, SVG se situe à un niveau fondamentalement supérieur, car chaque forme dessinée est mémorisée en tant qu’objet dans un graphique de scène ou dans un DOM, qui est ensuite restitué sous forme de bitmap. Cela signifie que si les attributs d'un objet SVG sont modifiés, le navigateur peut automatiquement restituer la scène.
Dans l'exemple ci-dessus, une fois le rectangle dessiné, le système l'oublie. Si sa position devait être modifiée, toute la scène devrait être redessinée, y compris les objets éventuellement couverts par le rectangle. Mais dans le cas équivalent SVG, on pourrait simplement changer les attributs de position du rectangle et le navigateur déterminerait comment le repeindre. Il est également possible de peindre une toile en couches, puis de recréer des couches spécifiques.
Les images SVG sont représentées en XML et des scènes complexes peuvent être créées et gérées avec des outils d'édition XML.
Le graphique de scène SVG permet d'associer des gestionnaires d'événements à des objets. Ainsi, un rectangle peut répondre à un événement onClick. Pour obtenir la même fonctionnalité avec canvas, il est nécessaire de faire correspondre manuellement les coordonnées du clic de la souris avec les coordonnées du rectangle dessiné pour déterminer s’il a été cliqué ou non.
Conceptuellement, canvas est un protocole de niveau inférieur sur lequel SVG pourrait être construit. [Citation nécessaire] Cependant, ce n'est pas (normalement) le cas, ce sont des standards indépendants. La situation est compliquée car il existe des bibliothèques de graphes de scènes pour Canvas et SVG offre des fonctionnalités de manipulation de bitmap.
MISE À JOUR: J'utilise SVG en raison de ses capacités en langage de balisage. Il peut être traité par XSLT et peut contenir d'autres balisages dans ses nœuds. De même, je peux tenir SVG dans mon balisage (chimie). Cela me permet de manipuler les attributs SVG (par exemple, le rendu) par des combinaisons de balises. Cela peut être possible dans Canvas mais je suppose que c'est beaucoup plus difficile.
SVG est comme un programme "draw". Le dessin est spécifié en tant qu'instruction de dessin pour chaque forme et toute partie de n'importe quelle forme peut être modifiée. Les dessins sont orientés forme.
Canvas est comme un programme "Paint". Une fois que les pixels ont frappé l'écran, c'est votre dessin. Vous ne pouvez changer de forme qu'en les écrasant par d'autres pixels. Les peintures sont orientées pixel.
Pouvoir modifier les dessins est très important pour certains programmes; par exemple. des applications de dessin, des outils de création de diagrammes, etc. SVG a donc un avantage ici.
Pouvoir contrôler des pixels individuels est important pour certains programmes artistiques.
Obtenir des performances d'animation optimales pour une manipulation de l'utilisateur via les déplacements de la souris est plus facile avec Canvas qu'avec SVG.
Un seul pixel sur l'écran de l'ordinateur consomme souvent 4 octets d'informations et de nos jours, un écran d'ordinateur prend plusieurs mégaoctets. Canvas peut donc être gênant si vous souhaitez laisser l’utilisateur éditer une image, puis le télécharger à nouveau.
En revanche, dessiner une poignée de formes qui couvrent la totalité de l'écran en SVG prend quelques octets, se télécharge rapidement et peut être téléchargé à nouveau facilement avec les mêmes avantages allant dans la même direction que dans l'autre sens. Donc, SVG peut être plus rapide que Canvas.
Google a implémenté Google Maps avec SVG. Cela donne à l'application Web ses performances zippy et son défilement en douceur.
Résumé de haut niveau de Canvas vs. SVG
Toile
- Pixel based (Dynamic .png)
- Un seul élément HTML (élément à inspecter dans l'outil de développement. Seule la balise canvas est visible).
- Modifié par script uniquement
- L'interaction modèle utilisateur/utilisateur est granulaire (x, y)
- Les performances sont meilleures avec une surface plus petite, un plus grand nombre d'objets (> 10k) ou les deux.
[~ # ~] svg [~ # ~]
- Basé sur la forme
- Plusieurs éléments graphiques, qui font partie du DOM
- Modifié par script et CSS
- L'interaction modèle utilisateur/utilisateur est abstraite (rect, chemin)
- Les performances sont meilleures avec un plus petit nombre d'objets (<10k), une plus grande surface ou les deux.
Pour une différence détaillée, lisez http://msdn.Microsoft.com/en-us/library/ie/gg193983 (v = vs.85) .aspx
Il y a une différence entre ce qu'ils sont et ce qu'ils font pour vous.
- SVG est un format de document pour les graphiques vectoriels évolutifs.
- Canvas est une API javascript permettant de dessiner des graphiques vectoriels au format bitmap d’une taille spécifique.
Pour élaborer un peu, sur le format par rapport à l'API:
Avec svg, vous pouvez visualiser, sauvegarder et éditer le fichier dans de nombreux outils. Avec canvas, vous dessinez simplement, et rien n’est retenu sur ce que vous venez de faire à part l’image résultante à l’écran. Vous pouvez animer les deux. SVG gère la mise à jour pour vous en regardant simplement les éléments et les attributs spécifiés, tandis que sur le canevas, vous devez redessiner vous-même chaque image à l'aide de l'API. Vous pouvez redimensionner les deux, mais SVG le fait automatiquement, alors qu'avec le canevas, vous devez réémettre les commandes de dessin pour la taille donnée.
Deux choses qui m'ont le plus frappé pour SVG et Canvas étaient,
Possibilité d'utiliser Canvas sans le DOM, où SVG dépend fortement de DOM et d'autant plus que la complexité augmente les performances. Comme dans la conception de jeux.
L'avantage d'utiliser SVG serait que la résolution reste la même sur toutes les plateformes, ce qui manque dans Canvas.
Beaucoup plus de détails sont fournis sur ce site. http://dev.opera.com/articles/view/svg-or-canvas-choosing-between-the-two/
Cela dépend absolument de vos besoins/exigences.
Si vous souhaitez simplement afficher une image/un graphique sur un écran, l'approche recommandée est canevas. (Exemple: PNG, GIF, BMP etc.).
Si vous souhaitez étendre les fonctionnalités de vos graphiques, par exemple, si vous passez la souris sur le graphique pour zoomer sur certaines zones sans altérer la qualité d'affichage, sélectionnez SVG. (Le bon exemple est AutoCAD, Visio, fichiers GIS).
Si vous souhaitez créer un outil de création de diagramme de flux dynamique avec connecteur de forme, il est préférable de sélectionner SVG plutôt que CANVAS.
Lorsque la taille de l'écran augmente, la zone de travail commence à se dégrader car il faut dessiner plus de pixels.
Lorsque le nombre d'objets augmente à l'écran, SVG commence à
se dégradent à mesure que nous les ajoutons continuellement au DOM.
Consultez également: http://msdn.Microsoft.com/en-us/library/gg193983 (v = vs.85) .aspx
[~ # ~] svg [~ # ~]
Basé sur le cas d'utilisation SVG est utilisé pour les logos, les graphiques, car ses graphiques vectoriels vous permettent de dessiner et de ne pas en tenir compte. Lorsque le port de vue change comme un redimensionnement (ou un zoom), il s’ajuste automatiquement et il n’est pas nécessaire de le redessiner.
Toile
Canvas est un bitmap (ou un raster) réalisé en peignant des pixels sur l’écran. Il est utilisé pour développer des jeux ou une expérience graphique ( https://www.chromeexperiments.com/webgl ) dans une zone donnée, il peint le pixel et le modifie en le redessinant. Comme il s'agit d'un type de raster, nous devons redessiner entièrement à mesure que le port de vue change.
Référence
http://www.sitepoint.com/7-reasons-to-consider-svgs-instead-of-canvas
http://en.wikipedia.org/wiki/WebGL
http://vector-conversions.com/vectorizing/raster_vs_vector.html
SVG est une spécification d'un dessin comme un format de fichier. Un SVG est un document. Vous pouvez échanger des fichiers SVG comme des fichiers HTML. De plus, étant donné que les éléments SVG et HTML partagent la même API que le DOM, il est possible d’utiliser JavaScript pour générer un DOM SVG de la même manière qu’il est possible de créer un DOM HTML. Mais vous n'avez pas besoin de JavaScript pour générer un fichier SVG. Un simple éditeur de texte suffit pour écrire un fichier SVG. Mais vous avez besoin d'au moins une calculatrice pour calculer les coordonnées des formes dans le dessin.
CANVAS n'est qu'une zone de dessin. Il est nécessaire d’utiliser JavaScript pour générer le contenu d’un canevas. Vous ne pouvez pas échanger une toile. Ce n'est pas un document. Et les éléments de la toile ne font pas partie de l'arborescence DOM. Vous ne pouvez pas utiliser l'API DOM pour manipuler le contenu d'un canevas. Au lieu de cela, vous devez utiliser une API de zone de travail dédiée pour dessiner des formes dans la zone de travail.
L'avantage d'un SVG est que vous pouvez échanger le dessin en tant que document. L'avantage de CANVAS est qu'il dispose d'une API JavaScript moins détaillée pour générer le contenu.
Voici un exemple qui montre que vous pouvez obtenir des résultats similaires, mais la façon de le faire en JavaScript est très différente.
// Italic S in SVG
(function () {
const ns='http://www.w3.org/2000/svg';
let s = document.querySelector('svg');
let p = document.createElementNS (ns, 'path');
p.setAttribute ('id', 'arc');
p.setAttribute ('d', 'M 0.9 -0.9 a 0.8,0.4 -10 0,0 -0.9,0.9');
s.appendChild (p);
let u = document.createElementNS (ns, 'use');
u.setAttribute ('href', '#arc');
u.setAttribute ('transform', 'rotate(180)');
s.appendChild (u);
})();
// Italic S in CANVAS
(function () {
let c = document.querySelector('canvas');
let w = c.width = c.clientWidth;
let h = c.height = c.clientHeight;
let x = c.getContext('2d');
x.lineWidth = 0.05 * w;
x.moveTo (w/2, h/2);
x.bezierCurveTo (w*0.02, h*0.4,
w*0.4, -h*0.02,
w*0.95, h*0.05);
x.moveTo (w/2, h/2);
x.bezierCurveTo (w*(1-0.02), h*(1-0.4),
w*(1-0.4), h*(1+0.02),
w*(1-0.95), h*(1-0.05));
x.stroke();
})();svg, canvas {
width: 3em;
height: 3em;
}
svg {
vertical-align: text-top;
stroke: black;
stroke-width: 0.1;
fill: none;
}
canvas {
vertical-align: text-bottom;
}
div {
float: left;
}<div><svg viewBox="-1 -1 2 2"></svg>VG</div>
<div>CANVA<canvas></canvas></div>Comme vous pouvez le constater, le résultat est presque identique, mais le code JavaScript est complètement différent.
SVG est créé avec l'API DOM à l'aide de createElement, setAttribute et appendChild. Tous les graphiques sont dans les chaînes d'attributs. SVG a des primitives plus puissantes. Le CANVAS, par exemple, n’a rien d’équivalent au chemin d’arc SVG. L'exemple CANVAS tente d'émuler l'arc SVG avec une courbe de Bézier. En SVG, vous pouvez réutiliser des éléments pour les transformer. Dans le CANVAS, vous ne pouvez pas réutiliser des éléments. Au lieu de cela, vous devez écrire une fonction JavaScript pour l'appeler deux fois. SVG a un viewBox qui permet d'utiliser des coordonnées normalisées, ce qui simplifie les rotations. Dans CANVAS, vous devez calculer vous-même les coordonnées en vous basant sur clientWidth et clientHeight. Et vous pouvez styler tous les éléments SVG avec CSS. Dans le CANVAS, vous ne pouvez rien style avec CSS. SVG étant un DOM, vous pouvez affecter des gestionnaires d’événements à tous les éléments SVG. Les éléments dans CANVAS n'ont pas de gestionnaire d'événement DOM ni de gestionnaire d'événement DOM.
Par contre, le code CANVAS est beaucoup plus facile à lire. Vous n'avez pas besoin de vous soucier des espaces de noms XML. Et vous pouvez appeler directement les fonctions graphiques, car vous n'avez pas besoin de construire un DOM.
La leçon est claire: si vous souhaitez rapidement dessiner des graphiques, utilisez CANVAS. Si vous avez besoin de partager les graphiques, de les styler avec CSS ou si vous souhaitez utiliser des gestionnaires d'événements DOM dans vos graphiques, créez un fichier SVG.
ajoutant aux points ci-dessus:
SVG est léger pour le transfert sur le Web par rapport aux formats JPEG, GIF, etc., et s’adapte extrêmement au redimensionnement sans perdre en qualité.