Cet article présente principalement les concepts de base de SVG, ainsi que la différence entre SVG et Canvas, et donne enfin un exemple simple pour faciliter tout le monde pour mieux comprendre les graphiques vectoriels évolutifs SVG. Recommandé à tout le monde.
Encyclopédie Baidu:
SVG Scalable Vector Graphics est un format graphique basé sur le langage de balisage extensible (XML) qui décrit des graphiques vectoriels bidimensionnels. SVG est un nouveau format graphique vectoriel bidimensionnel formulé par W3C et est également une norme graphique vectorielle réseau dans la spécification. SVG suit strictement la syntaxe XML et utilise un langage descriptif dans le format de texte pour décrire le contenu de l'image, il s'agit donc d'un format graphique vectoriel indépendant de la résolution d'image.
Qu'est-ce que SVG?SVG fait référence aux graphiques vectoriels évolutifs (graphiques vectoriels évolutifs)
SVG est utilisé pour définir des graphiques vectoriels pour les réseaux
SVG définit les graphiques au format XML
Les images SVG ne perdront pas leur qualité graphique lorsqu'elles seront agrandies ou modifiées en taille.
SVG est la norme pour la World Wide Web Alliance
SVG est un ensemble avec des normes W3C telles que DOM et XSL
La différence entre toile 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.
Dans SVG, chaque figure dessinée est traitée comme un objet. Si les propriétés de l'objet SVG changent, le navigateur peut automatiquement reproduire les graphiques.
Caractéristiques:
Aucune dépendance à la résolution
Soutenir les gestionnaires d'événements
Mieux pour les applications avec de grandes zones de rendu (comme Google Maps)
La haute complexité peut ralentir le rendu (aucune application qui sur utilise DOM)
Pas adapté aux applications de jeu
Toile
Canvas dessine des graphiques 2D via JavaScript.
Canvas est rendu de pixel par pixel.
Dans Canvas, une fois le graphique dessiné, il ne continue pas à attirer l'attention du navigateur. Si sa position change, toute la scène doit également être repeinte, y compris tout objet qui pourrait avoir été écrasé par les graphiques.
Caractéristiques:
Dépendante de la résolution
Les gestionnaires d'événements ne sont pas pris en charge
Capacité de rendu de texte faible
Capacité à enregistrer les images de résultats au format .png ou .jpg
Meilleur pour les jeux à forte intensité d'image, dont beaucoup sont fréquemment repeints
Exemple SVG:Copier le code