Rumah > Artikel > hujung hadapan web > Bagaimana untuk mengimport fail SVG dalam JavaScript?

Bagaimana untuk mengimport fail SVG dalam JavaScript?

WBOYke hadapan: 2023-09-12 23:01:011398semak imbas

Grafik Vektor Boleh Skala, kadangkala dipanggil SVG, ialah grafik 2D atau fail imej. untuk Untuk mencipta kesan visual, fail SVG menggunakan formula matematik dan satu set bentuk, garisan, dan ciri-ciri lain. SVG hanyalah kod XML yang menentukan cara untuk menghasilkan warna, di mana Bagaimana setiap borang harus kelihatan berbanding dengan bentuk lain dalam fail, dan cara bentuk itu akan muncul tunjuk.

SVG dan beberapa grafik vektor lain bergantung pada Piksel yang digunakan untuk menyampaikan data visual, seperti fail jpeg atau png.

Empat kelebihan menggunakan fail SVG dalam reka bentuk web adalah seperti berikut -

Kejelasan

Fail SVG boleh berskala tidak terhingga. Fail SVG mempunyai kelebihan yang ketara berbanding imej raster kerana Anda boleh membesarkan dan mengubah saiznya seberapa banyak yang anda suka tanpa kehilangan kejelasan. imej raster Jika tidak skala dengan betul, ia boleh kehilangan ketajaman dan mungkin mula kelihatan berbutir.

Fleksibiliti

Mudah untuk mencipta fail SVG responsif yang kelihatan hebat pada mana-mana peranti, malah Penonton mengezum masuk pada halaman web. Fail SVG boleh diubah saiznya berulang kali sepanjang fasa penyuntingan tanpa kehilangan kejelasan. Fail SVG ialah pilihan yang bagus untuk logo dan maklumat grafik mudah Kerana kebolehsuaian mereka. Fail SVG juga boleh digunakan untuk animasi, dan ia amat berguna untuk Sesuai untuk membangunkan fon dengan skema warna dan kecerunan yang berbeza.

Fail yang lebih kecil

Saiz fail SVG berdasarkan kerumitan visual atau bilangan laluan dalam reka bentuk Mungkin lebih kurang daripada PNG atau JPG dengan imej yang sama. Fail SVG boleh Menurut Vecta.io, 60% hingga 80% lebih kecil daripada PNG, yang juga mengurangkan beban masa dan meningkatkan pengalaman pengguna (UX). Manfaat lain untuk SEO laman web ialah halaman dimuatkan dengan lebih cepat.

Akses dan kemasukan yang lebih mudah

Fail SVG mempunyai banyak kelebihan dalam hal kebolehaksesan dan kepelbagaian. pereka bentuk Keupayaan untuk memasukkan data struktur dalam fail SVG yang mentakrifkan elemen visual grafik Boleh sendiri membantu pengguna teknologi bantuan tertentu memahami kandungan yang terkandung di dalamnya sebuah imej. Sebagai pilihan, fail raster hanya menggunakan metadata (iaitu teks alt) untuk memaklumkan pembaca skrin dan Teknologi bantuan lain yang berkaitan dengan kandungan grafik.

Dalam artikel ini, kami akan meneroka dan menggunakan banyak senario penggunaan SVG (Grafik Vektor Boleh Skala).

Kaedah pertama

Cara terpantas ialah menggunakan elemen HTML Bagaimana untuk mengimport fail SVG dalam JavaScript? .

Tatabahasa

<img src='logo.svg' alt="some file"    style="max-width:90%"  style="max-width:90%" style="color:orange;"/>

Anda memerlukan perkara berikut untuk membenamkan SVG ke dalam elemen -

src atribut
Gunakan atribut ketinggian apabila SVG anda tidak mempunyai nisbah aspek yang wujud.
Gunakan atribut lebar apabila SVG anda tidak mempunyai nisbah bidang secara asli.

Kelebihan

