Skip to content Skip to sidebar Skip to footer

Cara Memasang Icon SVG Untuk Mempercepat Loading

Cara Memasang Icon SVG Untuk Mempercepat Loading
Ambyarblog - Apa kabar? Sebelumnya saya pernah postingan Cara Menambahkan Icon Pada Menu Navigasi Blog dengan Font Awesome. Nah, pada kesempatan kali kni saya akan berbagi tutorial Cara Memasang Icon SVG dan dapat mempercepat loading blog Anda.

Apa itu SVG

SVG merupakan singkatan dari Scalable Vector Graphics yang digunakan untuk mendefinisikan sebuah grafis dan gambar yang ditampilkan dalam bentuk icon. Jadi SVG ini sangat baik digunakan sebagai pengganti icon-icon blog atau website yang biasanya menggunakan pihak ketiga untuk menampilkan sebuah icon di blog. Salah satu layanan icon gratis yang banyak digunakan adalah dari Font Awesome, meskipun sama-sama menggunakan layanan pihak ketiga namun untuk SVG sendiri lebih ringan dan tidak mengganggu loading blog.

Berbeda dengan Font Awesome, yang dalam pengaplikasiannya harus memasang script font dari layanan ini, bahkan icon dalam bentuk Unicode yang disediakan oleh Font Awesome juga sama-sama menggunakan script, kecuali untuk kode Unicode umumnya yang bisa berdiri sendiri. Script dari Font Awesome inilah yang mengurangi loading blog, sekalipun menggunakan script manipulasi atau menguraikan kode CSS dan HTML pada font ini tetap membuat loading blog agak lambat. Atau dalam penggunaan icon dari Font Awesome ini diperkecil tetap mempengaruhi loading blog.

Berbeda dengan SVG, meski memiliki ukuran file yang kecil dan dapat diatur sesuai keinginan, tampilan dari icon SVG ini tetap baik dan tidak pecah. Untuk itu, agar tampilan dan loading blog tetap aman, alangkah baiknya untuk menggunakan icon SVG didalam blog kita masing-masing. Untuk penggunaannya, Beberapa ikon SVG sudah kami pasang pada blog ini dan sudah tidak menggunakan icon dari Font Awesome seperti sebelumnya.

Dalam penggunaannya, icon SVG tidak menggunakan dalam bentuk format gambar apapun tapi dalam bentuk format kode HTML SVG seperti berikut ini:
<svg height="34" viewBox="0 0 24 24" width="34">
<path d="M21,11C21,16.55 17.16,21.74 12,23C6.84,21.74 3,16.55 3,11V5L12,1L21,5V11M12,21C15.75,20 19,15.54 19,11.22V6.3L12,3.18L5,6.3V11.22C5,15.54 8.25,20 12,21M14.8,11V9.5C14.8,8.1 13.4,7 12,7C10.6,7 9.2,8.1 9.2,9.5V11C8.6,11 8,11.6 8,12.2V15.7C8,16.4 8.6,17 9.2,17H14.7C15.4,17 16,16.4 16,15.8V12.3C16,11.6 15.4,11 14.8,11M13.5,11H10.5V9.5C10.5,8.7 11.2,8.2 12,8.2C12.8,8.2 13.5,8.7 13.5,9.5V11Z" fill="#ff0000"/>
</svg>
Jadi ketika anda menggunakan kode seperti diatas, maka penggunaan icon SVG ini sangat meringankan loading blog. Icon ini sering dipakai untuk mempercantik tampilan blog seperti yang di pakai blog-blog besar yang memiliki tampilan menarik.

Untuk Cara Pemasangannya silahkan simak langkah-langkah berikut:

Cara Memasang Icon SVG Untuk Mempercepat Loading

1. Buka terlebih dahulu situs Material Design Icons untuk mendapatkan Icon yang anda inginkan.

2. Jika sudah mendapatkan icon yang anda inginkan silahkan klik iconnya lalu klik kode </>.
Cara Memasang Icon SVG untuk Mempercepat Loading
#1. Mendapatkan Kode SVG
3. Kemudian pilih View SVG.
Cara Memasang Icon SVG untuk Mempercepat Loading
#2. Mendapatkan kode SVG
4.  Lalu salin kode SVG HTML, seperti contoh berikut:
Cara Memasang Icon SVG untuk Mempercepat Loading
#3. Pengambilan Kode SVG
Untuk merubah ukuran Icon SVG, silahkan anda rubah pada bagian kode width="24px" heigth="24px"; sesuaikan dengan ukuran yang anda inginkan.
5. Jika sudah, silahkan anda paste pada Menu atau tampilan yang akan ditambahkan icon tersebut.

Penutup

Begitulah tutorial Cara Memasang Icon SVG Untuk Mempercepat Loading yang dapat saya berikan, apabila ada pertanyaan silahkan komen di kolom komentar. Semoga bermanfaat, sekian dan terima kasih.
Jangan Lupa dukung Ahmiw Channel: https://bit.ly/2xFMwVc. Dukungan anda sangat berarti untuk saya.

2 comments for "Cara Memasang Icon SVG Untuk Mempercepat Loading "

  1. mantp gan.. sy msh pke fontawesome.. jd msh agk lma load nya.. nnti klo ada ksmptn tak oprek2 tu tema.hahaha

    ReplyDelete
    Replies
    1. Siap mas. 👍

      Terima kasih sudah berkunjung di Ambyar Blog. 🙏

      Delete

Silahkan Tinggalkan Komentar!

close