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?
SVG est comme un "tirage" du programme. 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 la forme axée sur les résultats.
La toile est comme une "peinture" du programme. Une fois les pixels de l'écran, c'est votre dessin. Vous ne pouvez pas modifier les formes, sauf en les écrasant avec les autres pixels. Les peintures sont pixellisée.
Être en mesure de modifier des dessins est très important pour certains programmes; par exemple, la rédaction des applications, des outils de création de diagrammes, etc. Donc, SVG a un avantage ici.
Être en mesure de contrôler chaque pixel est important pour certains programmes artistiques.
Grande animation de la performance de l'utilisateur-la manipulation par l'intermédiaire de la souris traîne est plus facile avec de la Toile de SVG.
Un seul pixel sur l'écran de l'ordinateur sera souvent consomment 4 octets d'informations et un écran d'ordinateur ces jours-ci prend plusieurs méga-octets. Donc, la Toile peut être gênant si vous voulez permettre à l'utilisateur de modifier une image, puis de le télécharger à nouveau.
En revanche, le dessin d'une poignée de formes qui couvrent la totalité de l'écran en utilisant SVG prend quelques bytes, téléchargements rapidement, et peut être transféré à nouveau facilement avec les mêmes avantages à aller dans cette direction, comme lorsqu'il s'agit de l'autre direction. Donc, SVG peut être plus rapide que la Toile.
Google mis en œuvre Google Maps avec SVG. Que donne l'application web son zippy performance et de défilement lisse.
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 dans les mémoires comme un objet dans une scène graphique ou DOM, qui est par la suite rendu un peu à la carte. Cela signifie que si les attributs d'un SVG objet sont modifiées, le navigateur peut automatiquement le rendu de 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é, l'ensemble de la scène devra être redessiné, y compris tous les objets qui peut-ont été couverts par la rectangle. Mais dans l'équivalent SVG cas, on pourrait simplement changer la attributs de position du rectangle et le navigateur de déterminer comment repeindre. Il est également possible de peindre une toile en couches, puis recréer des couches spécifiques.
SVG images sont représentées en XML, et des scènes complexes peuvent être créés et maintenue avec des outils d'édition XML.
Le SVG graphe de scène permet événement les gestionnaires à être associé avec objets, donc un rectangle peut répondre à un événement onClick. Pour obtenir le même la fonctionnalité avec de la toile, on doit faire correspondre manuellement les coordonnées de l' clic de la souris avec les coordonnées de le rectangle dessiné pour déterminer s'il a cliqué.
Sur le plan conceptuel, la toile est d'un niveau inférieur protocole sur lequel SVG peut être construite.[citation nécessaire] Cependant, cette n'est pas (normalement) le cas-ils sont indépendant des normes. La situation est compliqué parce qu'il y a de la scène graphique bibliothèques de Canvas et SVG a certains bits des manipulations de la carte la fonctionnalité.
Mise à JOUR: J'utilise SVG en raison de son langage de balisage abitilities - elle peut être traitée par XSLT, et peut contenir d'autres marques dans ses nœuds. De même, je peux tenir SVG dans mon balisage (chimie). Cela me permet de manipuler SVG attributs (par exemple, le rendu) par des combinaisons de balisage. Ce sera peut-être possible dans la Toile, mais je supect il est beaucoup plus difficile.
Il y a une différence dans ce qu'ils sont, et ce qu'ils font pour vous.
Pour développer un peu, sur le format de rapport de l'API:
Avec svg, vous pouvez visualiser, d'enregistrer et d'éditer le fichier en 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 redessiner pour vous simplement en regardant les éléments et attributs spécifiés, alors que, avec de la toile vous redessiner chaque image de vous-même à l'aide de l'API. Vous pouvez mettre à l'échelle les deux, mais SVG fait automatiquement, tandis que, avec de la toile encore une fois, vous avoir à ré-émettre les commandes de dessin pour la taille donnée.
Deux choses qui m'a frappé le plus pour le SVG et Canvas ont été,
Capacité à utiliser de la Toile sans les DOM, où SVG dépend fortement de DOM et que la complexité augmente les performances ralentit. Comme dans la conception de jeu.
Avantage de l'utilisation de SVG serait que la résolution reste la même à travers les plates-formes qui manque dans la Toile.
Beaucoup plus de détails sont fournis dans ce site. http://dev.opera.com/articles/view/svg-or-canvas-choosing-between-the-two/
Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.
