Quelle balise est utilisée pour intégrer des graphiques ? Graphiques vectoriels évolutifs en HTML5

Concepts de base et utilisation

Le format SVG (Scalable Vector Graphics) fait partie d'une famille de normes graphiques vectorielles. Les graphiques vectoriels diffèrent des graphiques raster, dans lesquels la définition des couleurs de chaque pixel est stockée dans un tableau de données. Les formats raster les plus couramment utilisés sur Internet aujourd'hui sont JPEG, GIF et PNG, chacun présentant ses propres avantages et inconvénients.

Abréviations couramment utilisées

• CSS : feuilles de style en cascade
• GIF : format d'échange graphique
• GUI : interface utilisateur graphique
• HTML : langage de balisage hypertexte
• JPEG : Groupe commun d'experts en photographie
• PNG : graphiques de réseau portables
• SVG : graphiques vectoriels évolutifs
• XML : langage de balisage extensible

Le format SVG présente plusieurs avantages par rapport à n'importe quel format raster :

• Les graphiques SVG sont créés à l'aide de formules mathématiques qui nécessitent beaucoup moins de données à stocker dans le fichier d'origine car il n'est pas nécessaire de stocker des données pour chaque pixel individuel.
• Les images vectorielles s'adaptent mieux. Tenter de redimensionner les images publiées en ligne au-delà de leur taille d'origine peut entraîner des images déformées (ou pixellisées).

  En effet, les données de pixels d'origine ont été conçues pour une taille d'image spécifique. Lors du redimensionnement, le moteur de rendu d'image devine quelles données doivent être utilisées pour remplir les nouveaux pixels. Les images vectorielles sont plus résistantes à la mise à l'échelle ; Lors de la modification de la taille de l'image, les formules mathématiques correspondantes peuvent être ajustées.

• La taille du fichier source des graphiques vectoriels est généralement plus petite, de sorte que les graphiques SVG se chargent plus rapidement que leurs homologues raster et consomment moins de données.
• Les images SVG sont rendues par le navigateur et peuvent être rendues par programme. Ils peuvent changer de manière dynamique, ce qui les rend particulièrement adaptés aux applications basées sur les données telles que les graphiques.
• Le fichier image SVG original est sous forme de texte, ce qui le rend accessible et convivial pour les moteurs de recherche.

Dans cet article, vous découvrirez les avantages des formats SVG et comment ils peuvent vous aider à créer des sites Web HTML5.

Les bases du SVG

La création de graphiques SVG utilise un processus complètement différent de la création de fichiers JPEG, GIF ou PNG. Les fichiers JPEG, GIF et PNG sont généralement créés à l'aide d'un programme d'édition d'images, tel qu'Adobe Photoshop. Les images SVG sont généralement créées à l'aide d'une sorte de langage basé sur XML. Il existe des interfaces utilisateur graphiques pour éditer les graphiques SVG qui généreront pour vous le code XML derrière l'image. Toutefois, cet article suppose que vous travaillez directement avec XML. Des informations sur les programmes d'édition d'images SVG peuvent être trouvées dans la section.

Le listing 1 montre un exemple de fichier XML SVG simple qui dessine un cercle rouge avec une bordure noire de 2 pixels.

Listing 1. Fichier XML SVG

Le code ci-dessus produit l'image présentée dans la figure 1.

Figure 1. Cercle rouge avec bordure noire de 2 pixels

Création de formes géométriques de base

Lorsque vous travaillez avec des graphiques SVG, les balises XML sont utilisées pour créer des formes géométriques ; ces éléments XML sont présentés dans le tableau 1.

Tableau 1. Éléments XML pour créer des graphiques SVG

élément de ligne

L'élément line est l'élément graphique le plus simple. Le listing 2 montre comment créer une ligne horizontale.

Listing 2. Création d'une ligne horizontale

Le code présenté dans le listing 2 produit l'image présentée dans la figure 2.

Figure 2. Ligne horizontale simple

La balise racine SVG possède des attributs de largeur et de hauteur qui définissent la zone pouvant être dessinée. Ces attributs agissent de la même manière que les attributs height et width des autres éléments HTML. Dans ce cas, il est établi que la zone de travail occupe tout l'espace disponible.

De plus, cet exemple utilise la balise style. Les graphiques SVG prennent en charge l'application de styles au contenu à l'aide d'une grande variété de méthodes. Les styles de cet article sont inclus pour rendre les images faciles à voir ou lorsque certains attributs, tels que la couleur et l'épaisseur de ligne, sont requis pour le rendu d'un dessin. Plus d'informations sur l'application de styles dans les graphiques SVG peuvent être trouvées dans la section.

