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>

Résultat

SVG

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.

Support de Navigateurs

chrome firefox safari opera
4+ 3+ 4+ 10+

Pratiquez vos connaissances

Qu'est-ce que le balisage SVG en HTML?
Trouvez-vous cela utile?