Pengerahan adalah mudah dan pantas.
Elemen HTML bersarang dan akan menukar imej SVG bersama-sama menjadi hiperpautan.
Caching fail SVG untuk pemuatan lebih cepat.

Keburukan

Fail SVG tidak mudah dimanipulasi.
Cuma gunakan CSS sebaris untuk menggayakan SVG anda.
Kelas pseudo CSS tidak boleh digunakan untuk menggayakan SVG.

Contoh 1

Kod sumber HTML

<!DOCTYPE html>
<html>
   <title>How to import a SVG file in JavaScript article - TutorialsPoint</title>
<head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body style="text-align:center">
   <body>
      <img src="https://img.php.cn/upload/article/000/887/227/169453086951251.png" alt="Bagaimana untuk mengimport fail SVG dalam JavaScript?"    style="max-width:90%"  style="max-width:90%" style="background-color: transparent" />
   </body>
</body>
</html>

Kaedah kedua

Dalam kaedah berikut beritahu kami cara menggunakan SVG sebagai

Tatabahasa

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

Untuk membenamkan SVG menggunakan elemen "objek", perkara berikut diperlukan -

JenisSifat
DataSifat
atribut kelas (apabila menggunakan CSS dalaman/luaran)

Kelebihan

SVG boleh digayakan dengan CSS luaran/dalaman.
Pengekodan adalah mudah dan cepat.
Sepatutnya berprestasi baik apabila melibatkan caching.

Keburukan

Jika anda ingin menggunakan helaian gaya luaran, anda harus menggunakan elemen
Tidak biasa dengan pelaksanaan dan sintaks.

Contoh 2

Kod sumber HTML

<!DOCTYPE html>
<html>
<title>How to import a SVG file in JavaScript article - TutorialsPoint</title>
<head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <link rel="stylesheet" type="css" href="https://www.php.cn/link/dfb8e1450abdf50cc0f260e0e7a62296" />
</head>
<body style="text-align:center">
   <object type="image/svg+xml" data="/logo.svg" class="logo">
Tutorialspoint Logo
</object>
</body>
</html>

Kod sumber CSS

logo {
   height: 90;
   width: 310;
}

Output

Kod di atas akan memberikan output berikut -

如何在 JavaScript 中导入 SVG 文件？

Kaedah ketiga

Dalam kaedah di bawah, mari belajar cara membenamkan SVG menggunakan .

Tatabahasa

<iframe src="logo.svg" width="500" height="500">
</iframe>

Membenamkan SVG memerlukan elemen .

src.
Gunakan atribut ketinggian apabila SVG anda tidak mempunyai nisbah aspek yang wujud.
Gunakan atribut lebar apabila SVG anda tidak mempunyai nisbah bidang secara asli.

Kelebihan

Cepat dan mudah untuk dilaksanakan.
Ia sama dengan elemen

Keburukan

JavaScript tidak boleh digunakan untuk mengubah suai SVG.
Caching tidak sesuai.

Contoh 3

Kod sumber HTML

<!DOCTYPE html>
<html>
<title>How to import a SVG file in JavaScript article - TutorialsPoint</title>
<head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <link rel="stylesheet" href="style.css">
</head>
<body style="text-align:center">
   <iframe src="/logo.svg" width="200" height="120"></iframe>
</body>
</html>

Atas ialah kandungan terperinci Bagaimana untuk mengimport fail SVG dalam JavaScript?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

JavaScript css html Object xml class 样式表伪类搜索引擎 ux

Kenyataan：

Artikel ini dikembalikan pada:tutorialspoint.com. Jika ada pelanggaran, sila hubungi admin@php.cn Padam

Artikel sebelumnya：Bagaimana untuk memaparkan ralat tanpa kotak amaran menggunakan JavaScript?Artikel seterusnya：Bagaimana untuk memaparkan ralat tanpa kotak amaran menggunakan JavaScript?

Artikel berkaitan

Lihat lagi