Vous pouvez créer une définition de ligne en spécifiant les coordonnées de début et de fin sur les axes X et Y par rapport à l'espace de travail. Les attributs x1 et y1 représentent les coordonnées de début et les attributs x2 et y2 représentent les coordonnées de fin de la ligne. Pour changer la direction du tracé d’une ligne, il vous suffit de changer les coordonnées. Par exemple, en modifiant l'exemple précédent, vous pouvez créer une ligne diagonale comme indiqué dans le listing 3.

Listing 3. Création d'une ligne diagonale

La figure 3 montre la sortie du code présenté dans le listing 3.

Figure 3. Ligne diagonale

élément polyligne

Une ligne brisée est un dessin composé de plusieurs lignes. Le listing 4 montre un exemple de création d'un dessin qui ressemble aux marches d'un escalier.

Le code du listing 4 produit l'image présentée dans la figure 4.

Une polyligne est créée à l'aide de l'attribut points et en définissant des paires de coordonnées X et Y séparées par des virgules. Dans l'exemple présenté, le premier point est défini comme 0,40, où 0 est la coordonnée X et 40 est la coordonnée Y. Cependant, un ensemble de points ne suffit pas pour afficher l'image à l'écran, car cet ensemble indique uniquement le SVG. rendre la position de départ. Vous avez besoin d'au moins deux ensembles de points : un point de départ et un point d'arrivée (par exemple, points="0.40 40.40").

Comme pour le dessin de lignes simples, il n’est pas nécessaire que les lignes soient strictement horizontales ou verticales. Si vous modifiez les valeurs de l'exemple précédent, vous pouvez obtenir des formes irrégulières constituées de lignes, comme dans le Listing 5.

Listing 5. Créer une ligne irrégulière

Le code présenté dans le listing 5 produit l'image présentée dans la figure 5.

Figure 5. Ligne irrégulière

élément rectangulaire

Pour créer un rectangle, il vous suffit de définir sa largeur et sa hauteur, comme indiqué dans le Listing 6.

Listing 6. Créer un rectangle

Le code du listing 6 produit l'image présentée dans la figure 6.

Figure 6. Rectangulaire

La balise rect peut également être utilisée pour créer un carré ; un carré est simplement un rectangle de même hauteur et largeur.

élément de cercle

Le cercle est créé en définissant les coordonnées X et Y du centre et du rayon du cercle, comme indiqué dans le listing 7.

Listing 7. Créer un cercle

Le code du listing 7 produit l'image présentée dans la figure 7.

Figure 7. Cercle

Les attributs cx et cy déterminent la position du centre du cercle par rapport au canevas. Étant donné que le rayon est la moitié de la largeur du cercle, lors de sa détermination, gardez à l'esprit que la largeur totale de l'image sera le double de la valeur que vous spécifiez.

Élément elliptique

Essentiellement, une ellipse est un cercle avec deux rayons spécifiés dans le code, comme le montre le listing 8.

Listing 8. Créer une ellipse

Le code du listing 8 produit l'image présentée dans la figure 8.

Figure 8. Ellipses

Dans ce cas, les attributs cx et cy définissent également les coordonnées du centre par rapport au canevas. Cependant, avec une ellipse, vous définissez un rayon pour l'axe X et un deuxième rayon pour l'axe Y à l'aide des attributs rx et ry.

élément de polygone

Un polygone est une figure géométrique contenant au moins trois côtés. Le listing 9 crée un triangle simple.

Listing 9. Créer un triangle

Le code du listing 9 produit l'image présentée dans la figure 9.

Figure 9. Triangle

Semblable à l'utilisation de l'élément polyligne, les polygones sont créés en définissant des paires de coordonnées X et Y à l'aide de l'attribut points.

En ajoutant des paires de coordonnées le long des axes X et Y, vous pouvez créer des polygones avec n'importe quel nombre de côtés. Par exemple, en modifiant le code de l'exemple précédent, vous pouvez créer un polygone à quatre côtés, comme indiqué dans le listing 10.

Listing 10. Création d'un polygone à quatre côtés

Le code présenté dans le listing 10 produit l'image présentée dans la figure 10.

Figure 10. Polygone à quatre côtés

À l'aide de la balise polygone, vous pouvez également créer des formes géométriques de formes complexes. Le listing 11 crée un dessin d'étoile.

