HTML5 SVG 2D Introduction 1—SVG (Scalable Vector Graphics) Overview_html5 Conseils du didacticiel

Bitmaps et graphiques vectoriels
Auparavant, les graphiques affichés dans les navigateurs, tels que jpeg, gif, etc., étaient tous des bitmaps, et ces formats d'image étaient basés sur le raster. Dans une image raster, le fichier image définit la valeur de couleur de chaque pixel de l'image. Le navigateur doit lire ces valeurs et agir en conséquence. La capacité de reproduction de ce type d’image est relativement forte, mais elle apparaîtra insuffisante dans certaines situations. Par exemple, lorsqu'un navigateur affiche une image dans différentes tailles, des bords irréguliers en résultent souvent et le navigateur doit interpoler ou deviner des valeurs pour les pixels qui n'existent pas dans l'image d'origine ; De plus, l'animation de bitmaps se limite, au mieux, à la production d'animations de type "flip book", dans lesquelles des images individuelles sont affichées en succession rapide.

Les graphiques vectoriels surmontent certaines de ces difficultés en spécifiant les instructions nécessaires pour déterminer la valeur de chaque pixel, plutôt que de spécifier les valeurs elles-mêmes. Par exemple, au lieu de fournir des valeurs de pixels pour un cercle d'un pouce de diamètre, les graphiques vectoriels indiquent au navigateur de créer un cercle d'un pouce de diamètre et de laisser le navigateur (ou le plug-in) faire le reste. Cela supprime de nombreuses limitations des graphiques raster ; avec les graphiques vectoriels, le navigateur sait seulement qu'il doit dessiner un cercle. Si une image doit être affichée à trois fois sa taille normale, le navigateur dessine simplement le cercle à la bonne taille sans avoir à effectuer l'interpolation habituelle des images raster. De même, le navigateur reçoit des instructions qui peuvent être plus facilement liées à des sources d'informations externes telles que des applications et des bases de données. Pour animer une image, le navigateur reçoit simplement des instructions sur la manière de manipuler des propriétés telles que le rayon ou la couleur.
Dans le système HTML, la technologie la plus couramment utilisée pour dessiner des graphiques vectoriels est SVG et le nouvel élément canevas de HTML5. Les deux technologies prennent en charge le dessin d’images vectorielles et raster.

Présentation de SVG
Scalable Vector Graphics (SVG en abrégé) est un langage qui utilise XML pour décrire des graphiques bidimensionnels (SVG suit strictement la syntaxe XML). SVG autorise trois types d'objets graphiques : les formes graphiques vectorielles (telles que des tracés composés de lignes droites et de courbes), les images et le texte. Les objets graphiques (y compris le texte) peuvent être regroupés, stylisés, transformés et combinés en objets précédemment rendus. L'ensemble de fonctionnalités SVG comprend des transformations imbriquées, des chemins de détourage, des masques alpha et des objets modèles.

Les dessins SVG sont interactifs et dynamiques. Par exemple, vous pouvez utiliser des scripts pour définir et déclencher des animations. C'est très puissant par rapport à Flash. Flash est un fichier binaire difficile à créer et à modifier dynamiquement. SVG est un fichier texte et la manipulation dynamique est assez simple. De plus, SVG fournit directement les éléments pertinents pour compléter l’animation, ce qui est très pratique à utiliser.

SVG est compatible avec d'autres standards du Web et prend directement en charge le modèle objet de document DOM. C'est également un point très puissant par rapport au canevas en HTML5 (notez ici que SVG utilise également un canevas similaire en interne pour afficher les graphiques SVG. Plus tard, vous découvrirez que de nombreuses fonctionnalités sont quelque peu similaires au canevas de HTML5 ; dans l'article Si c'est le cas il n'est pas explicitement indiqué qu'il s'agit du canevas de SVG, il fait référence à l'élément canevas en HTML5). Par conséquent, de nombreuses applications avancées de SVG peuvent être facilement implémentées à l’aide de scripts. De plus, les éléments graphiques SVG prennent essentiellement en charge les événements standards du DOM. Un certain nombre de gestionnaires d'événements (tels que "onmouseover" et "onclick") peuvent être affectés à n'importe quel objet graphique SVG. Bien que la vitesse de rendu de SVG ne soit pas aussi rapide que celle des éléments de canevas, l'avantage est que les opérations DOM sont très flexibles. Cet avantage peut complètement compenser le désavantage en termes de vitesse.

