Solusi Background SVG Tidak Tampil Di Firefox

Ditulis oleh: Adhy Suryadi

Ditulis pada: 6/08/2017

Sebenarnya SVG merupakan file image yang direkomendasikan W3C untuk web karena mendukung untuk semua modern browser pada desktop dan mobile, namun masih banyak pengembang yang belum memanfaatkannya. SVG memiliki ukuran yang kecil namun tetap bagus ketika tampil pada layar retina maupun ketika di zoom.

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

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

SVG dapat digunakan sebagai background-image pada CSS dengan data URI seperti contoh 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, bisa menambahkan kode background-size: 50px 50px; (ukuran aslinya 24x24).

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

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

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

Semoga bermanfaat.