Listing 11. Créer une étoile

Le code présenté dans le listing 11 produit l'image présentée dans la figure 11.

Figure 11. Polygone étoilé

élément de chemin

L'élément chemin est le plus complexe de tous les éléments de dessin, vous permettant de créer des dessins arbitraires à l'aide d'un ensemble de commandes spéciales. L'élément path prend en charge les commandes répertoriées dans le tableau 2.

Tableau 2. Commandes prises en charge par l'élément path

Ces commandes peuvent être utilisées en majuscules ou en minuscules. Si la commande est spécifiée en majuscule, le positionnement absolu est appliqué. Si une commande minuscule est utilisée, le positionnement relatif est appliqué. Fournir des exemples d’utilisation de toutes les commandes dépasse le cadre de cet article. Cependant, vous trouverez ci-dessous quelques exemples illustrant les bases de l'utilisation de ces commandes.

À l’aide de l’élément path, vous pouvez créer n’importe quelle forme géométrique simple à partir des exemples précédents de cet article. Le listing 12 utilise l'élément path pour créer un triangle régulier.

Listing 12. Création d'un triangle à l'aide de l'élément path

Le code présenté dans le listing 12 produit l'image présentée dans la figure 12.

Figure 12. Triangle créé à l'aide de l'élément path

La liste des commandes est définie à l'aide de l'attribut d. Dans cet exemple, le dessin commence au point de coordonnées X 150 et Y 0, défini par la commande de déplacement vers le point (M150 0). Utilisez ensuite la commande pour tracer une ligne jusqu'au point (L75 200). une ligne est tracée jusqu'à un point avec les coordonnées X = 75 et Y = 200. Après cela, une autre ligne est tracée à l'aide d'une autre commande pour tracer une ligne jusqu'à un point (L225 200). Enfin, le motif est fermé à l'aide de la commande snap (Z). Aucune coordonnée n'accompagne la commande Z, puisque pour fermer un chemin, par définition, vous tracez une ligne depuis la position actuelle jusqu'au point de départ du dessin (dans ce cas, le point de coordonnées X = 150, Y = 0).

Le but de l'exemple donné était de vous montrer le concept ; Si vous avez juste besoin de créer un triangle régulier, il est préférable d'utiliser la balise polygone.

Le véritable pouvoir de l'élément path réside dans sa capacité à créer des formes personnalisées, comme le montre le listing 13. Cet exemple est tiré du document du World Wide Web Consortium (W3C). Graphiques vectoriels évolutifs (SVG) 1.1 (2e édition)(voir section).

Listing 13. Création d'une forme personnalisée à l'aide de l'élément path

Le code présenté dans le listing 13 produit l'image présentée dans la figure 13.

Figure 13. Forme personnalisée créée à l'aide de l'élément path

L'élément path peut être utilisé pour créer des conceptions complexes telles que des diagrammes et des lignes ondulées. Notez que l'exemple fourni utilise plusieurs éléments de chemin. Lors de la création de dessins, vous n'êtes limité à aucun élément de dessin dans la balise racine SVG.

Filtres et dégradés

En plus des styles CSS de base utilisés dans la plupart des exemples ci-dessus, les graphiques SVG prennent également en charge l'utilisation de filtres et de dégradés. Dans cette section, vous apprendrez comment appliquer des filtres et des dégradés aux images SVG.

Filtres

Des filtres peuvent être utilisés pour appliquer des effets spéciaux aux images SVG. SVG prend en charge les filtres suivants.

• feBlend
• feColorMatrix
• feComponentTransfer
• feComposite
• feConvolveMatrix
• feÉclairage diffus
• feDéplacementMap
• feInondation
• feFlou gaussien
• feImage
• feMerge
• feMorphologie
• feDécalage
• feÉclairage Spéculaire
• feTile
• feTurbulence
• feDistantLight
• fePointLight
• feSpotLight

Le listing 14 crée un effet d'ombre portée appliqué à un rectangle.

Listing 14. Création d'un effet d'ombre portée pour un rectangle

Le code présenté dans le listing 14 produit l'image présentée dans la figure 14.

Figure 14. Effet d'ombre portée pour un rectangle

Les filtres sont définis à l’intérieur de l’élément def (abréviation de « définition »). Le filtre dans cet exemple se voit attribuer un identifiant (id) « f1 ». La balise de filtre elle-même possède des attributs pour définir les coordonnées X et Y, ainsi que la largeur et la hauteur du filtre. À l'intérieur de la balise de filtre, vous utilisez les éléments de filtre requis et définissez leurs propriétés sur les valeurs souhaitées.

