.jpeg)
sebuah website yang mengoptimalkan kinerja UX atau user experience, tentu harus memiliki visual basic mengenai fungsionalitas fitur didalam website itu sendiri.
namun, penggunaan gambar dengan format jpg,png,jpeg ,dan png terkadang tak mencukupi.
dibeberapa bagian seperti tombol, penggunaan gambar kecil sebagai icon tentu sangat berdampak buruk pada pemuatannya, maka alih alih menggunakan gambar sebagai icon.
alternatif lainnya adalah menggunakan svg, apa itu svg ?
Pengertian SVG
svg atau scalable vector graphics adalah sebuah kumpulan kode yang disusun dengan bahasa Markup XML hingga membentuk sebuah vektor grafik 2 dimensi.
pada awalnya svg dibangun pertama oleh W3C pada tahun 1999, dan dirilis pertama pada 4 September 2001.
Manfaat penggunaan svg daripada lainnya
1. skalabilitas
Dengan SVG, kamu dapat menggabungkan berbagai bentuk, web, elemen teks, membuat segala jenis visual, dan membuatnya jelas dan jelas.
Sebagai gantinya, format berbasis grid seperti GIF, JPG, PNG memiliki dimensi tetap yang memungkinkan kamu untuk menskalakan piksel. Berbagai teknologi gambar respons dari grafik piksel telah terbukti bermanfaat, tetapi kamu tidak dapat sepenuhnya bersaing dengan fungsi SVG.
2. SEO friendly
Penggunaan SVG dilengkapi dengan bonus kecil desainer mesin pencari cerdas. SVG menggunakan format teks saat ini, sehingga mesin pencari dapat membaca foto dengan baik.
Ya, kamu dapat menambahkan foto lain dan informasi alternatif, tetapi tidak ada banyak kata kunci. Dengan SVG, kamu dapat membuat foto ramah dan dengan mudah mengunggah. Google akan mengindeks semua konten SVG, termasuk file mandiri, jika SVG disematkan langsung di HTML.
3. gampang dirubah
Svg dan skrip yang sepenuhnya dapat diedit. Editing SVG mudah untuk mengubah koordinat atau kata-kata di editor teks, atau encode SVG ke situs web dan ubah dengan JavaScript atau CSS. kamu juga dapat menggunakan perangkat lunak pemesinan grafis vektor seperti Adobe Illustrator, Corel Draw, Sketch.
Misalnya, pastikan ada logo sederhana dengan satu warna (putih) dan buat tampilan banner yang ingin kamu unggah logo. Namun, tampilan banner dirancang sepenuhnya dalam warna putih, sehingga kamu perlu mengubah warna perangkat logo.
Saat menggunakan file SVG, lebih mudah untuk mengubah warna untuk aplikasi apa pun.
4. performa dan size yang kecil
Salah satu aspek terpenting yang memengaruhi kinerja web adalah ukuran file yang digunakan oleh halaman web. Salah satu hal yang paling disukai pengiklan dan desainer adalah ukuran file visual setelah dirancang dan disimpan.
Cara mendapatkan ribuan icon svg gratis dari Bootstrap
sudah saya bahas sebelumnya mengenai salah satu Framework ini, jika kalian belum tau silahkan Baca apa itu Framework Bootstrap
Instalasi
seperti pada tutorial instalasi framework Bootstrap sebelumnya, jika diperlukan kalian bisa menginstal langsung kedalam projects kamu melalui cdn atau npm, namun kalian juga bisa menginstal nya melalui download manual klik disini
1. CDN
Pastekan link dibawah setelah <head> dan sebelum </head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.8.1/font/bootstrap-icons.css">
2. NPM
pastekan command dibawah ke terminal
npm i bootstrap-icons
Cara penggunaan
- masuk ke halaman icon Bootstrap ( klik disini )
- Scroll sedikit sampai ketemu kolom search icon
- masukkan nama icon yang kalian cari
- Klik icon yang dikehendaki
- pilih kode tepat dibawah tulisan (using web font?) lalu copy code tersebut [ <i class=" bi bi######"
- pastekan kedalam projects kamu sesuai keinginan
kenapa saya sarankan memilih menggunakan web font ? karena kita sebelum nya sudah menginstall library tersebut, selain itu hemat ruang dan baris kode lebih sedikit dan ukuran file tak bertambah
ok, sekian tutorial apa itu svg ? cara mendapatkan ribuan icon svg gratis dari library framework Bootstrap. sampai jumpa di artikel selanjutnya...