SVG peut être considéré à la fois comme un protocole et un langage ; c'est à la fois un élément standard du HTML et un format d'image.
SVG n'est pas quelque chose en HTML5, mais il est considéré comme l'une des technologies Web les plus populaires, il sera donc inclus dans ce sujet pour le moment.

Comparaison du SVG et d'autres formats d'image
Par rapport aux autres formats d'image, le SVG présente de nombreux avantages (de nombreux avantages proviennent des avantages des graphiques vectoriels) :
• SVG Le Le fichier est du XML pur et peut être lu et modifié par de nombreux outils (tels que le Bloc-notes).
• SVG est plus petit et plus compressible que les images JPEG et GIF.
• SVG est évolutif, peut être agrandi sans perte de qualité d'image et peut être imprimé en haute qualité à n'importe quelle résolution.
• Le texte des images SVG est facultatif et consultable (idéal pour créer des cartes).
• SVG peut fonctionner avec la technologie Java.
• SVG est un standard ouvert.

Comparaison de SVG et Flash
Le principal concurrent de SVG est Flash. Par rapport à Flash, le plus grand avantage de SVG est qu'il est compatible avec d'autres standards (tels que XSL et DOM) et qu'il est facile à utiliser, tandis que Flash est une technologie propriétaire qui n'est pas open source. Dans d'autres aspects tels que le format de stockage et les graphiques générés dynamiquement, SVG présente également de grands avantages.

Comment SVG est présenté
Le navigateur qui supporte HTML5 et SVG n'est pas au centre de la discussion ici. En gros, il suffit d'installer le dernier navigateur Chrome ou FireFox (IE. (utilisateurs, veuillez simplement installer IE9. Comme pour les versions antérieures à IE9, vous devez installer le plug-in SVG, qui sera ignoré ici). Pour les navigateurs prenant directement en charge SVG, SVG utilise principalement deux méthodes de présentation des deux côtés.

Inline dans HTML
SVG est un élément HTML standard, qui peut être écrit directement en HTML. Voir l'exemple suivant :

Copier le code

Le. le code est le suivant :

🎜>

Votre navigateur ne prend pas en charge SVG - veuillez passer à un navigateur moderne.

🎜>< ;/object>


En fait, SVG peut également être placé dans d'autres documents XML, ou il peut être formaté et vérifié à l'aide de technologies liées à XML comme d'autres documents XML. Ce n'est pas le sujet et est omis ici.


L'ordre de rendu de SVG

SVG est rendu strictement conformément à l'ordre des éléments définis, ce qui est différent du HTML qui s'appuie sur les valeurs de l'index z pour contrôler la superposition . En SVG, les éléments écrits au recto sont rendus en premier et les éléments écrits au verso sont rendus en dernier. L'élément rendu ultérieurement couvrira l'élément précédent. Bien que parfois il ne semble pas être couvert en raison de l'effet de transparence, SVG est en effet rendu dans un ordre strict.
Remarque : SVG est défini en XML, il est donc sensible à la casse, ce qui est différent du HTML.


Référence pratique
:
Documentation officielle :

http://www.w3.org/TR/SVG11/

Index du script :
http://msdn.microsoft.com/zh-cn/library/ff971910(v=vs.85).aspxCentre de développement :
https://developer.mozilla.org/en/ SVG

Référence populaire :
http://www.chinasvg.com/

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn