Segera Beralih ke Icon SVG Sekarang
Sebelum membahas tentang icon SVG, rata - rata blog maupun website mungkin sampai sekarang masih banyak yang menggunakan icon Font Awesome.. tinggal s
 |
| Source: triksimple.com |
Segera Beralih ke Icon SVG Sekarang - Sebelum membahas tentang icon SVG, rata - rata blog maupun website mungkin sampai sekarang masih banyak yang menggunakan icon Font Awesome.. tinggal sisipkan font awesomenya didalamnya tidak berlu repot - repot pakai gambar berektensi .jpg / .png / .gif, menggunakan Font Awesome pasti mempunyai kelebihan maupun kekurangan
Kelebihan dan Kekurangan Font Awesome
Kelebihan
Icon Font Awesome sangat membantu dan memperingan pekerjaan, jenis icon yang disediakan banyak sekali tidak perlu repot - repot membuat icon-persatu dengan gambar, layout yang menggunakan Font Awesome yang terlihat cantik pada tampilan blognya.Kekurangan
Sangat memperlambat loading pada blog, kenapa begitu? terutama bagi pengguna platform blogger yang nggak bisa mengatur cache dan expired header. Walaupun tidak terlihat drastis performanya tetapi kalau di cek di GTMetrix atau Google Page Speed Insight, dll bakal tetap menurunkan score kecepatan blog, harus bisa pintar - pintar ngakalinnya. Pada umumnya contoh dari penggunaan Font Awesome :<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">Segera Beralih ke Icon SVG Solusi Pengganti Font Awesome Yang Lebih Ringan
SVG atau Scalable Vector Graphics adalah format yang menggunakan gambar sebagai dasar untuk membuat gambar vektor dua dimensi, gambar bisa ditingkatkan dan diubah ukurannya tanpa kehilangan kualitas gambarnya. Dia merupakan bahasa markup yang sanggup menampilkan icon atau gambar dan sudah support di semua browser, baik itu desktop maupun mobile.
Dimana Bisa Mendapatkan Icon SVG?
Silahkan kunjungi https://www.iconfinder.com/. Disana banyak berbagai jenis icon SVG, yang nantinya kodenya bisa diambil untuk pasangkan di blog
 |
| Source: icofinder.com |
Pilih icon free yang menurut sobat bagus dan cocok untuk penghias blog sobat, setelah sudah memilih salah satu icon KLIK Copy Base64 SVG
 |
