4 façons d'introduire des images svg dans des pages html partagées

Cet article présente principalement 4 façons d'introduire des images svg dans des pages Web html. L'article présente en détail à travers des exemples de codes, qui ont une certaine valeur d'apprentissage de référence pour l'étude ou le travail de chacun. Amis qui en ont besoin, suivez l'éditeur de lecture de micro-points pour se réunir apprendre à apprendre

Le développement d'applications Web utilise des images svg. En résumé, il y a quatre façons :

1. Insérez directement dans la page.
2. Importez la balise img.
3. Introduction CSS.
4. La balise d'objet est introduite.

1. Insérer directement dans la page

Dans la page html, vous pouvez directement utiliser la balise svg.

dix

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title></title>

</head>

<body>

<svg width="200" height="150" style="border: 1px solid steelblue">

<rect x="10" y="10" width="100" height="60" fill="skyblue"></rect>

</svg>

</body>

</html>

résultat courant :

2. Importez la balise img

En plus d'écrire directement des balises svg dans la page Web, il peut également être importé via img, tout comme l'importation d'images jpeg et png.

1) Créer une nouvelle image svg

Ensuite, nous devons d'abord créer un nouveau fichier image svg, et nous utilisons le svg écrit directement sur la page Web :

<svg xmlns="SVG namespace" width="200" height="150">

<rect x="10" y="10" width="100" height="60" fill="skyblue"></rect>

</svg>

Il y a deux différences ici :

1. Vous devez déclarer l'attribut namespace xmlns, qui peut être référencé à 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 le navigateur.

2) Utilisez la balise img pour importer

En supposant que test.svg et le fichier de la page Web se trouvent dans le même répertoire :

1	`<img` `src="test.svg"` `style="border: 1px solid steelblue"` `/>`

Semblable à l'importation de jpeg et png, vous pouvez directement définir le chemin de l'image avec l'attribut src. De plus, nous avons déplacé le style svg d'origine vers la balise img.

3. importation CSS

L'import css consiste à importer l'image en tant qu'image de fond :

<style type="text/css">

.svg {

width: 200px;

height: 150px;

border: 1px solid steelblue;

background-image: url(test.svg); // 当成背景引入

}

</style>

<div class="svg"></div>

4. Présentation de l'objet

Semblable à l'importation d'img, un fichier svg est requis, puis importé avec les données d'attribut :

1	`<object` `data="test.svg"` `style="border: 1px solid steelblue"></object>`

L'effet de course est similaire à celui ci-dessus, plus de textures.

autres balises

D'autres balises telles que : embed, balises iframe peuvent également être introduites, mais elles ne sont pas recommandées

Réimprimé de : Weidian Reading https://www.weidianyuedu.com