Comment utiliser SVG en HTML5

En HTML5, nous pouvons intégrer du SVG en utilisant la balise de HTML, de la balise

SVG est un format graphique vectoriel qui peut être redessiné pour s'adapter à la taille de la page Web sans aucune distorsion, très approprié pour une utilisation dans la conception Web réactive. Cet article vous donnera une introduction détaillée sur la façon d'utiliser SVG en HTML5. J'espère qu'il vous sera utile. [Tutoriels vidéo associés recommandés : Tutoriel HTML5]

Utilisation des balises HTML5

SVG Faisant partie du projet de spécification HTML 5, la balise

Remarque :

1. Pour utiliser la balise

2. Ceci ne peut être utilisé que pour importer du SVG statique.

Vous trouverez ci-dessous un exemple simple HTML5 SVG.

<svg  id = "circle"  height = "200"  xmlns = "http://www.w3.org/2000/svg" > 
      <circle  id = "greencircle"  cx = "30"  cy = "30"  r = " 30"  fill = "red"  /> 
</svg>

Rendu :

Utilisez la balise pour importer des images SVG

Remarque : la balise ne peut être utilisée que pour importer des images SVG statiques.

<img  src = "green-circle.svg"  height = "80"  alt="漂亮的绿色圆圈" />

Rendu :

Utilisez la balise

<object type="image/svg+xml" data="image.svg"></object>

Techniquement, la balise

<object type="image/svg+xml" data="image.svg">
    <img  src="image.svg" / alt="Comment utiliser SVG en HTML5" >
</object>

Importez l'image SVG à l'aide de la balise Il n'est pas recommandé d'importer des images SVG à l'aide de la balise , qui ne fait pas partie de la spécification HTML mais est largement prise en charge sur tous les navigateurs principalement utilisés pour implémenter les plug-ins Flash.

<embed type="image/svg+xml" src="image.svg" />

Utilisez la balise

<iframe src="image.svg"></iframe>

Utiliser l'image d'arrière-plan CSS pour importer une image SVG

Nous pouvons utiliser l'attribut d'arrière-plan CSS pour importer une image SVG comme image d'arrière-plan

Cela équivaut à utiliser la balise et présente les mêmes avantages et inconvénients.

Rendu :

#id {
  background-image: url(image.svg)  no-repeat;
}

Résumé : Ce qui précède est l'intégralité du contenu de cet article, j'espère qu'il sera utile à l'étude de chacun.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!