Une fois qu'un filtre est défini, vous l'associez à un dessin spécifique à l'aide de l'attribut filter, comme indiqué dans . Définissez la valeur de l'URL sur la valeur de l'attribut id attribuée au filtre.

Dégradés

Pente représente une transition progressive d’une couleur à une autre. Il existe deux principaux types de dégradés : linéaires et radiaux. Le type de dégradé appliqué est déterminé par l'élément que vous utilisez. Les exemples suivants montrent comment appliquer des dégradés linéaires et radiaux à une ellipse.

Le listing 15 crée une ellipse avec un dégradé linéaire.

Listing 15. Créer une ellipse avec un dégradé linéaire

Le code présenté dans le listing 15 produit l'image présentée dans la figure 15.

Figure 15. Ellipse à gradient linéaire

Le listing 16 crée une ellipse avec un dégradé radial.

Listing 16. Créer une ellipse avec un dégradé radial

Le code présenté dans le listing 16 produit l'image présentée dans la figure 16.

Figure 16. Ellipse avec dégradé radial

Les dégradés, comme les filtres, sont définis dans l'élément def. Chaque dégradé se voit attribuer un identifiant (id). Les attributs de dégradé (tels que les couleurs) sont définis à l'intérieur de la balise de dégradé à l'aide d'éléments d'arrêt. Pour appliquer un dégradé à une image, définissez la valeur url de l'attribut fill sur l'identifiant (id) du dégradé souhaité.

Texte et SVG

En plus de créer des formes géométriques de base, SVG peut également être utilisé pour générer du texte, comme le montre le listing 17.

Listing 17. Création de texte en utilisant SVG

Le code présenté dans le listing 17 produit l'image présentée dans la figure 17.

Figure 17. Texte créé avec SVG

Cet exemple crée une phrase I love SVG en utilisant l'élément texte. Lors de l'utilisation de l'élément de texte, le texte réel affiché se situe entre les éléments de texte d'ouverture et de fermeture.

Vous pouvez afficher du texte selon différents axes et même le long de chemins. Dans le listing 18, le texte est affiché selon un chemin en forme d'arc.

Listing 18. Création de texte le long d'un chemin en forme d'arc

Le code présenté dans le listing 18 produit l'image présentée dans la figure 18.

Figure 18. Texte placé le long d'un chemin en forme d'arc

Cet exemple ajoute un espace de noms XML supplémentaire, xlink , à la balise racine SVG. Le chemin utilisé pour archiver le texte est créé à l'intérieur de l'élément def, donc le chemin lui-même n'est pas rendu dans le dessin. Le texte affiché est imbriqué dans un élément textPath, qui utilise l'espace de noms xlink pour faire référence à l'identifiant du chemin souhaité.

Comme pour les autres graphiques SVG, vous pouvez également appliquer des filtres et des dégradés au texte. Le listing 19 applique un filtre et un dégradé au texte.

Listing 19. Création de texte avec filtre et dégradé

Le code présenté dans le listing 19 produit l'image présentée dans la figure 19.

Figure 19. Texte avec filtre et dégradé

Ajout de code SVG XML aux pages Web

Une fois le XML SVG créé, il peut être inclus dans les pages HTML de plusieurs manières. La première méthode consiste à insérer directement le code SVG XML dans le document HTML, comme indiqué dans le listing 20.

Listing 20. Insérer directement du XML SVG dans un document HTML

Cette méthode est probablement la plus simple, mais elle n’incite pas à la réutilisation. N'oubliez pas que SVG XML peut être enregistré sous forme de fichier avec l'extension .svg. Lorsque vous enregistrez un graphique SVG en tant que fichier .svg, vous pouvez utiliser des éléments embed, object et iframe pour l'inclure dans des pages Web. Le listing 21 montre le code pour intégrer un fichier SVG XML à l'aide de l'élément embed.

Listing 21. Inclure un fichier XML SVG à l'aide de l'élément embed

Le listing 22 montre le code pour inclure un fichier SVG XML à l'aide de l'élément object.

Listing 22. Inclure un fichier XML SVG à l'aide de l'élément object

Le listing 23 montre le code pour inclure un fichier XML SVG à l'aide d'un élément iframe.

Listing 23. Inclure un fichier XML SVG à l'aide d'un élément iframe

