Différence entre SVG et Canvas
La Différence entre SVG(Scalable Vector Graphics) et Canvas est que Canvas est un élément HTML utilisé pour dessiner des graphiques sur une page Web. Tandis que SVG s’agit d’un graphique vectoriel utilisant le format XML pour les graphiques, assurant ainsi la prise en charge de l’interaction. Il a été développé par le W3C. Il a été initialement publié en 2001. Les extensions du fichier sont .svg et .svgz.
Canvas
Canvas est un élément HTML utilisé pour dessiner des graphiques sur une page Web. Il s’agit d’une image bitmap avec une API graphique. L’élément <canvas> n’est qu’un conteneur pour les graphiques. Canvas a plusieurs stratégies pour dessiner des chemins, des carrés, des triangles, des cercles, du texte et l’ajout d’images.
Les caractéristiques du Canvas
- Les éléments sont dessinés par programmation
- Le dessin est fait avec des pixels
- Les animations ne sont pas intégrées
- Performances élevées pour les opérations de dessin à base de pixels
- Dépend de la résolution
- Pas de support pour les gestionnaires d’événements
- Vous pouvez enregistrer l’image obtenue au format .png ou .jpg
- Bien adapté aux jeux gourmands en graphiques
Exemple :
<!DOCTYPE HTML>
<html>
<head>
<style>
#canvas{border:1px solid red;}
</style>
</head>
<body>
<canvas id = "canvas" width = "100" height = "100"></canvas>
</body>
</html>
Résultat :
SVG
SVG signifie «Scalable Vector Graphics» (Graphiques vectoriels évolutifs) et est utilisé pour définir des graphiques pour le Web. SVG est principalement utilisé pour les diagrammes de types vectoriels tels que les graphiques à deux dimensions dans un système de coordonnées X, Y, les graphiques à secteurs, etc. L’élément HTML <svg> est un conteneur pour les graphiques SVG. La plupart des navigateurs Web peuvent afficher le format SVG, comme ils peuvent afficher les formats PNG, GIF et JPG.
Les caractéristiques du SVG
- Les éléments font partie du DOM (Document object model) de la page
- Le dessin est fait avec des vecteurs
- Les effets, tels que les animations sont intégrées
- Basé sur la syntaxe XML standard, ce qui offre une meilleure accessibilité
- Résolution indépendante
- Support pour les gestionnaires d’événements
- Ne convient pas aux applications de jeu
- Idéal pour les applications avec de grandes zones de rendu (par exemple, Google Maps)
Exemple :
<!DOCTYPE html>
<html>
<body>
<svg width="300" height="100">
<rect width="200" height="50" style="fill:rgb(255,0,0);"/>
</svg>
</body>
</html>
Résultat :
Conclusion
SVG est basé sur un vecteur, ce qui signifie que sa qualité n’est pas affectée lors du zoom, tandis que Canvas est basé sur les pixels, de sorte que sa qualité est affectée lors du zoom. D’ailleurs, SVG génère des graphiques 2D, tandis que Canvas peut également générer des graphiques 3D.
- Différence entre SVG et Canvas
- Différence entre SVG et EPS
- Différence entre Matlab et Octave
- Différence entre JPG et JPEG
- Quelle est la différence entre UX et UI design et web design
- La reconnaissance de gestes : Vision 3D avec deux caméra
- Vision par ordinateur – Détection et projection des gestes
- Les dimensions d’un système de reconnaissance 3D des gestes
- La reconnaissance de gestes 3D
