Tag HTML <svg>

Le tag <svg> est utilisé en tant qu’un conteneur pour stocker des graphiques SVG.

SVG (Scalable Vector Graphics – graphiques vectoriels évolutifs) est un langage de balisage, étendu à partir de XML pour décrire des graphiques vectoriels en deux dimensions.

Pour créer des images dans un graphique vectoriel, on utilise des formes géométriques simples (points, lignes, courbes, polygones). Avec leur aide, vous pouvez créer des images évolutives qui ne perdent pas en qualité lors de la mise à l'échelle.

Syntaxe

Le tag HTML <svg> est apparié, donc le contenu est écrit entre les tags ouvrant (<svg>) et fermant (</svg>).

Exemple

<!DOCTYPE html>
<html>
  <head>
    <title>Titre du document</title>
  </head>
  <body>
    <div style="display:flex; flex-flow:row wrap;">
      <svg width="180" height="180">
        <rect x="20" y="20" rx="20" ry="20" width="100" height="100" style="fill:lightgray; stroke:#1c87c9; stroke-width:4;"/>
      </svg>
      <svg width="200" height="200">
        <circle cx="100" cy="70" r="60" stroke="#1c87c9" stroke-width="4" fill="lightgray"/>
      </svg>
      <svg width="200" height="200">
        <polygon points="100,10 40,198 190,78 10,78 160,198" style="fill:lightgray; stroke:#1c87c9; stroke-width:4; fill-rule:evenodd;"/>
      </svg>
    </div>
  </body>
</html>

Essayez-vous-même!

Résultat

Différences entre SVG et Canvas

Les technologies HTML5, SVG et Canvas, peuvent être utilisées pour créer des effets graphiques et effets visuels. Mais il existe des différences entre les deux technologies. Analysons le principal.

SVG est un langage pour les définitions des graphiques 2D en XML. Canvas dessine des graphiques 2D en JavaScript.

SVG est basé sur XML et chaque élément est disponible dans les cadres de SVG DOM. On peut utiliser des gestionnaires d'événements JavaScript pour cet élément.

En SVG chaque graphique est mémorisé comme un objet et, si les attributs SVG ont été modifiés, le navigateur peut automatiquement répéter sa forme.

Dans Canvas le diagramme est immédiatement oublié après le navigateur après le dessin. Si vous avez besoin de changer quelque chose dans le diagramme, vous devez le dessiner à partir de zéro, y compris les objets pertinents pour le diagramme.

Attributs

Attribut	Valeur	Description
baseProfile	none (default) full basic tiny	Décrit le profil de langue minimum SVG nécessaire pour afficher correctement le contenu. N’est pas supporté après SVG2.
contentScriptType	content-type	Définit le langage de script par défaut pour le fragment SVG. N’est pas supporté après SVG2.
contentStyleType	content-type	Définit la table de style par défaut pour le fragment SVG. N’est pas supporté après SVG2.
height	length \| percentage	Définit la hauteur de l’élément.
preserveAspectRatio	none xMinYMin,br/> xMidYMin xMaxYMin xMinYMid xMidYMid xMaxYMid xMinYMax xMidYMax xMaxYMax	Définit l'alignement de l'image mise à l'échelle par rapport à la zone de visualisation.
	meet (default)	Indique que l'image doit conserver ses proportions et être complètement visible.
	slice	Indique que l'image doit conserver ses proportions et être mise à l'échelle en fonction de la valeur limite maximale de la zone de visualisation. Les parties de l'image qui ne rentrent pas dans la fenêtre seront rognées.
version	number	Définit la version SVG. N’est pas supporté après SVG2.
viewbox	list-of-numbers	Spécifie la fenêtre personnalisée
width	length \| percentage	Définit la largeur de l'élément.
x	length \| percentage	Spécifie la coordonnée de l'axe x du conteneur SVG.
y	length \| percentage	Spécifie la coordonnée de l'axe y du conteneur SVG.


4+	3+	4+	10+

10+