Avec l'une de ces méthodes, vous pouvez inclure le même graphique SVG sur plusieurs pages et le mettre à jour en modifiant le fichier .svg d'origine.

Conclusion

Cet article couvre les bases de la création de graphiques à l'aide du format SVG. Vous avez appris à utiliser les éléments géométriques intégrés pour créer des formes géométriques de base, telles qu'une ligne, un rectangle, un cercle, etc. Vous avez également appris à utiliser l'élément chemin pour créer des conceptions complexes en émettant une séquence de commandes. comme se déplacer vers un point, tracer une ligne vers un point et dessiner un arc vers un point. Cet article vous apprend également comment appliquer des filtres et des dégradés aux graphiques SVG, y compris les graphiques contenant du texte, et comment inclure des graphiques SVG dans des pages HTML.

Il existe une balise pour inclure une image à un emplacement spécifique de la page. . Cette balise a un paramètre obligatoire : SRC="", et plusieurs paramètres facultatifs. Le paramètre SRC="" indique au navigateur où rechercher le graphique et doit avoir comme valeur l'URL de la ressource où se trouve le fichier graphique. Dans le cas le plus simple, ce fichier sera placé dans le répertoire racine ou dossier IMG de votre site. Paramètres facultatifs :

Le paramètre ALT="" contient comme valeur une inscription indiquant le contenu de l'image pour les visiteurs dont les navigateurs ne prennent pas en charge les graphiques ou fonctionnent en mode graphique désactivé. La même inscription apparaît lorsque vous passez votre souris sur l'image.

Les paramètres WIDTH="" HEIGHT="" ont comme valeurs les dimensions de l'image en largeur et en hauteur en pixels. Il est conseillé de préciser ces paramètres dans le code de la page afin que le navigateur laisse au préalable de la place pour l'image, puis, au chargement, la page « tressaillira » moins. De plus, ces paramètres peuvent être utilisés pour ajuster la taille de l'image dans la fenêtre du navigateur.

Le paramètre BORDER="" dessine une bordure autour de l'image. La valeur est un nombre indiquant la largeur du cadre en pixels.

Le paramètre ALIGN= détermine la position de l'image sur la page, et peut prendre les valeurs TOP - aligne la bordure supérieure de l'image sur l'élément le plus haut de la ligne courante, TEXTTOP - aligne la bordure supérieure de l'image sur l'élément le plus élevé de la ligne courante. élément de texte le plus élevé de la ligne actuelle, MIDDLE - aligne le milieu de l'image sur la ligne de base de la ligne actuelle, ABSMIDDLE - aligne le milieu de l'image sur le milieu de la ligne actuelle. BASELINE ou BOTTOM - aligne la bordure inférieure de l'image sur la ligne de base de la ligne actuelle, ABSBOTTOM - aligne la bordure inférieure de l'image sur la bordure inférieure de la ligne actuelle, HSPACE= - détermine le retrait horizontal, VSPACE= - détermine le retrait vertical.

Syntaxe des balises :

Téléscripteur

La ligne courante est spécifiée par la balise .

Les attributs de cette balise sont bgcolor - couleur d'arrière-plan de la ligne courante, height - hauteur de la ligne, width - largeur de la ligne.

Direction - définit la direction du mouvement de la ligne rampante - direction="gauche" (droite, haut, bas) - mouvement vers la gauche (droite, haut, bas).

Comportement - comportement de la ligne - behavior="scroll" (diapositive, alterné). Défilement - défilement normal (vous n'avez pas besoin de le spécifier, c'est la valeur par défaut)

Slide - défilement avec un arrêt, la ligne court jusqu'au bord et s'arrête. Si vous utilisez le paramètre loop simultanément avec behavor="slide", la ligne défilera le nombre de fois défini et s'arrêtera au bord. Alterné - la ligne se déplacera d'un bord à l'autre.
Scrollamount - vitesse de déplacement de la ligne, scrollamount="1". Peut prendre des valeurs de 1 à 10. 1 est le mouvement le plus lent, 10 est le mouvement le plus rapide.

Syntaxe des balises : texte

Les navigateurs Web modernes peuvent lire des fichiers vidéo et audio dans divers formats. Pour ce faire, ils utilisent des lecteurs intégrés (plug-in, contrôles ActiveX) ou des programmes de lecture externes. Vous pouvez insérer du son ou de la vidéo dans un document HTML à l'aide de différentes balises :

- pour insérer un fond sonore ;

- insérer une vidéo au format AVI ;

- pour insérer des fichiers audio et vidéo ;