Penulis: Moch Adnan dipublikasikan: 13 Agustus 2023
Selamat berjumpa kembali sobat Moch Adnan Blog, kali ini saya ingin berbagi pengalaman tentang cara menggunakan icon material SVG kedalam halaman blogger. Oiya, artikel ini pun tidak jauh berbeda dengan artikel yang pernah saya publish sebelumnya. Yakni tentang cara memperindah tampilan halaman blog, dengan menggunakan beberapa icon, klik disini untuk membaca kembali dan membandingkan, apakah lebih baik menggunakan Google material icon atau icon SVG. 

cara menggunakan ikon SVG kedalam halaman blogger

Sebelum lanjut ke tahap penerapannya dan menggunakan icon SVG ke dalam halaman blog, sedikit perkenalan mengenai apa itu gambar atau icon SVG dan seperti apa bentuknya. 

Apa itu SVG

SVG adalah singkatan dari Scalable Vector Graphic. Kualitas gambar SVG bisa tetap terjaga. Gambar dalam format ini (SVG) tidak akan blur ataupun pecah, meskipun sudah kita zoom dan memperbesar resolusinya sampai maksimal. 

SVG menawarkan banyak kelebihan jika dibandingkan dengan JPEG, PNG, ataupun GIF. Terutama jika digunakan untuk menampilkan logo, ilustrasi dan juga ikon.

Seperti apa bentuknya

Gambar atau ikon dalam format SVG umumnya adalah sederet kode xml seperti berikut ini
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><title>home-outline</title><path d="M12 5.69L17 10.19V18H15V12H9V18H7V10.19L12 5.69M12 3L2 12H5V20H11V14H13V20H19V12H22" /></svg>

Untuk menggunakannya diperlukan kode CSS  Apakah tanpa melibatkan sebuah kode CSS gambar atau ikon dalam format SVG ini bisa tampil? Tentu saja bisa. Namun hasil gambar/ikon tersebut kadang akan tampak terlihat besar. 

home-outline
Oleh karena itu sangat dianjurkan untuk menambahkan kode CSS kedalamnya agar penerapan tinggi dan lebar bisa disesuaikan dengan tampilan halaman blog/web.

Cara memasang ikon berformat SVG kedalam halaman blog

Dalam tutorial ini saya menggunakan icon SVG ke dalam halaman blog ini, maka dapat sobat lihat pada bagian menu atas halaman, menu sidebar blog ini, menu footer blog dan beberapa tombol berbagi media sosial icon yang terpasang diakhiran artikel blog. 

Semua kode CSS nya tersimpan dalam tema blog, Contoh kode CSSnya antara lain seperti berikut:
Kode


svg{width: 20px; height: 20px; fill: var(--body-color);}

Angka yang saya tandai merah bertujuan untuk mengatur ukuran gambar berformat SVG ini dan pada bagian fill: sengaja saya warnai merah juga, tujuannya untuk menandai perubahan warna latar gambar. 

Tambahkan gambar berformat SVG

Buka tautan link berikut untuk menemukan banyak icon yang bisa sobat gunakan secara gratis
Link
https://pictogrammers.com/library/mdi/
cara menggunakan ikon SVG kedalam halaman blogger
Foto: pictogrammers.com


Kemudian ketik nama icon yang akan sobat gunakan dalam kotak pencarian situs pictogrammers.com

cara menggunakan ikon SVG kedalam halaman blogger
Foto: pictogrammers.com

lalu copy kode iconnya dan pastekan di tempat yang ingin sobat pasangi ikon, misal seperti ini:

Home

contacts
Contact


About

Sampai disini maka pemasangan icon berformat SVG sudah dianggap selesai.

Kesimpulan
Secara pribadi saya lebih menyukai menggunankan icon berformat SVG, soalnya saya dapat melihat sangat jelas perbedaannya terlebih ketika halaman sedang mengalami perpindahan. bagaimana dengan sobat ?