Explication pratique HTML5 détaillée de SVG

Encyclopédie Baidu :

SVG ScalableVector GraphicsScalable Vector Graphics est basé sur Extensible Markup Language (XML), un format graphique utilisé 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 ne le font pas perdre la qualité graphique lorsqu'il est agrandi ou redimensionné
SVG est un standard du World Wide Web Consortium
SVG est intégré aux 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 des graphiques 2D.
SVG est basé sur XML, ce qui signifie que chaque élément du DOM SVG est disponible. Vous pouvez attacher un JavaScript gestionnaire d'événements à 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

svg Exemple :

    <svg width="100%" height="100%"  >

        <circle cx="300" cy="60" r="50" stroke="#ff0" stroke-width="3" fill="red" />

    </svg>

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!