Cara Mengganti Icon Blog dengan format SVG

Cara Mengubah Icon Blog dengan format SVG – Mengubah tampilan blog menjadi lebih keren memang menyenangkan. Selain membuat tampilan blog menjadi lebih sedap dipandang, juga dapat membuat pengunjung blog betah berlama-lama di blog.

Bagi yang sedang utak-atik template bog biasanya ingin menambahkan icon pada blognya. Atau ingin mengubah dan mengganti beberapa icon menu yang sebelumnya sudah ada pada blog. Lalu bagaimana cara mengganti ikon pada blog? Dengan sedikit copy-paste kode HTML, kita bisa mengganti icon blog. Yuk kita simak bersama.

Cara Mengganti Icon Blog dengan format SVG

Format Icon Blog SVG

Format gambar SVG atau Scalable Vector Graphics, merupakan suatu format gambar yang digunakan untuk mendefinisikan sebuah grafis dan gambar yang ditampilkan dalam bentuk icon. Format icon SVG ini sangat baik digunakan sebagai icon blog atau website. Kita bisa mendapatkan ikon dalam format SVG melalui pihak ketiga untuk menampilkan sebuah icon di blog.

Ada banyak penyedia icon gratis di internet, contohnya adalah dari Font Awesome dan Google Font. Font Awesome menggunakan script untuk membuat icon pada blog. Meskipun sama-sama menggunakan layanan pihak ketiga namun untuk SVG sendiri lebih ringan dan tidak mengganggu loading blog.

Mengganti format icon SVG, meski memiliki ukuran file yang kecil namun tetap dapat diatur sesuai keinginan. Tampilan dari icon SVG ini tetap baik dan tidak pecah. Kita dapat mengatur besar kecil ukuran icon yang akan kita pakai. Karena itu, untuk tampilan dan loading blog yang tetap ringan disarankan untuk menggunakan icon SVG didalam blog. Untuk penggunaannya, format icon SVG sudah kami pasang pada menu blog ini.

Dalam penggunaannya, icon SVG tidak menggunakan dalam bentuk format gambar apapun tapi dalam bentuk format kode HTML SVG seperti berikut ini:

<svg style="width:24px;height:24px" viewBox="0 0 24 24">
    <path fill="currentColor" d="M12 5.69L17 10.19V18H15V12H9V18H7V10.19L12 5.69M12 3L2 12H5V20H11V14H13V20H19V12H22L12 3Z" />
</svg>

Dengan kita menggunakan kode HTML seperti diatas, icon SVG ini akan meringankan loading blog.

Penggunaan icon SVG pada blog ini sendiri juga tidak terlepas dari perubahan template yang digunakan pada blog ini. Saat pertama kali membeli template dari Theme62 ini, sudah ada icon bawaan template. Namun untuk menyesuaikan kebutuhan niche blog, maka saya mengganti beberapa menu blog termasuk juga iconnya. Lalu bagaimana cara mengganti icon SVG di template HTML blog? Untuk lengkapnya bisa disimak pada langkah dibawah ini.

Mendapatkan Kode Icon SVG Untuk Ikon Blog

Banyak penyedia icon SVG yang bisa kita cari di internet. Ada yang gratis dan ada yang berbayar. Saya cukup menggunakan icon yang gratisan saja. Selain hemat, icon gratisan juga sudah cukup bagus kualitas gambarnya.

Bagi yang jago untuk membuat sendiri icon SVG, tentu bisa menggunakan icon SVG buatan sendiri. Namun bagi yang tidak bisa, kita gunakan saja yang gratisan. Untuk menggunakan icon SVG untuk icon blog, kita buka web penyedia icon SVG di https://materialdesignicons.com. Material Design Icons ini menyediakan ratusan ikon blog dan website. Ada icon menu, emoticon, dan termasuk ikon-ikon sosial media yang sangat lengkap.

Untuk mengganti icon SVG pada blog, silahkan buka dulu link Material Design Icons diatas. Sobat bisa cari bentuk icon yang sesuai dengan keinginan. Kemudian klik salah satu icon yang ingin Sobat gunakan. Saat sobat telah menemukan icon dan melakukan klik maka akan muncul tampilan seperti berikut ini:

Cara Mengganti dan Menggunakan Icon SVG Untuk Ikon Blog

Klik kode </>

Pilih View SVG

Salin kode SVG HTML

Menambahkan kode html icon SVG

Kode html icon SVG bisa sobat gunakan langsung pada template blog. Ada juga yang perlu disesuaikan sesuai dengan script HTML template blog. Contoh untuk yang perlu diubah seperti ini:

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1"  width="24" height="24" viewBox="0 0 24 24">
<path fill="#000000" d="M9,7H13A2,2 0 0,1 15,9V15A2,2 0 0,1 13,17H9V7M11,9V15H13V9H11M12,2A10,10 0 0,1 22,12A10,10 0 0,1 12,22A10,10 0 0,1 2,12A10,10 0 0,1 12,2M12,4A8,8 0 0,0 4,12A8,8 0 0,0 12,20A8,8 0 0,0 20,12A8,8 0 0,0 12,4Z" />
</svg>

Jadikan seperti berikut ini:

<svg height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">
<path d="M9,7H13A2,2 0 0,1 15,9V15A2,2 0 0,1 13,17H9V7M11,9V15H13V9H11M12,2A10,10 0 0,1 22,12A10,10 0 0,1 12,22A10,10 0 0,1 2,12A10,10 0 0,1 12,2M12,4A8,8 0 0,0 4,12A8,8 0 0,0 12,20A8,8 0 0,0 20,12A8,8 0 0,0 12,4Z" fill="#000000"/>
</svg>

Cara mengganti ukuran icon SVG, ganti ukuran pada kode height:24px width:24px; sesuai ukuran icon Sobat mau. Dan untuk mengganti warna dari icon SVG, ganti kode warna pada fill="#ff0000" dengan kode warna yang baru.

Selain menggunakan kode CSS Inline diatas, besar kecil dan warna icon SVG juga bisa menggunakan kode CSS. Untuk mengganti besar kecil icon gunakan kode CSS seperti berikut ini:

.element svg {
   width:24px;
   height:24px;
}

Untuk mengganti warna icon SVG gunakan CSS berikut:

.element svg path {
   fill: black;
}

Demikianlah cara mengganti icon SVG di blog. Saya juga melakukan trial n error dalam mengganti icon blog ArchiePad ini. Dan hasilnya seperti yang sobat lihat pada menu blog ini. Semoga tutorial singkat ini bisa membantu sobat sekalian yang ingin mengubah icon blognya dengan format SVG.