Beranda>Tutorial Desain Web>tutorial HTML

4 cara untuk memperkenalkan gambar svg ke halaman web html

Penulis：Eve Cole Waktu Pembaruan：2024-12-18 10:41:14

Pengembangan aplikasi web menggunakan gambar SVG. Singkatnya, ada empat cara:

1. Sisipkan langsung ke halaman. 2. Pengenalan tag img. 3. pengenalan css. 4. Tag objek diperkenalkan.

1. Langsung masukkan ke dalam halaman

Di halaman html, Anda dapat menggunakan tag svg secara langsung.

<!DOCTYPEhtml>
<html>
	<kepala>
		<meta charset="utf-8">
		<judul></judul>
	</kepala>
	<tubuh>
		<!-- Gambar svg-->
		<svg width="200" height="150" style="border: 1px solid steelblue">
			<!-- Ada persegi panjang di dalamnya -->
			<rect x="10" y="10" width="100" height="60" fill="skyblue"></rect>
		</svg>
	</tubuh>
</html>

Efek operasi:

1

2. Pengenalan tag img

Selain menulis tag svg langsung di halaman web, Anda juga dapat mengimpornya melalui img, seperti halnya mengimpor gambar jpeg dan png.

1) Buat gambar svg baru

Kemudian kita perlu membuat file gambar svg baru terlebih dahulu, dan menggunakan svg yang ditulis langsung di halaman web di atas:

<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>

Ada dua perbedaan konten di sini:

1. Anda perlu mendeklarasikan atribut namespace xmlns. Namespace tersebut dapat dicantumkan dalam bahan referensi di akhir artikel ini. 2. Menghapus gaya yang awalnya ditulis pada tag svg, style="border: 1px solid steelblue".

Simpan konten ke file test.svg. Ini adalah file gambar.

2) Impor menggunakan tag img

Asumsikan bahwa test.svg dan file halaman web berada di direktori yang sama:

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

Mirip dengan memperkenalkan jpeg dan png, Anda dapat langsung mengatur jalur gambar dengan atribut src. Selain itu, kami memindahkan gaya svg asli ke tag img.

Efek yang dijalankan sama seperti di atas:

2

Ada banyak gambar SVG di Internet. Anda dapat merujuk ke: https://www.iconfont.cn, situs web ikon yang bagus.

3

3. pengenalan css

Pengenalan css adalah untuk memperkenalkan gambar sebagai gambar latar belakang:

<gaya tipe="teks/css">
	.svg {
		lebar: 200 piksel;
		tinggi: 150 piksel;
		batas: 1px baja biru solid;
		gambar latar belakang: url(test.svg); // Impor sebagai latar belakang }
</gaya>
<div kelas="svg"></div>

4. pengenalan objek

Mirip dengan mengimpor img, Anda memerlukan file svg dan kemudian mengimpornya dengan data atribut:

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

Efek pengoperasiannya mirip dengan di atas, tidak ada lagi pemetaan.

Tag lainnya

Meskipun tag lain seperti tag embed dan iframe juga dapat diperkenalkan, penggunaannya tidak disarankan. Untuk detailnya, silakan lihat referensi yang tercantum di akhir artikel ini.

Referensi

Ruang nama: https://developer.mozilla.org/zh-CN/docs/Web/SVG/Namespaces_Crash_Course

tag semat: https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/embed

tag iframe: https://developer.mozilla.org/zh-CN/docs/Learn/HTML/Multimedia_and_embedding/Other_embedding_technologies

Demikianlah artikel kali ini tentang 4 cara memasukkan gambar svg ke dalam halaman web HTML. Untuk informasi lebih lanjut tentang memasukkan gambar svg ke dalam HTML, silakan cari artikel sebelumnya di downcodes.com atau lanjutkan menelusuri artikel terkait di bawah ini di masa depan. Dukung downcodes.com!

Artikel Terkait