Guide d'étude html5 svg - Compétences du didacticiel SVG basics_html5

Encyclopédie Baidu :

SVG Scalable Vector Graphics est un format graphique basé sur le langage de balisage extensible (XML) pour décrire des graphiques vectoriels bidimensionnels. SVG est un nouveau format de graphiques vectoriels bidimensionnels développé par le W3C et constitue également la norme de graphiques vectoriels en réseau dans la spécification. SVG suit strictement la syntaxe XML et utilise un langage descriptif au format texte pour décrire le contenu de l'image. Il s'agit donc d'un format graphique vectoriel indépendant de la résolution de l'image.

Qu'est-ce que SVG ?

SVG signifie Scalable Vector Graphics
SVG est utilisé pour définir des graphiques vectoriels pour le Web
SVG utilise le format XML pour définir des graphiques
Les images SVG sont agrandies ou redimensionnées La qualité graphique ne sera pas perdue
SVG est un standard du World Wide Web Consortium
SVG fait partie intégrante des standards du W3C tels que DOM et XSL

La différence entre

Canvas et SVG :
　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.
Caractéristiques :
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 (telles que Google Maps)
Une complexité élevée ralentira le rendu (toutes les applications qui abusent du DOM ne sont pas rapides)
　Ne convient pas aux applications de jeu
Canvas
Canvas dessine des graphiques 2D via JavaScript.
Le canevas est rendu pixel par pixel.
Dans Canvas, une fois le graphique 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.
Caractéristiques :
Dépend de la résolution
Aucune prise en charge des gestionnaires d'événements
Faibles capacités de rendu de texte
Possibilité d'enregistrer les images de résultat au format .png ou .jpg
Idéal pour les applications gourmandes en images Jeux où de nombreux objets sont fréquemment redessinés

Exemple SVG :

Copier le code

Le code est le suivant :