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).
Cara terpantas ialah menggunakan elemen HTML .
<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.
Pengerahan adalah mudah dan pantas.
Elemen HTML bersarang dan akan menukar imej SVG bersama-sama menjadi hiperpautan.
Caching fail SVG untuk pemuatan lebih cepat.
Fail SVG tidak mudah dimanipulasi.
Cuma gunakan CSS sebaris untuk menggayakan SVG anda.
Kelas pseudo CSS tidak boleh digunakan untuk menggayakan SVG.
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>
Dalam kaedah berikut beritahu kami cara menggunakan SVG sebagai
<object type="image/svg+xml" data="logo.svg" class="logo"> Logo </object>
Untuk membenamkan SVG menggunakan elemen "objek", perkara berikut diperlukan -