×

Owner / Author / Admin / etc

    Rahman NM    

"Pada halaman web ini saya akan membagikan informasi informasi menarik seputar Anime, Manga, Game, Film, dan juga berbagai tips-tips menarik lainnya."

Memasang Dan Mempercepat Web Menggunakan Icon SVG

December 11, 2019   • Comment

Icon SVG merupakan icon yang dapat kamu gunakan untuk menggantikan Icon FontAwesome, tentunya beberapa pemilik blog mungkin tidak tau apa itu icon SVG dan bagaimana cara memasang icon SVG tersebut, mungkin mereka lebih mengetahui icon FontAwesome dan cara memasangnya juga lebih Simple ketimbang icon SVG.

#Apa Manfaat/Kelebihan icon SVG ?
Namun tahukah kamu, memasang Icon SVG memiliki manfaat yang begitu besar untuk sebuah website/blogger. Mengapa ? Yaa alasan utama kenapa kamu harus menggunakan icon SVG adalah icon SVG itu ringan, tidak memperlambat kecepatan web/blog bahkan icon SVG itu malah mempercepat web/blog kamu. Hanya saja Icon SVG tidak selengkap seperti icon FontAwesome yang memiliki begitu banyak jenis icon.

#Apa Kekurangan FontAwesome ?
Icon FontAwesome juga memiliki beberapa kekurangan yang harus kamu ketahui, dan mungkin ini bisa sebagai alasan kamu untuk beralih atau pindah ke Icon SVG.

Menggunakan FontAwesome itu dapat memperlambat website/blog kamu, karena jika kita menggunakan FontAwesome kita harus menginstall atau memasang Script eksternal terlebih dahulu, oleh karena itu jika kamu tidak dapat mengakali cara pemasangannya untuk web/blog kamu itu akan mempengaruhi kecepatan web/blog kamu di GTMetrix, Page Speed Insigh.

#Apa Kelebihan FontAwesome ?
Selain memiliki kekurangan pastinya harus memiliki kelebihan juga, karna tidak mungkin ada sesuatu hal yang memiliki kekurangan dan juga tidak memiliki kelebihan. Kelebihan icon fontAwesome adalah kita dapat memasangnya dengan mudah karna memiliki Kode yang sedikit tentunya ini akan mempermudah cara kamu memasangnya.

Kelebihan lainnya adalah icon dari Fontawesome itu ada begitu banyak jenisnya, tidak seperti Icon SVG ( Bukan berarti Icon SVG tidak memiliki banyak jenis icon ya).


Nah bagi kamu yang ingin tau bagaimana cara pemasangannya, kalian ikuti terus artikel ini sampai selesai, Berikut bagaimana cara memasang Icon SVG Web/Blog.

#A. Cara Mendapatkan Icon SVG
1. Untuk mendapatkan Icon SVG kamu masuk dulu ke Web ini :
https://www.materialdesignicons.com
2. Kemudian pilih salah satu icon SVG yang akan kamu gunakan, Klik Kanan icon tersebut pilih View SVG,
3. Nanti akan muncul sebuah kotak SVG Viewer dilayar anda,
4. Terakhir Copy kode SVG Tersebut.

#A.1. Memasang Seperti HTML
Memasang seperti HTML merupakan cara yang umum digunakan para pemilik web/blog ↴
<svg style="width:24px;height:24px" viewBox="0 0 24 24">
    <path fill="#000000" d="M12,4A4,4 0 0,1 16,8A4,4 0 0,1 12,12A4,4 0 0,1 8,8A4,4 0 0,1 12,4M12,14C16.42,14 20,15.79 20,18V20H4V18C4,15.79 7.58,14 12,14Z" />
</svg>
KETERANGAN :
  • style='width:24px;width:24px" Merupakan Ukuran icon SVG yang akan kamu gunakan
  • fill="#000000 Merupakan Warna dari icon SVG tersebut
