Cara Mengubah Warna SVG Fill Saat Menggunakan Base-64

Halo sobat jagoan. Beberapa waktu yang lalu saya sempat dibingungkan oleh salah satu langkah dalam mengubah fill atau warna yang terdapat didalam css khususnya saat menggunakan background image url menggunakan SVG. Harus kita akui salah satu teknik untuk mempercepat kinerja loading sebuah blog. Atau yang biasa disebut page speed blog. Faktor nya adalah icon. Banyak orang yang tidak mengetahui dan pada akhirnya memilih font awesome sebagai pendukung dalam design template blog. Namun ternyata pada saat memeriksa kecepatan load sebuah website. Akan terbentur dengan beberapa permasalahan.karena font awesome sendiri memerlukan pemanggil javascript eksternal. Dan ini salah satu dalang kenapa website menjadi sangat lambat. KArena harus meload halaman sebanyak 2 kali.

Untuk memasang icon svg didalam blog bisa menggunakan 2 cara yakni menggunakan HTML dan Internal didalam CSS. Bagi sebagian orang memasang svg ini langsung melalui html nya alasannya karena mudah saat diganti warnanya dengan menggunakan css.contoh :

Kode HTML

<svg viewBox="0 0 24 24">
<path d="M12 2.04C6.5 2.04 2 6.53 2 12.06C2 17.06 5.66 21.21 10.44 21.96V14.96H7.9V12.06H10.44V9.85C10.44 7.34 11.93 5.96 14.22 5.96C15.31 5.96 16.45 6.15 16.45 6.15V8.62H15.19C13.95 8.62 13.56 9.39 13.56 10.18V12.06H16.34L15.89 14.96H13.56V21.96A10 10 0 0 0 22 12.06C22 6.53 17.5 2.04 12 2.04Z"></path>
</svg>

Kode CSS

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

Diatas merupakan cara umum untuk memasang icon svg di blog. Namun bagaimana saat kita meletakan icon ini sebagai internal CSS menggunakan background-image : url atau background : url contoh :

#featured-share::before {
content: "";
width: 2.5rem;
height: 2.5rem;
display: inline-block;
vertical-align: -5px;
margin-right: .5rem;
background: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M18,16.08C17.24,16.08 16.56,16.38 16.04,16.85L8.91,12.7C8.96,12.47 9,12.24 9,12C9,11.76 8.96,11.53 8.91,11.3L15.96,7.19C16.5,7.69 17.21,8 18,8A3,3 0 0,0 21,5A3,3 0 0,0 18,2A3,3 0 0,0 15,5C15,5.24 15.04,5.47 15.09,5.7L8.04,9.81C7.5,9.31 6.79,9 6,9A3,3 0 0,0 3,12A3,3 0 0,0 6,15C6.79,15 7.5,14.69 8.04,14.19L15.16,18.34C15.11,18.55 15.08,18.77 15.08,19C15.08,20.61 16.39,21.91 18,21.91C19.61,21.91 20.92,20.61 20.92,19A2.92,2.92 0 0,0 18,16.08Z' fill='%23fff'/%3E%3C/svg%3E") center no-repeat;
}

Catatan :
Baca Juga:
Cara Mengatasi 403 Forbidden Saat Ganti Permalink Wordpress
Enam Cara Efektif Mengubah Ide Menjadi Bisnis
Cara Membuat Konten Situs Web Unik Menggunakan Alat AI
Cara mengunci aplikasi di hape vivo menggunakan password
Cara Menggunakan Google Maps Tanpa Internet…
Bahaya Menggunakan auto generate content (AGC) Bagi Blog
Didalam background : url diatas terdapat simbol simbol seperti %3C ini merupakan wujud dari simbol < sedangkan %3E merupakan wujud dari simbol > Dan pada fill terdapat kode %23 yang merupakan wujud dari simbol kode hex # warna jadi terjemahan dari kode fill diatas %23fff adalah #fff yang berarti warna putih

Nah jadi untuk mengganti warna fill yang terdapat pada css background diatas kalian hanya perlu mengganti kode hex nya saja. Atau kalian bisa juga dengan memasukan kode rgb warna. Atau kode default color seperti red blue dan lain lain. Contoh penggunaannya seperti ini :

Untuk mempermudah kalian memahami warna silahkan kunjungi website berikut: https://hslpicker.com/

Oke sekarang kita coba untuk mengganti warna nya menjadi merah Secara default kode red merah jika dipanggil menggunakan kode hex menjadi #ff0000 silahkan pastekan kode hex didalam hslpicker bagian hex

Oke diatas nampak kode rgba dan hsla kode tersebut sama nilainya dengan kode hex dan default color dari warna merah. Itu bisa kita gunakan untuk fill diinternal CSS

Cara penggunaannya ganti kode fill background:url diatas menjadi