Solusi Background Svg Tidak Tampil Di Firefox

Sebenarnya SVG merupakan file image yang direkomendasikan W3C untuk web alasannya ialah mendukung untuk semua modern browser pada desktop dan mobile, namun masih banyak pengembang yang belum memanfaatkannya. SVG mempunyai ukuran yang kecil namun tetap anggun dikala tampil pada layar retina maupun dikala di zoom.

Alih-alih SVG mendukung semua modern browser, kemudian kenapa justru background SVG tidak tampil di browser Firefox?

Ya, kita sanggup memakai SVG sebagai background-image pada style CSS dengan memakai data URI atau base64, namun jikalau kita tidak teliti maka background-nya tidak tampil fi browser Firefox.

SVG sanggup dipakai sebagai background-image pada CSS dengan data URI ibarat teladan di bawah ini.

 .social-icon-fb {
         background:url("data:image/svg+xml;charset=utf8,%3csvg viewBox='0 0 24 24' width='24' height='24' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3e%3cg%3e%3cpath style='fill:#4867aa' d='M5,3H19A2,2 0 0,1 21,5V19A2,2 0 0,1 19,21H5A2,2 0 0,1 3,19V5A2,2 0 0,1 5,3M18,5H15.5A3.5,3.5 0 0,0 12,8.5V11H10V14H12V21H15V14H18V11H15V9A1,1 0 0,1 16,8H18V5Z'%3e%3c/path%3e%3c/g%3e%3c/svg%3e") no-repeat;
 }

Jika ingin mengatur ukuran ikonnya, sanggup menambahkan instruksi background-size: 50px 50px; (ukuran aslinya 24x24).

Namun dengan instruksi CSS ibarat di atas, maka ikon sebagai background-image tidak akan tampil di browser firefox, sementara di browser chrome tampil tanpa masalah.

Penyebabnya ialah instruksi hash # pada instruksi warna hex pada instruksi style='fill:#4867aa' (kode ini untuk memperlihatkan warna pada SVG).

Nah solusi supaya background SVG ini tampil pada browser Firefox, silahkan ganti instruksi hash # dengan %23 sehingga menjadi ibarat ini style='fill:%234867aa'

Semoga bermanfaat.
Sumber https://www.kompiajaib.com/

Share this post