Introduction à HTML5 SVG 2D 1 - SVG (Graphiques vectoriels évolutifs)

Dans le passé, les graphiques affichés dans les navigateurs, tels que JPEG, GIF, etc., étaient des bitmaps, et ces formats d'image étaient basés sur des rasters. Dans une image raster, le fichier image définit la valeur de couleur de chaque pixel dans l'image. Le navigateur doit lire ces valeurs et prendre des mesures correspondantes. Ce type de capacité de reproduction de l'image est relativement fort, mais il semblera insuffisant dans certains cas. Par exemple, lorsqu'un navigateur affiche une image à différentes tailles, un bord dentelé est généralement généré et le navigateur doit insérer ou deviner les valeurs pour les pixels qui n'existent pas dans l'image d'origine; Cela entraînera une distorsion de l'image. De plus, l'animation pour les bitmaps est limitée à la génération d'animations de type livre inversées, c'est-à-dire affichant des images individuelles d'une manière rapide et continue.

Le diagramme vectoriel surmonte certaines de ces difficultés en spécifiant les instructions nécessaires pour déterminer les valeurs 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 avec un pouce de diamètre, les graphiques vectoriels disent au navigateur de créer un cercle avec un pouce de diamètre, puis de laisser le navigateur (ou plugin) faire le reste. Cela supprime de nombreuses limites des graphiques raster; Avec les graphiques vectoriels, le navigateur sait seulement qu'il doit dessiner un cercle. Si l'image doit être affichée trois fois la taille normale, le navigateur dessine simplement le cercle à la taille correcte sans effectuer la méthode d'insertion habituelle des images raster. De même, les instructions reçues par le navigateur peuvent être plus facilement liées à des sources d'informations externes (telles que les applications et les bases de données), et pour animer l'image, le navigateur n'a qu'à recevoir des instructions sur la façon de manipuler les 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 les éléments de toile nouvellement ajoutés dans SVG et HTML5. Les deux technologies prennent en charge le vecteur de dessin et les diagrammes raster.

Les graphiques vectoriels évolutifs (graphiques vectoriels évolutifs, SVG pour faire court) sont un langage qui utilise XML pour décrire les graphiques bidimensionnels (SVG suit strictement la syntaxe XML). SVG permet trois types d'objets graphiques: des formes graphiques vectorielles (telles que des chemins composés de lignes droites et de courbes), d'images et de texte. Les objets graphiques (y compris le texte) peuvent être regroupés, stylisés, convertis et combinés en objets précédemment rendus. L'ensemble de fonctionnalités SVG comprend des transformations imbriquées, des chemins de coupure, des masques alpha et des objets de modèle.

Les dessins SVG sont interactifs et dynamiques. Par exemple, les scripts peuvent être utilisés pour définir et déclencher des animations. Ceci est très puissant par rapport à Flash. Flash est un fichier binaire, et il est difficile de créer et de modifier dynamiquement. Bien que SVG soit un fichier texte, les opérations dynamiques sont assez faciles. De plus, SVG fournit directement des éléments pertinents pour terminer l'animation, ce qui est très pratique à utiliser.

