Toile HTML 5 vs SVG

Canvas et SVG vous permettent tous deux de créer des graphiques dans le navigateur, mais ils sont fondamentalement différents.

SVG

SVG est un langage qui utilise XML pour décrire les graphiques 2D.

SVG est basé sur XML, ce qui signifie que chaque élément du DOM SVG est disponible. Vous pouvez attacher un gestionnaire d'événements JavaScript à un élément.

En SVG, chaque forme dessinée est considérée comme un objet. Si les propriétés d'un objet SVG changent, le navigateur peut automatiquement reproduire le graphique.

Canvas

Canvas dessine des graphiques 2D via JavaScript.

Le canevas est rendu pixel par pixel.

Dans Canvas, une fois qu'un graphique est dessiné, il ne recevra plus l'attention du navigateur. Si sa position change, la scène entière doit être redessinée, y compris tous les objets qui auraient pu être recouverts par des graphiques.

Comparaison de Canvas et SVG

Le tableau suivant répertorie certaines des différences entre Canvas et SVG.

Canvas

Dépend de la résolution

Ne prend pas en charge les gestionnaires d'événements

Faibles capacités de rendu de texte

Capable de rendre en .png ou . L'enregistrement de l'image résultante au format jpg

convient mieux aux jeux à forte intensité graphique où de nombreux objets seront redessinés fréquemment

SVG

ne dépend pas de la résolution

Prend en charge les gestionnaires d'événements

Idéal pour les applications avec de grandes zones de rendu (comme Google Maps)

Une complexité élevée ralentira le rendu (toute application qui abuse du DOM n'est pas rapide)

Ne convient pas aux applications de jeu

Ce qui précède est le contenu de HTML 5 Canvas vs. SVG Pour plus de contenu connexe, veuillez faire attention au site Web PHP chinois (www.php.cn) !