Pemblokir Iklan Terdeteksi

Matikan adBlock anda untuk dapat mengakses situs ini.

translate to english

Apa itu SVG ? cara mendapatkan icon svg dari library Bootstrap

Apa itu SVG ? berikut cara mendapatkan ribuan icon svg gratis dari library Bootstrap
 
Icon Bootstrap

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

  1. masuk ke halaman icon Bootstrap (  klik disini )
  2. Scroll sedikit sampai ketemu kolom search icon
  3. masukkan nama icon yang kalian cari 
  4. Klik icon yang dikehendaki
  5. pilih kode tepat dibawah tulisan (using web font?) lalu copy code tersebut [ <i class=" bi bi######"
  6. 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...

Posting Komentar

Berkomentar lah dengan sopan dan tidak spam, Dan Centang Kotak (beritahu saya) untuk mendapatkan Update mengenai komentar kamu
© W4FXploit . All rights reserved. Developer By W$FXploit
W4FXploiters Support
Silahkan beritahu apa yang bisa kami bantu dan kami akan menjawab pertanyaan Anda.
Halo, ada yang bisa kami bantu?
Kirim