Cara Memasang Icon SVG di Blog

Cara Memasang Icon SVG

SVG merupakan kepanjangan dari Scalable Vector Graphics (SVG). Adalah format gambar yang menggunakan XML (eXtensible Markup Language) sebagai dasar untuk membentuk gambar vektor dua dimensi.

Sebuah gambar dengan format SVG disimpan dalam bentuk file XML. Ini berarti, SVG dapat dicari, di-index, ditulis dengan bahasa pemograman dan dikompres. Karena berbasis XML, SVG dapat dibuat dan disunting dengan aplikasi teks apa saja.

Pada saat ini semua browser sudah support dengan format SVG, seperti Mozilla Firefox, Internet Explorer, Google Chrome, Opera, dan Safari. Jadi tidak ada kekhawatiran tersendiri bagi para webdeveloper untuk menggunakan format ini karena memang SVG sangat menakjubkan.

Icon SVG vs FontAwesome

Mengapa harus memakai SVG?
Jika kita lihat, biasanya teman-teman web menggunakan Font Awesome atau img yang dihosting untuk menggunakan sebuah icon. Namun hal tersebut justru menambah beban template / web ketika dimuat. Akibatnya halaman akan menjadi tambah lama sampai terlihat semuanya.

Memang sih, dalam penggunaannya Fontawesome menyediakan berbagai macam icon yang bisa kita taruh diblog sesuai keinginan, namun masalahnya jika anda menggunakan Font Awesome, anda harus meletakkan link stylesheet di atas </head>, disitu terkadang saya merasa sedih.. 😁. Dan solusinya kita bisa bermigrasi ke Icon SVG.

Bagaimana caranya? Yuk kita simak tutorial dibawah!

Cara pasang Icon SVG di Blog

1. Pertama-tama silakan kunjungi web Material Design Icon. Disana akan banyak tersedia berbagai macam icon yang bisa anda taruh di blog.
2. Pilih satu ikon sesuai kebutuhan.
3. Pilih tanda "</>" yang berada dibawah, kemudian pilih "View SVG" Copy code yang ditampilkan
4. Letakkan dibagian mana anda ingin meletakkan icon tersebut di blog.

Lihat gambar! (ilustrasi memilih dan menggunakan icon account-circle)

Kode yang ditampilkan diatas adalah sebagai berikut

<svg style="width:24px;height:24px" viewBox="0 0 24 24">
    <path fill="#000000" d="M12,19.2C9.5,19.2 7.29,17.92 6,16C6.03,14 10,12.9 12,12.9C14,12.9 17.97,14 18,16C16.71,17.92 14.5,19.2 12,19.2M12,5A3,3 0 0,1 15,8A3,3 0 0,1 12,11A3,3 0 0,1 9,8A3,3 0 0,1 12,5M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12C22,6.47 17.5,2 12,2Z" />
</svg>

Silakan ganti ukuran dan warna icon (berlatar) sesuai dengan yang dikehendaki.

Selain cara di atas kita bisa juga memakai 2 cara yang lain :

Memasang dengan HTML dan Internal CSS

Untuk cara ini kita hanya menghapus kode "width:24px;height:24px" dan "fill="#000000" lalu memindahkannya ke bagian CSS dengan kode sebagai berikut

svg {width:24px; height:24px}
svg path {fill:#000000}

Sebagai catatan jika anda menaruhnya dalam elemen div, maka wajib hukumnya anda membuat css elemen induk. Contoh : Jika anda memasangnya pada elemen div id='recent-post' maka css yang anda tulis adalah sebagai berikut

#recent-post svg {width:24px;height:24px}
#recent-post svg path{fill:#000000}

Demikian tutorial cara memasang icon svg di blog untuk memperingan blog kita. Terima kasih telah membaca postingan Agung Jaka Nugraha. Wassalam

Cara Memasang Icon SVG di blog