Cara Menggunakan Ikon SVG pada Blog


KURAZONEScalable Vector Graphics atau yang akrab disebut dengan SVG merupakan bentuk format gambar yang menggunakan XML (eXtensible Markup Language) sebagai dasar untuk membentuk gambar vektor dua dimensi.

SVG adalah format gambar yang dikembangkan oleh Word Wide Web Consortium (W3C) sejak tahun 1999. Sebuah gambar dengan format SVG disimpan dalam bentuk file XML. sumber : wikipedia
Dalam dunia Blogger, ikon SVG ini sudah sangat digemari daripada ikon Fontawesome. Mengapa bisa begitu?

ALASAN

1 Fontawesome menggunakan pemanggil Library Fontawesome yang harus kita pasang kedalam template, biasanya berbentuk kode seperti dibawah ini :
<link href='https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css' rel='stylesheet' type='text/css'/>
yang kemudian dipanggil dengan kode HTML seperti dibawah ini :
<i class="fa fa-ikon"></i>

2 Sedangkan untuk ikon SVG, kita tidak perlu menggunakan pemanggil Library, namun cukup menggunakan pemanggil <svg> dan <path> dari SVG yang akan kita gunakan.

3 Sehingga, proses load halaman akan jauh lebih ringan bagi blog yang menggunakan ikon SVG daripada Blog yang menggunakan ikon Fontawesome.

Cara Mengambil Kode Ikon SVG


1. Kunjungi terlebih dahulu situs "Material Design Icons"
2. Pada kolom pencarian : ketik kata kunci SVG yang ingin digunakan.

Cara Menggunakan Ikon SVG pada Blog
  • Dalam contoh kali ini, kata kunci yang digunakan adalah "Coffe". (lihat tanda panah pada nomor 1).
  • Selanjutnya akan muncul ikon SVG yang sesuai dengan kata kunci. Pilih salah satu model SVG yang akan digunakan. (lihat tanda panah pada nomor 2)

3. Selanjutnya pilih "View SVG"
4. Copy semua kode yang tersedia.

Cara Menggunakan Ikon SVG pada Blog

Cara Menggunakan Ikon SVG pada Blog

Cara Pemasangan Kode Ikon SVG

Kode yang sudah di Copy tadi tinggal diletakkan kedalam bagian HTML pada Blog. Bisa didalam template, ataupun didalam widget. Cukup Paste seperti biasanya.
Keterangan :
  • style="width:24px;height:24px" adalah lebar dan tinggi ikon SVG, silahkan ganti sesuai ukuran yang diinginkan.
    Misal : style="width:10px;height:10px"
  • fill="#000000" adalah warna ikon SVG, silahkan ganti sesuai warna yang diinginkan.
    Misal : fill="red" atau fill="#007bfd"
<svg style="width:24px;height:24px" viewBox="0 0 24 24">
<path fill="#000000" d="M2,21H20V19H2M20,8H18V5H20M20,3H4V13A4,4 0 0,0 8,17H14A4,4 0 0,0 18,13V10H20A2,2 0 0,0 22,8V5C22,3.89 21.1,3 20,3Z" />
</svg>
Nah, sisanya bisa kalian kembangkan sendiri

Penggunaan Umum :

Ikon SVG ini biasanya sering digunakan sebagai ikon yang berdampingan dengan Menu-menu atau permalink pada Blog. Contohnya seperti gambar dibawah ini :
Cara Menggunakan Ikon SVG pada Blog
Menu by Igniel.com


Itulah informasi mengenai "Cara Menggunakan Ikon SVG pada Blog", selamat mencoba dan semoga bermanfaat. Goodluck !!

Referensi : https://www.igniel.com/2017/09/cara-pasang-icon-svg.html





أحدث أقدم