Segera Beralih ke Icon SVG Sekarang Juga

Pada kesempatan kali ini Bloggerin ID akan share kepada kalian informasi untuk
Segera Beralih ke Icon SVG Sekarang Juga
sebagai pengganti Font Awesome.

Sebelum membahas icon svg tersebut, memang rata-rata blog maupun website masih
memakai icon Font Awesome yang dari pemasangannya lebih simple tidak perlu
repot-repot memakai gambar ber ekstensi seperti .jpg, .png, maupun .gif.
Menggunakan Font Awesome pasti memiliki kelebihan maupun kekurangan.

Kelebihan dan Kekurangan Font Awesome

Read Also

9 month ago

Makanan dan Minuman yang Memiliki Asupan Kalsium untuk Menjaga Kesehatan Tulang

7 Admin

Kelebihan:

Jenis icon yang disediakan banyak sekali, dalam pemasangannya juga sangat
mudah dengan cara menambahkan kode JavaScript pemanggil dan meletakkan kode
pendek ke tempat yang akan menampilkan icon tersebut. Tidak perlu membuat icon
satu-persatu dengan gambar.

Kekurangan:

Read Also

5 month ago

Cara Mempercepat Loading Blog dengan Script Lazy Load

7 Admin

Sangat lah memperlambat kecepatan loading, terutama pada platform Blogger,
Kenapa begitu? dikarenakan platform Blogger sendiri tidak bisa mengatur cache
dan expired header. Harus pintar pintar mengakalinya, walaupun tidak terlihat
drastis kalau di cek di GTMetrix maupun PageSpeed Insight pasti akan terlihat
lambat kecepatan blog. Pada umumnya contoh dari penggunaan dari Font Awesome:

<link rel="stylesheet" href="https://tokoh.skom.id/?target=https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">

Icon SVG Solusi Pengganti Font Awesome

Icon SVG adalah singkatan dari Scable Vector Graphic. Format gambar
yang sudah dirancang khusus untuk memenuhi kebutuhan website di internet.

Gambar yang ditampilkan tidak akan blur maupun pecah, meskipun di zoom atau
diperbesar resolusinya bahkan sampai maksimal atau yang disebut
Scalable. Dia merupakan bahasa markup yang dapat menampilkan icon atau
gambar dan sudah support disemua browser baik itu mobile atau desktop.

Baca Juga :
Cara Mengatasi Leverage Browser Caching di Blogger

Dimana Bisa Mendapatkan Icon SVG?

Silahkan agan berkunjung ke situs https://www.iconfinder.com/, di
situs tersebut terdapat banyak jenis icon SVG dan tentunya juga banyak yang
gratis (free) untuk dipasangkan di blog agan.

Pilih salah satu gambar yang menurut agan cocok untuk memenuhi kebutuhan blog
sobat. pilih salah satu icon tersebut, kemudian klik
Copy Base64 SVG

Contoh kode seperti dibawah ini:

data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/PjxzdmcgaWQ9IkxheWVyXzEiIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDEyOCAxMjg7IiB2ZXJzaW9uPSIxLjEiIHZpZXdCb3g9IjAgMCAxMjggMTI4IiB4bWw6c3BhY2U9InByZXNlcnZlIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIj48c3R5bGUgdHlwZT0idGV4dC9jc3MiPgoJLnN0MHtmaWxsOiNGRkZGRkY7fQoJLnN0MXtmaWxsOm5vbmU7c3Ryb2tlOiM0NDRCNTQ7c3Ryb2tlLXdpZHRoOjY7c3Ryb2tlLWxpbmVjYXA6cm91bmQ7c3Ryb2tlLWxpbmVqb2luOnJvdW5kO3N0cm9rZS1taXRlcmxpbWl0OjEwO30KCS5zdDJ7ZmlsbDojNzZFQ0ZGO30KCS5zdDN7ZmlsbDojRTRFN0U3O30KCS5zdDR7ZmlsbDojRkY2OTdCO30KCS5zdDV7ZmlsbDojNjU5RUM5O30KCS5zdDZ7ZmlsbDojNDQ0QjU0O30KCS5zdDd7ZmlsbDojQTRGNEM0O30KCS5zdDh7ZmlsbDojMDZBMThDO30KCS5zdDl7ZmlsbDojOEZFNUI1O30KCS5zdDEwe29wYWNpdHk6MC41O2ZpbGw6IzA2QTE4Qzt9Cgkuc3QxMXtvcGFjaXR5OjAuNTt9Cgkuc3QxMntmaWxsOiNGRkRCQUI7fQoJLnN0MTN7ZmlsbDojRDE4NjY5O30KCS5zdDE0e2ZpbGw6I0ZDRjA5RDt9Cgkuc3QxNXtmaWxsOm5vbmU7c3Ryb2tlOiNGRkZGRkY7c3Ryb2tlLW1pdGVybGltaXQ6MTA7fQoJLnN0MTZ7ZmlsbDojRURFQ0VCO30KCS5zdDE3e2ZpbGw6IzRGQkJDNjt9Cjwvc3R5bGU+PGc+PHBhdGggY2xhc3M9InN0NSIgZD0iTTg0LjksNDguMUg3MC43di05LjNjMC0zLjUsMi4zLTQuMyw0LTQuM2MxLjYsMCwxMC4xLDAsMTAuMSwwVjE5LjFMNzAuOCwxOUM1NS41LDE5LDUyLDMwLjUsNTIsMzcuOXYxMC4zICAgaC04LjlWNjRINTJjMCwyMC40LDAsNDUsMCw0NWgxOC43YzAsMCwwLTI0LjgsMC00NWgxMi42TDg0LjksNDguMXoiLz48L2c+PGc+PGc+PHBhdGggY2xhc3M9InN0MCIgZD0iTTcwLjgsMjlsMTMuOCwwLjF2LTEwTDcwLjgsMTlDNTUuNSwxOSw1MiwzMC41LDUyLDM3Ljl2MTBDNTIsNDAuNSw1NS41LDI5LDcwLjgsMjl6Ii8+PC9nPjwvZz48Zz48cGF0aCBjbGFzcz0ic3Q2IiBkPSJNNzAuNywxMTJINTJjLTEuNywwLTMtMS4zLTMtM1Y2N2gtNS45Yy0xLjcsMC0zLTEuMy0zLTNzMS4zLTMsMy0zSDUyYzEuNywwLDMsMS4zLDMsM3Y0MmgxMi43VjY0ICAgYzAtMS43LDEuMy0zLDMtM2g5LjlsMS05LjlINzAuN2MtMS43LDAtMy0xLjMtMy0zdi05LjNjMC01LjEsMy41LTcuMyw3LTcuM2g3LjFWMjJsLTEwLjksMEM2Ni4xLDIyLDU1LDIzLjUsNTUsMzcuOXYxMC4zICAgYzAsMS43LTEuMywzLTMsM2gtOC45Yy0xLjcsMC0zLTEuMy0zLTNzMS4zLTMsMy0zSDQ5di03LjNDNDksMjcuOCw1NC43LDE2LDcwLjgsMTZsMTMuOSwwLjFjMS43LDAsMywxLjMsMywzdjE1LjRjMCwxLjctMS4zLDMtMywzICAgSDc0LjZjLTAuNiwwLTEsMC0xLDEuM3Y2LjNoMTEuMmMwLjgsMCwxLjcsMC40LDIuMiwxYzAuNiwwLjYsMC44LDEuNSwwLjgsMi4zbC0xLjYsMTUuOWMtMC4yLDEuNS0xLjQsMi43LTMsMi43aC05LjZ2NDIgICBDNzMuNywxMTAuNyw3Mi4zLDExMiw3MC43LDExMnoiLz48L2c+PC9zdmc+

Bagaimana cara menerapkan di blog?

Code tersebut masih berbentuk base64 jadi belum bisa diterapkan di blog.
Decode terlebih dahulu ke dalam bentuk text, silahkan kunjungi situs ini
https://base64.guru/converter/decode/text masukan kode base64 tadi
yang sudah di copy sebagai contoh lihat gambar dibawah ini dan kemudian klik
Decode Base64 ke Text

Copy code yang terdapat dalam kolom text, sebagai contoh seperti code dibawah
ini:

<?xml version="1.0" ?><svg id="Layer_1" style="enable-background:new 0 0 128 128;" version="1.1" viewBox="0 0 128 128" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><style type="text/css">
	.st0{fill:#FFFFFF;}
	.st1{fill:none;stroke:#444B54;stroke-width:6;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}
	.st2{fill:#76ECFF;}
	.st3{fill:#E4E7E7;}
	.st4{fill:#FF697B;}
	.st5{fill:#659EC9;}
	.st6{fill:#444B54;}
	.st7{fill:#A4F4C4;}
	.st8{fill:#06A18C;}
	.st9{fill:#8FE5B5;}
	.st10{opacity:0.5;fill:#06A18C;}
	.st11{opacity:0.5;}
	.st12{fill:#FFDBAB;}
	.st13{fill:#D18669;}
	.st14{fill:#FCF09D;}
	.st15{fill:none;stroke:#FFFFFF;stroke-miterlimit:10;}
	.st16{fill:#EDECEB;}
	.st17{fill:#4FBBC6;}
</style><g><path class="st5" d="M84.9,48.1H70.7v-9.3c0-3.5,2.3-4.3,4-4.3c1.6,0,10.1,0,10.1,0V19.1L70.8,19C55.5,19,52,30.5,52,37.9v10.3   h-8.9V64H52c0,20.4,0,45,0,45h18.7c0,0,0-24.8,0-45h12.6L84.9,48.1z"/></g><g><g><path class="st0" d="M70.8,29l13.8,0.1v-10L70.8,19C55.5,19,52,30.5,52,37.9v10C52,40.5,55.5,29,70.8,29z"/></g></g><g><path class="st6" d="M70.7,112H52c-1.7,0-3-1.3-3-3V67h-5.9c-1.7,0-3-1.3-3-3s1.3-3,3-3H52c1.7,0,3,1.3,3,3v42h12.7V64   c0-1.7,1.3-3,3-3h9.9l1-9.9H70.7c-1.7,0-3-1.3-3-3v-9.3c0-5.1,3.5-7.3,7-7.3h7.1V22l-10.9,0C66.1,22,55,23.5,55,37.9v10.3   c0,1.7-1.3,3-3,3h-8.9c-1.7,0-3-1.3-3-3s1.3-3,3-3H49v-7.3C49,27.8,54.7,16,70.8,16l13.9,0.1c1.7,0,3,1.3,3,3v15.4c0,1.7-1.3,3-3,3   H74.6c-0.6,0-1,0-1,1.3v6.3h11.2c0.8,0,1.7,0.4,2.2,1c0.6,0.6,0.8,1.5,0.8,2.3l-1.6,15.9c-0.2,1.5-1.4,2.7-3,2.7h-9.6v42   C73.7,110.7,72.3,112,70.7,112z"/></g></svg>

Jika sudah silahkan pasang ke template sobat, perlu diingat dalam pemasangan
icon SVG ini agan perlu memahami class mana yang akan dipasangi icon SVG ini.
Sebagai contoh saya akan memasang icon SVG ini pada
class="icon-nav" maka contoh kodenya seperti dibawah ini:

<?xml version="1.0" ?><svg class="icon-nav" id="Layer_1" style="enable-background:new 0 0 128 128;" version="1.1" viewBox="0 0 128 128" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><style type="text/css">
	.st0{fill:#FFFFFF;}
	.st1{fill:none;stroke:#444B54;stroke-width:6;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}
	.st2{fill:#76ECFF;}
	.st3{fill:#E4E7E7;}
	.st4{fill:#FF697B;}
	.st5{fill:#659EC9;}
	.st6{fill:#444B54;}
	.st7{fill:#A4F4C4;}
	.st8{fill:#06A18C;}
	.st9{fill:#8FE5B5;}
	.st10{opacity:0.5;fill:#06A18C;}
	.st11{opacity:0.5;}
	.st12{fill:#FFDBAB;}
	.st13{fill:#D18669;}
	.st14{fill:#FCF09D;}
	.st15{fill:none;stroke:#FFFFFF;stroke-miterlimit:10;}
	.st16{fill:#EDECEB;}
	.st17{fill:#4FBBC6;}
</style><g><path class="st5" d="M84.9,48.1H70.7v-9.3c0-3.5,2.3-4.3,4-4.3c1.6,0,10.1,0,10.1,0V19.1L70.8,19C55.5,19,52,30.5,52,37.9v10.3   h-8.9V64H52c0,20.4,0,45,0,45h18.7c0,0,0-24.8,0-45h12.6L84.9,48.1z"/></g><g><g><path class="st0" d="M70.8,29l13.8,0.1v-10L70.8,19C55.5,19,52,30.5,52,37.9v10C52,40.5,55.5,29,70.8,29z"/></g></g><g><path class="st6" d="M70.7,112H52c-1.7,0-3-1.3-3-3V67h-5.9c-1.7,0-3-1.3-3-3s1.3-3,3-3H52c1.7,0,3,1.3,3,3v42h12.7V64   c0-1.7,1.3-3,3-3h9.9l1-9.9H70.7c-1.7,0-3-1.3-3-3v-9.3c0-5.1,3.5-7.3,7-7.3h7.1V22l-10.9,0C66.1,22,55,23.5,55,37.9v10.3   c0,1.7-1.3,3-3,3h-8.9c-1.7,0-3-1.3-3-3s1.3-3,3-3H49v-7.3C49,27.8,54.7,16,70.8,16l13.9,0.1c1.7,0,3,1.3,3,3v15.4c0,1.7-1.3,3-3,3   H74.6c-0.6,0-1,0-1,1.3v6.3h11.2c0.8,0,1.7,0.4,2.2,1c0.6,0.6,0.8,1.5,0.8,2.3l-1.6,15.9c-0.2,1.5-1.4,2.7-3,2.7h-9.6v42   C73.7,110.7,72.3,112,70.7,112z"/></g></svg>

Catatan: Perlu diingat kembali class="icon-nav" diatas hanya
sebagai contoh ya, silahkan menyesuaikan class yang ada di blog agan

Ribet pemasangannya? memang bisa dibilang juga ribet kalau dibandingkan dengan
Font Awesome yang kode pemasangannya lebih sedikit, dengan agan memsang icon
SVG di blog di jamin ampuh buat mempercepat loading pada blog. Silahkan dicob,
jika tedapat kesulitan dalam pemasangan bisa ditanyakan di kolom komentar ya.

Oke sekian yang bisa saya sampaikan tentang informasi untuk
Segera Beralih ke Icon SVG Sekarang Juga
Terima Kasih yang sudah berkunjung semoga bermanfaat bagi kalian semua.