| Source: icofinder.com |
Pasti akan muncul code seperti dibawah ini:
data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/PjxzdmcgaWQ9IkxheWVyXzEiIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDEyOCAxMjg7IiB2ZXJzaW9uPSIxLjEiIHZpZXdCb3g9IjAgMCAxMjggMTI4IiB4bWw6c3BhY2U9InByZXNlcnZlIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIj48c3R5bGUgdHlwZT0idGV4dC9jc3MiPgoJLnN0MHtmaWxsOiNGRkZGRkY7fQoJLnN0MXtmaWxsOm5vbmU7c3Ryb2tlOiM0NDRCNTQ7c3Ryb2tlLXdpZHRoOjY7c3Ryb2tlLWxpbmVjYXA6cm91bmQ7c3Ryb2tlLWxpbmVqb2luOnJvdW5kO3N0cm9rZS1taXRlcmxpbWl0OjEwO30KCS5zdDJ7ZmlsbDojNzZFQ0ZGO30KCS5zdDN7ZmlsbDojRTRFN0U3O30KCS5zdDR7ZmlsbDojRkY2OTdCO30KCS5zdDV7ZmlsbDojNjU5RUM5O30KCS5zdDZ7ZmlsbDojNDQ0QjU0O30KCS5zdDd7ZmlsbDojQTRGNEM0O30KCS5zdDh7ZmlsbDojMDZBMThDO30KCS5zdDl7ZmlsbDojOEZFNUI1O30KCS5zdDEwe29wYWNpdHk6MC41O2ZpbGw6IzA2QTE4Qzt9Cgkuc3QxMXtvcGFjaXR5OjAuNTt9Cgkuc3QxMntmaWxsOiNGRkRCQUI7fQoJLnN0MTN7ZmlsbDojRDE4NjY5O30KCS5zdDE0e2ZpbGw6I0ZDRjA5RDt9Cgkuc3QxNXtmaWxsOm5vbmU7c3Ryb2tlOiNGRkZGRkY7c3Ryb2tlLW1pdGVybGltaXQ6MTA7fQoJLnN0MTZ7ZmlsbDojRURFQ0VCO30KCS5zdDE3e2ZpbGw6IzRGQkJDNjt9Cjwvc3R5bGU+PGc+PHBhdGggY2xhc3M9InN0NSIgZD0iTTg0LjksNDguMUg3MC43di05LjNjMC0zLjUsMi4zLTQuMyw0LTQuM2MxLjYsMCwxMC4xLDAsMTAuMSwwVjE5LjFMNzAuOCwxOUM1NS41LDE5LDUyLDMwLjUsNTIsMzcuOXYxMC4zICAgaC04LjlWNjRINTJjMCwyMC40LDAsNDUsMCw0NWgxOC43YzAsMCwwLTI0LjgsMC00NWgxMi42TDg0LjksNDguMXoiLz48L2c+PGc+PGc+PHBhdGggY2xhc3M9InN0MCIgZD0iTTcwLjgsMjlsMTMuOCwwLjF2LTEwTDcwLjgsMTlDNTUuNSwxOSw1MiwzMC41LDUyLDM3Ljl2MTBDNTIsNDAuNSw1NS41LDI5LDcwLjgsMjl6Ii8+PC9nPjwvZz48Zz48cGF0aCBjbGFzcz0ic3Q2IiBkPSJNNzAuNywxMTJINTJjLTEuNywwLTMtMS4zLTMtM1Y2N2gtNS45Yy0xLjcsMC0zLTEuMy0zLTNzMS4zLTMsMy0zSDUyYzEuNywwLDMsMS4zLDMsM3Y0MmgxMi43VjY0ICAgYzAtMS43LDEuMy0zLDMtM2g5LjlsMS05LjlINzAuN2MtMS43LDAtMy0xLjMtMy0zdi05LjNjMC01LjEsMy41LTcuMyw3LTcuM2g3LjFWMjJsLTEwLjksMEM2Ni4xLDIyLDU1LDIzLjUsNTUsMzcuOXYxMC4zICAgYzAsMS43LTEuMywzLTMsM2gtOC45Yy0xLjcsMC0zLTEuMy0zLTNzMS4zLTMsMy0zSDQ5di03LjNDNDksMjcuOCw1NC43LDE2LDcwLjgsMTZsMTMuOSwwLjFjMS43LDAsMywxLjMsMywzdjE1LjRjMCwxLjctMS4zLDMtMywzICAgSDc0LjZjLTAuNiwwLTEsMC0xLDEuM3Y2LjNoMTEuMmMwLjgsMCwxLjcsMC40LDIuMiwxYzAuNiwwLjYsMC44LDEuNSwwLjgsMi4zbC0xLjYsMTUuOWMtMC4yLDEuNS0xLjQsMi43LTMsMi43aC05LjZ2NDIgICBDNzMuNywxMTAuNyw3Mi4zLDExMiw3MC43LDExMnoiLz48L2c+PC9zdmc+Bagaimana cara menerapkan di blog?
Code diatas masih belum bisa dipasangkan ke blog karena masih ber format Base64, Decode terlebih dahulu ke dalam bentuk Text silahkan kunjungi situs ini https://base64.guru/converter/decode/text masukan code yang tadi sudah dicopy seperti gambar dibawah ini kemudian klik Decode Base64 ke Text |
| Source: base64.guru |
Copy code yang terdapat pada colom text contohnya seperti 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 code tersebut dalam template harus paham class mana yang akan ditambahkan icon SVG, saya contohan dibawah saya akan memasangkan icon SVG dalam class="icon" maka kodenya seperti dibawah ini:
<?xml version="1.0" ?><svg class="icon" 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>Perlu diingat kembali class diatas hanya sebagai contoh, silahkan menyesuaikan class yang ada di dalam blog sobat 😊😊
Memang kelihatannya agak ribet dalam pemasangannya dibandingkan Font Awesome yag memanggilnya kode lebih sedikit, Tapi dengan sobat memasang icon SVG dijamin ampuh buat mempercepat page speed pada blog sobat. Selamat Mencoba jika ada yang kurang jelas bisa ditanyakan di kolom komentar dibawah ya
Oke sekian yang bisa saya sampaikan tentang Segera Beralih ke Icon SVG Sekarang Terima Kasih yang sudah berkunjung semoga bermanfaat bagi kalian semua.
