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 la même chose. En gros, 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?

81
demandé sur zeckdude 2011-02-14 22:27:36

9 réponses

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

SVG est une ancienne norme pour le dessin les formes dans les navigateurs. Cependant, SVG est à fondamentalement niveau plus élevé parce que chaque forme dessinée est rappelé comme un objet dans un graphe de scène ou DOM, qui est par la suite rendu un peu à la carte. Cela signifie que si les attributs d'un Les objets SVG sont modifiés, le navigateur peut automatiquement restituer la scène.

Dans l'exemple ci-dessus, une fois la rectangle est dessiné, le fait qu'il a été tiré est oublié par le système. Si sa position devait être changé, la scène entière devrait être redessiné, y compris tout objet qui aurait pu être couvert par le rectangle. Mais dans L'équivalent SVG cas, on pourrait simplement changer la attributs de position du rectangle et le navigateur déterminerait comment repeindre. Il est également possible de peindre une toile en couches et puis recréer des couches spécifiques.

Les images

SVG sont représentées en XML, et des scènes complexes peuvent être créés et mise à jour avec les outils D'édition XML.

le graphe de scène SVG active l'événement les gestionnaires à être associé avec objets, donc un rectangle peut répondre à un évènement onClick. Pour obtenir le même fonctionnalité avec toile, il faut correspondent manuellement aux coordonnées du cliquez avec les coordonnées de la rectangle pour déterminer s'il a cliqué.

conceptuellement, la toile est un niveau inférieur protocole sur lequel pourrait être fondé le SVG construire.[citation nécessaire] cependant, ce n'est pas (normalement) le cas-ils sont normes indépendantes. Situation est compliqué parce qu'il y a de la scène bibliothèques de graphiques pour Canvas, et SVG a quelques manipulations de cartes de bits fonctionnalité.

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 markup dans ses noeuds. De même, je peux tenir SVG dans mon markup (chimie). Cela me permet de manipuler les attributs SVG (par exemple le rendu) par des combinaisons de markup. C'est peut-être possible en toile, mais je pense que c'est beaucoup plus difficile.

37
répondu peter.murray.rust 2016-10-21 13:33:04

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

Toile est comme une "peinture" du programme. Une fois les pixels de l'écran, c'est votre dessin. Vous ne pouvez pas changer les formes sauf en les écrasant avec d'autres pixels. Les peintures sont pixellisée.

être capable de changer les dessins est très important pour certains programmes; par exemple les applications de dessin, les outils de diagrammation,etc. Donc SVG a un avantage ici.

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

obtenir de bonnes performances d'animation pour la manipulation par l'utilisateur via des dragues souris est plus facile avec Canvas que SVG.

un seul pixel sur l'écran de l'ordinateur consomme souvent 4 octets d'information et un écran d'ordinateur prend actuellement plusieurs mégaoctets. Donc la toile pourrait être incommode si vous voulez laisser l'utilisateur éditer une image et puis la télécharger à nouveau.

par contraste, dessiner une poignée de formes qui couvrent l'écran entier en utilisant SVG prend quelques octets, télécharge rapidement, et peut être téléchargé à nouveau facilement avec les mêmes avantages allant dans cette direction que quand il descend sur l'autre direction. Donc SVG peut être plus rapide que Canvas.

Google mis en œuvre Google Maps avec SVG. Qui donne à l'application son zippy les performances et le défilement régulier.

42
répondu JohnnySoftware 2011-02-19 03:15:34

Résumé de Haut Niveau de Toile contre SVG

Toile

  1. Pixel basé (dynamique .png)
  2. Unique de l'élément HTML.(Inspecter l'élément dans l'outil de développement. Vous pouvez voir que la balise canvas)
  3. Modifié par le script uniquement
  4. modèle d'Événement/interaction de l'utilisateur est granulaire (x,y)
  5. la Performance est meilleure avec une surface plus petite, une plus grande nombre d'objets (>10k), ou les deux

SVG

  1. Forme de base
  2. Plusieurs éléments graphiques, qui font partie de la DOM
  3. Modifié par un script et CSS
  4. modèle d'Événement/interaction de l'utilisateur est abstrait (rect, chemin)
  5. la Performance est meilleure avec un plus petit nombre d'objets (<10k), une surface plus grande, ou les deux

pour la différence détaillée, lire http://msdn.microsoft.com/en-us/library/ie/gg193983 (v=vs 85).aspx

27
répondu Fizer Khan 2014-12-10 06:33:12

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 pour dessiner des graphiques vectoriels sur un bitmap d'une taille spécifique.

Pour développer un peu, sur le format de rapport de l'API:

avec svg vous pouvez visualiser, enregistrer et éditer le fichier dans de nombreux outils différents. Avec de la toile que vous venez de dessiner, et rien n'est retenu sur ce que vous venez de le faire en dehors de l'image obtenue sur l'écran. Vous pouvez animer les deux, SVG gère le redessinage pour vous en regardant juste les éléments et les attributs spécifiés, tandis qu'avec canvas vous devez Redessiner chaque image vous-même en utilisant l'API. Vous pouvez mettre à l'échelle les deux, mais SVG le fait automatiquement, alors qu'avec canvas again, vous devez réémettre les commandes de dessin pour la taille donnée.