SVG est compatible avec d'autres normes Web et prend directement en charge le modèle d'objet de document DOM. Il s'agit également d'un point très puissant par rapport à la toile dans HTML5 (notez ici que SVG utilise également quelque chose de similaire à Canvas pour afficher les graphiques SVG. Plus tard, vous constaterez que de nombreuses fonctionnalités sont un peu similaires à la toile dans HTML5; si l'article ne déclare pas clairement que c'est la toile de SVG, tout fait référence aux éléments Canvas dans 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 de SVG prennent essentiellement les événements standard dans le DOM. Un grand 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 bonne que l'élément de toile, il est meilleur car l'opération DOM est très flexible, et cet avantage peut compenser complètement l'inconvénient de la vitesse.

On peut dire que SVG est à la fois un protocole et une langue; Il s'agit à la fois d'un élément standard de HTML et d'un format d'image.

SVG n'est pas quelque chose dans HTML5, mais c'est aussi l'une des technologies populaires de la page. Mettons-le dans ce sujet.

Par rapport aux autres formats d'image, SVG présente de nombreux avantages (de nombreux avantages proviennent des avantages des graphiques vectoriels):

• Les fichiers SVG sont purs XML et peuvent être lus et modifiés par de nombreux outils (tels que le bloc-notes).

• SVG est de taille plus petite et plus compressible par rapport aux images JPEG et GIF.

• Le SVG est évolutif, peut être agrandi sans dégradation de la qualité de l'image et peut être imprimé de haute qualité à n'importe quelle résolution.

• Le texte de l'image SVG est facultatif et consultable (très adapté à la fabrication de cartes).

• SVG peut fonctionner avec la technologie Java.

• SVG est un niveau ouvert.

Le principal concurrent de SVG est Flash. Par rapport à Flash, le plus grand avantage de SVG est qu'il est compatible avec d'autres normes (telles que XSL et DOM) et est facile à utiliser, tandis que Flash est une technologie privée de source non ouverte. SVG a également un grand avantage dans d'autres aspects tels que les formats de stockage, la génération de graphiques dynamiques, etc.

En ce qui concerne les navigateurs qui prennent en charge HTML5 et SVG, ce n'est pas l'objectif de la discussion ici. Fondamentalement, cela se fait presque avec le dernier navigateur Chrome ou Firefox (IE Les utilisateurs doivent installer IE9. Quant aux versions avant IE9, si vous avez besoin d'installer des plug-ins SVG, je le sauterai ici). Pour les navigateurs qui soutiennent directement SVG, SVG adopte principalement des méthodes de rendu bilatérales et bilatérales.

SVG est un élément HTML standard, il suffit de l'écrire directement dans HTML, voir l'exemple suivant:

<? xml version = "1.0" Encoding = "utf-8"?>

<! Doctype html>

<html>

<adal>

<! - <meta content = "text / html; charset = utf-8" http-equiv = "contenu-type" /> ->

<Title> Ma première page SVG </TITME>

</ head>

<body>

<svg xmlns = "http://www.w3.org/2000/svg" version = "1.1"

width = "200px">

<rect x = "0" y = "0"

rempli = "None" TRAD = "Black" />

<cercle cx = "100" cy = "100" r = "50"

Style = "Stroke: Black; remplissage: rouge;" />

</svg>

</docy>

</html>

Veuillez noter que la partie débutante de la déclaration XML, qui est liée aux XMLN de l'espace de noms SVG, de la version et d'autres pièces, en considérant principalement les problèmes de compatibilité; Ces pièces ne sont essentiellement pas requises dans HTML5 (il vaut mieux le faire vous-même ou non de l'écrire).

SVG indépendant fait référence à la fourniture de formats de fichiers graphiques vectoriels en utilisant des extensions de fichiers SVG. Intégrez ce fichier SVG dans le navigateur et vous pouvez l'utiliser.

1. Fichiers / pages SVG indépendants, les modèles définis sont fondamentalement les mêmes que les suivants:

<SVG>

<! - Marquage SVG ici. ->

</svg>

Enregistrez ces fichiers texte dans des fichiers avec SVG comme extension, tels que Sun.svg. Ces fichiers peuvent être ouverts et navigués directement dans le navigateur ou intégrés dans d'autres pages en tant que références.

2. HTML fait référence aux fichiers SVG externes.

Utilisez simplement l'objet ou l'élément IMG pour intégrer le graphique SVG, par exemple, le petit exemple suivant:

<! Doctype html>

<html>

<adal>

<Title> Ma première page SVG </TITME>

</ head>

<body>

<objet data = "Sun.svg" type = "image / svg + xml"

width = "300px">

<! - Implémentez le code de secours ici, ou affichez un message: ->

<p> Votre navigateur ne prend pas en charge SVG - veuillez passer à un navigateur moderne. </p>

</ objet>

<img src = "sun.svg" />

</docy>

</html>

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

SVG est rendu strictement dans l'ordre de définition des éléments, qui est différent de HTML qui contrôle la hiérarchie par les valeurs de l'indice z. Dans SVG, les éléments écrits à l'avant sont rendus en premier, et les éléments écrits dans le dos sont rendus plus tard. Les éléments rendus plus tard écraseront les éléments précédents. Bien que parfois affectée par la transparence et ne semble pas être écrasée, le SVG est en effet rendu strictement par ordre de séquence.

Remarque: SVG est défini dans XML, il est donc sensible à la casse, qui est différent de HTML.

Document officiel: http://www.w3.org/tr/svg11/

Index du script: http://msdn.microsoft.com/zh-cn/library/ff971910(v=vs.85).aspx

Centre de développement: https://developer.mozilla.org/en/svg

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