Menambahkan Scalable Vector Graphics (SVG) di Browser yang Tidak Didukung
Dalam posting sebelumnya dalam seri ini, kami telah menyebutkan sedikit tentang jebakan SVG dengan browser lama dan menggunakan Raphael.js untuk menyajikan grafik sebagai solusi alternatif. Dalam posting ini kita akan membahas masalah ini lebih lanjut.
Idenya sederhana, kita masih akan menggunakan elemen-elemen SVG sebagai cara utama untuk memberikan gambar pada halaman web kita, tetapi pada saat yang sama kita juga akan menyediakan fungsi mundur sehingga masih dapat dirender di browser yang tidak didukung.
Tentu, ada banyak jalan yang bisa kita ambil, tetapi kita hanya akan melihat ke dua solusi yang saya pikir adalah solusi generik yang lebih baik. Jadi, mari kita lihat bagaimana kita bisa melakukannya.
Menggunakan Elemen Objek
Selain memasukkannya langsung ke dokumen HTML, ada beberapa cara untuk menanamkan SVG. Misalnya, jika kita menyimpan gambar di .svg file, kita bisa menggunakan elemen.
Untuk tujuan demonstrasi, kami telah menambahkan logo Apple dengan SVG ke halaman web kami. Namun, browser yang tidak didukung akan tetap kosong. Untuk mengatasi masalah tersebut, kami dapat menyajikan grafik Bitmap, sebagai berikut;
Dengan cara ini, browser yang didukung masih akan mengambil .svg, sementara browser yang tidak didukung akan membawa grafik Bitmap. Kami telah menambahkan “png” tandai di bawah logo Apple untuk melacak grafik yang sedang dikirim.
Namun, seperti yang telah kami sebutkan di posting lain, Grafik Bitmap tidak sefleksibel dan scalable seperti SVG. Jadi, mari kita lihat solusi lain.
Menggunakan Modernizr
Metode lain yang bisa kita gunakan adalah dengan menggunakan Modernizr. Bagi Anda yang tidak terbiasa dengan perpustakaan JavaScript ini, jangan khawatir kami akan memiliki posting khusus untuk membahas tentang hal itu. Untuk saat ini, terus ikuti kami.
Pertama-tama, mari kita siapkan beberapa perpustakaan JavaScript yang diperlukan, Modernizr.js dan Raphael.js. Kemudian, kita juga perlu mengkonversi .svg file ke dalam format yang didukung Raphael dengan alat ini, ReadySetRaphael.js, dan menyimpan output dalam terpisah .js mengajukan; sebut saja itu svg.js.
Sertakan Modernzr.js dalam dokumen HTML, seperti:
Dan untuk dua file lainnya, raphael.js dan svg.js, kami akan memuatnya secara kondisional, hanya jika dilihat di browser yang tidak didukung.
Dengan Modernizr kami dapat mendeteksi kapabilitas peramban, dalam hal ini kami akan mendeteksi apakah peramban mampu membuat SVG, dan jika tidak, kami akan menyajikan skrip:
if (! Modernizr.inlinesvg) document.write (''
