Le développement d'applications Web utilise des images SVG. Pour résumer, il existe quatre manières :
1. Insérez directement dans la page. 2. Introduction de la balise img. 3. introduction css. 4. La balise object est introduite.
Dans les pages html, vous pouvez utiliser directement les balises svg.
<!DOCTYPEhtml> <html> <tête> <méta charset="utf-8"> <titre></titre> </tête> <corps> <!-- Une image svg--> <svg width="200" height="150" style="border: 1px solid steelblue"> <!-- Il y a un rectangle à l'intérieur --> <rect x="10" y="10" width="100" height="60" fill="skyblue"></rect> </svg> </corps> </html>
Effet de fonctionnement :
En plus d'écrire des balises svg directement dans la page Web, vous pouvez également les importer via img, tout comme pour l'importation d'images jpeg et png.
1) Créez une nouvelle image svg
Ensuite, nous devons d'abord créer un nouveau fichier image svg et utiliser le fichier svg écrit directement dans la page Web ci-dessus :
<svg xmlns="http://www.w3.org/2000/svg" width="200" height="150"> <rect x="10" y="10" width="100" height="60" fill="skyblue"></rect> </svg>
Il y a deux différences dans le contenu ici :
1. Vous devez déclarer l'attribut xmlns de l'espace de noms. L'espace de noms peut être répertorié dans les documents de référence à la fin de cet article. 2. Suppression du style écrit à l'origine sur la balise svg, style="border: 1px solid steelblue".
Enregistrez le contenu dans le fichier test.svg. Il s'agit d'un fichier image. Vous pouvez essayer de l'ouvrir dans un navigateur.
2) Importer à l'aide de la balise img
Supposons que test.svg et le fichier de page Web se trouvent dans le même répertoire :
<img src="test.svg" style="border: 1px solid steelblue" />
Semblable à l'introduction de jpeg et png, vous pouvez définir directement le chemin de l'image avec l'attribut src. De plus, nous avons déplacé le style svg d'origine vers la balise img.
L'effet de course est le même que ci-dessus :
Il existe de nombreuses images SVG sur Internet. Vous pouvez vous référer à : https://www.iconfont.cn, un bon site d'icônes.
L'introduction CSS consiste à introduire l'image comme image d'arrière-plan :
<style type="text/css">
.svg {
largeur : 200 px ;
hauteur : 150px ;
bordure : 1px bleu acier uni ;
background-image: url(test.svg); // Importer en arrière-plan }
</style>
<div class="svg"></div>
Semblable à l'importation d'img, vous avez besoin d'un fichier svg, puis importez-le avec les données d'attribut :
<object data="test.svg" style="border: 1px solid steelblue"></object>
L'effet de course est similaire à celui ci-dessus, plus de mappage.
Bien que d'autres balises telles que les balises embed et iframe puissent également être introduites, leur utilisation n'est pas recommandée. Pour plus de détails, veuillez vous référer aux références répertoriées à la fin de cet article.
Espace de noms : https://developer.mozilla.org/zh-CN/docs/Web/SVG/Namespaces_Crash_Course
balise d'intégration : https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/embed
Balise iframe : https://developer.mozilla.org/zh-CN/docs/Learn/HTML/Multimedia_and_embedding/Other_embedding_technologies
Ceci conclut cet article sur les 4 façons d'introduire des images SVG dans les pages Web HTML. Pour plus d'informations sur l'introduction d'images SVG dans HTML, veuillez rechercher les articles précédents sur downcodes.com ou continuer à parcourir les articles connexes ci-dessous. à l'avenir. Soutenez downcodes.com !