Cara Menggunakan Ikon SVG pada Blog - Kurazone Blog | Panduan Belajar Blogger Pemula

Cara Menggunakan Ikon SVG pada Blog

Pilihan Editor :

Cara Menggunakan Ikon SVG pada Blog
Penulis Bagus Surochman
2
Modus malam




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
nanio
Cara Menggunakan Ikon SVG pada Blog
Cara Menggunakan Ikon SVG pada Blog Cara Menggunakan Ikon SVG pada Blog Reviewed by Bagus Surochman on 5/09/2018

2 komentar:

  1. Mantap artikelnya. Bisa banget jadi alternatif Fontaewsome karena jauh lebih ringan

    BalasHapus
    Balasan
    1. Iya teh. .SVG memang lebih ringan dari FontAwesome...

      Makasih atas kunjungannya.. 😊😊

      Hapus

1. Berkomentarlah dengan tata bahasa yang baik agar orang lain tahu sebijak apa karakter anda melalui kata kata.
2. Silahkan tulis komentar anda untuk hal apapun yang masih berhubungan dengan post pada halaman ini.
3. Mohon untuk tidak menyertakan Link Aktif pada kolom komentar.
4. Mohon maaf apabila tidak sempat membalas komentar 1 per 1.
5. Komentar selalu di moderasi.