22
répondu Erik Dahlström 2011-02-14 20:32:57

deux choses qui m'ont le plus frappé pour SVG et Canvas étaient,

capacité à utiliser la toile sans le DOM, où comme SVG dépend fortement de DOM et que la complexité augmente la performance ralentit. Comme dans la conception de jeu.

avantage de L'utilisation SVG serait que la résolution reste la même à travers les plates-formes qui manque dans Canvas.

Beaucoup plus de détails sont fournis dans ce site. http://dev.opera.com/articles/view/svg-or-canvas-choosing-between-the-two /

10
répondu Sam007 2012-10-12 19:00:18

cela dépend absolument de vos besoins.

  • si vous voulez juste afficher une image / graphique sur un écran alors recommandé l'approche est toile. (L'exemple est un PNG, GIF, BMP, etc.)

  • Si vous souhaitez étendre les fonctionnalités de votre carte graphique par exemple, si vous la souris sur la carte veulent zoomer sur une certaine zone sans butin qualité d'affichage puis vous sélectionnez SVG. (Un bon exemple est AutoCAD, Visio, Fichiers SIG).

si vous voulez construire un outil de créateur de diagramme 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 toile commence à se dégrader plus de pixels doivent être dessinés.

  • lorsque le nombre d'objets augmente à l'écran, SVG commence à

    dégrader comme nous les ajoutons continuellement au DOM.

voir aussi: http://msdn.microsoft.com/en-us/library/gg193983 (v=vs 85).aspx

4
répondu Aji 2014-06-03 07:38:38

SVG

basé sur le cas D'utilisation SVG est utilisé pour les logos, les graphiques parce que ses graphiques vectoriels que vous dessinez et oublié. Lorsque le changement de port de vue comme re-dimensionnement (ou zoom) il va s'ajuster et pas besoin de redessiner.

Toile

Toile est bitmap (ou raster) il fait par la peinture de pixels à l'écran. Il est utilisé pour développer des jeux ou des expériences graphiques ( https://www.chromeexperiments.com/webgl ) dans une zone donnée il peint pixel et change en le redessinant une autre. Puisque c'est un type raster nous devons retravailler entièrement que les changements de port de vue.

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

3
répondu Purushoth 2016-02-17 20:35:16

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 SVG elements et HTML elements partagent la même API DOM, il est possible d'utiliser JavaScript pour générer un SVG DOM 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 le coordonnées des formes sur le dessin.

CANVAS est juste une zone de dessin. Il faut utiliser JavaScript pour générer le contenu d'une toile. Vous ne pouvez pas échanger une toile. C'est pas de document. Et les éléments de la toile ne font pas partie du DOM. Vous ne pouvez pas utiliser L'API DOM pour manipuler le contenu d'une toile. Vous devez plutôt utiliser une API canvas dédiée pour dessiner des formes dans la toile.

L'avantage d'un SVG est, que vous pouvez échanger le dessin comme un document. L'avantage du CANVAS 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érent.

// 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 la Le code JavaScript est complètement différent.

SVG est créé avec L'API DOM en utilisant createElement , setAttribute et appendChild . Tous les graphiques sont dans les chaînes d'attribut. SVG a des primitifs plus puissants. La toile par exemple n'a rien d'équivalent au chemin D'arc SVG. L'exemple de CANVAS essaie d'imiter L'arc SVG avec une courbe plus Bézière. En SVG, vous pouvez réutiliser des éléments pour les transformer. Dans la toile, vous ne pouvez pas réutiliser des éléments. Au lieu de cela, vous devez écrire un Fonction JavaScript afin de l'appeler deux fois. SVG a un viewBox qui permet d'utiliser des coordonnées normalisées, ce qui simplifie les rotations. Dans la toile, vous devez calculer les coordonnées vous-même basé sur le clientWidth et clientHeight . Et vous pouvez style tous les éléments SVG avec CSS. Dans la toile, vous ne pouvez pas styliser quoi que ce soit avec CSS. Comme SVG est un DOM, vous pouvez assigner des gestionnaires d'événements à tous les éléments SVG. Les éléments de la toile n'ont ni DOM ni Dom event handlers.

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 noms XML. Et vous pouvez appeler directement les fonctions graphiques, parce que vous n'avez pas besoin de construire un DOM.

la leçon est claire: si vous voulez rapidement dessiner des graphiques, utilisez la toile. Si vous avez besoin de partager les graphiques, comme pour le style avec CSS ou si vous voulez utiliser DOM event handlers dans vos graphiques, construisez une SVG.

2
répondu ceving 2017-12-13 12:25:47

ajout aux points ci-dessus:

SVG est léger pour le transfert sur le web par rapport à JPEG,GIF etc et aussi il échelle extrêmement lorsqu'il est redimensionné sans perdre la qualité.

0
répondu Narayana Swamy 2015-05-03 04:24:10