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 me faire de même. Fondamentalement, ils dessinent tous les deux des illustrations vectorielles en utilisant des 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 plutôt que l'autre?

Voir Wikipedia: http://en.wikipedia.org/wiki/Canvas_element

SVG est une ancienne norme pour dessiner des formes dans les navigateurs. Cependant, SVG est à un niveau fondamentalement plus élevé car chaque forme dessinée est mémorisée comme un objet dans un graphe de scène ou DOM, qui est ensuite rendu en une carte binaire. 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 fait qu'il ait été dessiné est oublié par le système. Si sa position devait être modifiée, la scène entière devrait être redessinée, y compris tous les objets qui auraient pu être recouverts par le rectangle. Mais dans le cas SVG équivalent, 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 conservées avec des outils d'édition XML.

Le graphe de scène SVG permet aux gestionnaires d'événements d'être associés à des objets, de sorte qu'un rectangle peut répondre à un événement onClick. Pour obtenir la même fonctionnalité avec le canevas, il faut faire correspondre manuellement les coordonnées du clic de souris avec les coordonnées du rectangle dessiné pour déterminer s'il a été cliqué.

Conceptuellement, canevas 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 normes indépendantes. La situation est compliquée car il existe des bibliothèques de graphes de scène pour Canvas, et SVG a des fonctionnalités de manipulation de bitmap.

MISE À JOUR: J'utilise SVG en raison de ses capacités de langage de balisage - il peut être traité par XSLT et peut contenir d'autres balisages dans ses nœuds. De même, je peux contenir SVG dans mon balisage (chimie). Cela me permet de manipuler les attributs SVG (par exemple le rendu) par des combinaisons de balisage. Cela peut être possible dans Canvas mais je soupçonne que c'est beaucoup plus difficile.

SVG est comme un programme de "dessin". Le dessin est spécifié comme instructions de dessin pour chaque forme et n'importe quelle partie de n'importe quelle forme peut être modifiée. Les dessins sont orientés forme.

Canvas est comme un programme de "peinture". Une fois que les pixels ont frappé l'écran, c'est votre dessin. Vous ne pouvez pas modifier les formes sauf en les écrasant par d'autres pixels. Les peintures sont orientées pixels.

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. Donc SVG a un avantage ici.

Être capable de contrôler des pixels individuels est important pour certains programmes artistiques.

Obtenir d'excellentes performances d'animation pour la manipulation de l'utilisateur via des glissements de 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 un écran d'ordinateur de nos jours prend plusieurs mégaoctets. Ainsi, Canvas peut être gênant si vous souhaitez laisser l'utilisateur modifier une image, puis la télécharger à nouveau.

En revanche, dessiner une poignée de formes qui couvrent tout l'écran à l'aide de SVG prend quelques octets, se télécharge rapidement et peut être téléchargée à nouveau facilement avec les mêmes avantages dans cette direction que dans l'autre direction. Donc SVG peut être plus rapide que Canvas.

Google a implémenté Google Maps avec SVG. Cela donne à l'application Web ses performances dynamiques et son défilement fluide.

Résumé de haut niveau de Canvas vs SVG

Toile

1. Basé sur les pixels (.png dynamique)
2. Élément HTML unique. (Inspecter l'élément dans l'outil de développement. Vous ne pouvez voir que la balise canvas)
3. Modifié via le script uniquement
4. L'interaction entre le modèle d'événement et l'utilisateur est granulaire (x, y)
5. Les performances sont meilleures avec une surface plus petite, un plus grand nombre d'objets (> 10k) ou les deux

SVG

1. Basé sur la forme
2. Plusieurs éléments graphiques, qui font partie du DOM
3. Modifié par script et CSS
4. L'interaction du modèle d'événement / utilisateur est abstraite (rect, chemin)
5. Les performances sont meilleures avec un plus petit nombre d'objets (<10k), une plus grande surface ou les deux

Pour connaître la 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 sur un bitmap d'une taille spécifique.

Pour élaborer un peu, sur le format par rapport à l'API:

Avec svg, vous pouvez afficher, enregistrer et modifier le fichier dans de nombreux outils différents. Avec le canevas, vous venez de dessiner, 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 le redessinage pour vous en regardant simplement les éléments et les attributs spécifiés, tandis qu'avec le canevas, vous devez redessiner chaque image vous-même à l'aide de l'API. Vous pouvez mettre à l'échelle les deux, mais SVG le fait automatiquement, tandis qu'avec le canevas à nouveau, 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, alors que SVG dépend fortement du DOM et que la complexité augmente, les performances ralentissent. Comme dans la conception de jeux.

L'avantage d'utiliser SVG serait que la résolution reste la même sur toutes les plates-formes, 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 votre besoin / exigence.

• Si vous souhaitez simplement afficher une image / un graphique sur un écran, l'approche recommandée est le 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 et souhaitez zoomer sur une certaine zone sans gâcher la qualité d'affichage, vous sélectionnez SVG. (Un bon exemple est AutoCAD, Visio, fichiers SIG).

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, le canevas commence à se dégrader car plus de pixels doivent être dessinés.

• Lorsque le nombre d'objets augmente à l'écran, SVG commence à se
  dégrader car nous les ajoutons continuellement au DOM.

Veuillez également consulter: 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 parce que ses graphiques vectoriels que vous dessinez et que vous les oubliez. Lorsque le port de vue change comme le redimensionnement (ou le zoom), il s'ajustera et n'aura pas besoin de redessiner.

Toile

La toile est une image bitmap (ou raster) réalisée en peignant des pixels à 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 change en le redessinant un autre. Comme il s'agit d'un type raster, nous devons entièrement redessiner à 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

SVGest 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. Et de plus parce que les éléments SVG et les éléments HTML partagent la même API 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 SVG. Mais vous avez besoin d'au moins une calculatrice pour calculer les coordonnées des formes dans le dessin.

CANVASest juste une zone de dessin. Il faut 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 du canevas 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 canevas dédiée pour dessiner des formes dans le canevas.

L'avantage de a SVGest que vous pouvez échanger le dessin en tant que document. L'avantage duCANVAS est qu'il dispose d'une API JavaScript moins verbeuse 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 voir, le résultat est presque le même, mais le code JavaScript est complètement différent.

SVG est créé avec l'API DOM en utilisant createElement, setAttributeet 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 de l'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 unviewBox 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 fonction declientWidth etclientHeight. Et vous pouvez styliser tous les éléments SVG avec CSS. Dans le CANVAS, vous ne pouvez rien styler avec CSS. Comme SVG est un DOM, vous pouvez attribuer des gestionnaires d'événements à tous les éléments SVG. Les éléments de CANVAS n'ont ni DOM ni gestionnaires d'événements DOM.

Mais d'un autre côté, le code CANVAS est beaucoup plus facile à lire. Vous n'avez pas besoin de vous soucier des espaces de nom 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 dessiner rapidement des graphiques, utilisez le CANVAS. Si vous avez besoin de partager les graphiques, aimez les styliser avec CSS ou souhaitez utiliser des gestionnaires d'événements DOM dans vos graphiques, créez un SVG.

en ajoutant aux points ci-dessus:

Le SVG est léger pour le transfert sur le Web par rapport au JPEG, au GIF, etc.

SVG
Il est basé sur un modèle objet.
Convient à l'utilisation de grandes zones de rendu.
SVG fournit n'importe quel support pour les gestionnaires d'événements.
La modification est autorisée via le script et le CSS.
SVG a une meilleure évolutivité
SVG est basé sur un vecteur (composé de formes).
SVG ne convient pas aux graphiques des jeux. SVG ne dépend pas de la résolution.
SVG est capable d'animer l'API.
SVG convient à l'impression de haute qualité et de toute résolution.

Éléments de toile

Il est basé sur des pixels.

Convient à l'utilisation de petits rendus

Canvas ne fournit aucun recours pour les gestionnaires d'événements.

La modification est autorisée via le script uniquement.

Canvas a une mauvaise évolutivité.

Le canevas est basé sur un raster (composé d'un pixel).

Le canevas convient aux graphiques de jeux.

Le canevas dépend entièrement de la résolution.

Canvas n'a aucune API pour l'animation.

La toile ne convient pas à l'impression de haute qualité et haute résolution.