#A.2. Memasang Dengan CSS Dan HTML
1. HTML ↴
<svg viewBox="0 0 24 24">
    <path d="M12,4A4,4 0 0,1 16,8A4,4 0 0,1 12,12A4,4 0 0,1 8,8A4,4 0 0,1 12,4M12,14C16.42,14 20,15.79 20,18V20H4V18C4,15.79 7.58,14 12,14Z" />
</svg>
2. CSS ↴
svg {width:24px;height:24px} /* UKURAN ICON */
svg path {fill:#000000} /* WARNA ICON */
Dalam pemasangan SVG dengan CSS dan HTML, kalian temukan terlebih dahulu ID/Class yang ingin kalian pasangi icon SVG tersebut. Misalkan berada di Bagian HTML Navigasi Menu :
<div id='cssmenu'>
<li><a href='https://anirocksite.com'><svg bla bla bla></svg></a></li>
</div>
Maka cssnya harus seperti ini :
#cssmenu svg {width :24px;height:24px}
#cssmenu svg path {fill:#000000}
#A.3. Memasang Hanya Dengan CSS
Untuk ini temukan dulu ID/Class ( Disini saya akan membuatnya berada di Navigasi Menu) yang akan kamu tambahkan icon SVGnya sebagai background image dari :before atau :after, menggunakan cara ini memang sedikit ribet dari 2 cara diatas, namun jika kamu ingin menggunakan cara ini lihatlah ↴
#cssmenu li.Akun a:before{-webkit-mask-image:url("data:image/svg+xml,<svg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'><path d='d="M12,4A4,4 0 0,1 16,8A4,4 0 0,1 12,12A4,4 0 0,1 8,8A4,4 0 0,1 12,4M12,14C16.42,14 20,15.79 20,18V20H4V18C4,15.79 7.58,14 12,14Z'></path></svg>");
/* ISI KODE CSS LAIN JIKA INGIN */
}
Menggunakan cara memasang hanya dengan CSS, kamu harus merubah terlebih dahulu pada simbol simbol yang ada di icon SVG tersebut. Misalnya :
  • Simbol < ubah menjadi %3C 
  • Simbol > ubah menjadi %3E 
  • Simbol # ubah menjadi #23
Cara itu dilakukan agar icon SVG diterima untuk dipasang hanya dengan CSS, jika tidak dilakukan maka tidak akan ada hasilnya.
Sekian penjelasan sekaligus bagaimana cara memasang icon SVG. Sebelum saya mengetahui bagaimana cara memasang icon SVG, saya mengetahui cara pemasangannya lewat blog Igniel, dan jika penjelasan cara pemasangan saya ini kurang dapat kamu pahami, kamu dapat membacanya dari blog Igniel langsung.

Bagi kamu yang berpikir cara menggunakan/memasang icon SVG sedikit lebih ribet ketimbang FontAwesome yang hanya dengan masang script terus pasang fontAwesome baik dari CSS ataupun langsung dari HTML itu tidak salah, namun seperti yang dijelaskan sebelumnya, icon SVG dapat mempercepat web/blog kamu.
Sumber Ide : https://www.igniel.com/

Creativity of codes and exploiting, with code we can do something fun.
Facebook Instagram Twitter
Show Comments!
Hide comments

0 Response to "Memasang Dan Mempercepat Web Menggunakan Icon SVG"

Kebijakan berkomentar :

Berkomentarlah dengan tata bahasa yang baik, agar orang tau sebijak apa karakter anda melalui kata-kata,

Silahkan berkomentar apapun selagi masih berhubungan dengan halaman postingan ini,

Dilarang berkomentar menggunakan Link Aktif,

Centang Notife Me agar mendapatkan notifikasi balasan komentar admin melalui Email.

Post a Comment

Iklan Atas Artikel

Iklan Tengah Artikel

Iklan Tengah Artikel 2

Iklan Bawah Artikel

Copyright © 2017 - 2020 Anirock Site - All Rights Reserved Created With