Menguji Dukungan SVG Di Seluruh Mesin Peramban Web [Studi Kasus]
SVG (Scalable Vector Graphics) secara resmi didukung oleh semua browser web utama, termasuk Internet Explorer. Dukungan ini mencakup beragam perangkat lunak penyunting gambar, khususnya Inkscape, yang menggunakan SVG sebagai format aslinya (Jika Anda ingin penyegaran pada SVG, klik di sini).
Tapi apa sebenarnya yang didukung oleh browser web? Apakah semua mesin rendering menampilkan file SVG dan fitur-fiturnya dengan cara yang sama? Dan bagaimana dengan fitur-fitur canggih mereka seperti filter? Nah itulah yang akan kita cari tahu. Kami mengambil sampel browser modern, termasuk beberapa yang kurang terkenal, dan mengujinya dengan file SVG yang dibuat untuk tujuan ini.
Gambar pengujian
Kami menyiapkan gambar pengujian yang berfokus pada elemen yang paling mungkin digunakan oleh seniman. Di antara fitur yang diuji adalah: jalur teks dan interaksinya, gradien, filter gaussian blur dan akhirnya filter komposit canggih yang ditumpuk dari lebih banyak tipe filter.
Mesin peramban web
Mesin kedip
Kami mulai dengan - sejauh ini mesin render yang paling sering - Blink. Blink adalah mesin asli untuk browser Google Chrome dan Chromium, Opera dan Android WebView. Semua browser yang disebutkan di atas membuat gambar pengujian dengan cara yang sama di seluruh platform yang diuji.
Jika dibandingkan dengan gambar asli yang dihasilkan oleh Inkscape, tidak ada masalah kecuali sedikit perbedaan dalam rendering efek filter yang ditumpuk.
| Browser | Versi | Peron | Hasil |
| Chromium | 43.0.2357.125 | Linux |  |
| Opera | 30.0.1835.59 | Linux | |
| Opera | 30.0.1856.93524 | Android | |
| Opera | 30.0.1835.88 | Windows | |
| Chrome | 38.0.2125.114 | Android | |
| Chrome | 43.0.2357.130 | Windows | |
| Obor | 39.0.0.9626 | Windows |
Mesin webkit
Menurut statistik penggunaan browser terbaru, tiga posisi teratas bukan milik browser berbasis webkit (per Mei 2015). Namun, mesin ini tersebar luas di kalangan pengembang. Lebih jauh lagi ada berbagai implementasi dan garpu itu
Semua browser yang diuji membuat file SVG kami tanpa masalah; Namun demikian, perbedaan dalam rendering Specular Lighting, komponen filter komposit, diamati dibandingkan dengan Inkscape.
| Browser | Versi | Peron | Hasil |
| Safari | 8.0.6 | MacOS |  |
| Berang-berang | 0.9.05 | Linux | |
| QupZilla | 1.8.6 | Linux | |
| QupZilla | 1.8.6 | Windows | |
| Lumba-lumba | 10.3.1 | Android | |
| Konqueror | 15.04.2 | Linux | |
| UC Browser | 10.5.0.575 | Android |
Mesin trisula
Trident adalah mesin berpemilik yang digunakan oleh Internet Explorer versi 4.0 - 11.0. IE menafsirkan SVG kami dengan sempurna. Selain itu, tampilan filter komposit paling cocok dengan gambar asli. Kami juga menguji IE 9, IE kedua yang paling banyak digunakan (per Mei 2015) dan menemukan bahwa versi ini memiliki masalah dengan gaussian blur dan filter komposit.
Ini bukan kejutan, karena IE 9 awalnya dirilis sebelum draft final standar SVG 1.1 SE, di mana efek filter ditambahkan secara resmi.
| Browser | Versi | Peron | Hasil |
| YAITU | 11.0.9600.17843 | Windows |  |
| Browser | Versi | Peron | Hasil |
| YAITU | 9.0.8112.16421 | Windows |  |
Mesin tokek
Gecko adalah mesin yang dikembangkan oleh Mozilla Corporation dan dengan demikian digunakan di browser web Firefox atau klien email Thunderbird. Ini juga digunakan oleh browser PaleMoon, Waterfox dan banyak fork lainnya dari versi Firefox sebelumnya. Dalam kasus mesin Gecko, hasilnya tidak persis sama di berbagai platform.
Versi Windows menunjukkan sedikit kesalahan dalam merender teks sepanjang jalur; masalah yang sama diamati di kedua browser Firefox dan PaleMoon. Sama seperti Webkit, Gecko tampaknya memiliki masalah dengan rendering primitif filter Specular Lighting dengan benar.
| Browser | Versi | Peron | Hasil |
| Firefox | 38.0.5 | Linux |  |
| Firefox | 38.0.5 | Android | |
| Bulan pucat | 25.5 | Android |
| Browser | Versi | Peron | Hasil |
| Firefox | 38.0.5 | Windows |  |
| Bulan pucat | 25.5 | Windows |
Browser bermasalah
Seperti dapat dilihat di atas, semua versi mesin rendering utama / browser telah melewati pengujian kami tanpa kesulitan yang berarti. Mari kita periksa yang tidak begitu baik.
Maxthon adalah browser lintas platform yang dikembangkan di Cina. Menurut 20 browser web alternatif Fahad Khan untuk Windows Maxthon menggunakan mesin Trident dan Webkit. Kami belum melihat adanya masalah dengan rendering SVG di Linux (v. 1.0.5.3) dan Windows (v. 4.4.5.3000); Namun, pada perangkat Android tidak ada gaussian blur atau filter primitif lainnya yang diberikan.
Browser CM tampil cepat pada pengujian Samsung galaxy S3 perangkat kami, tetapi juga tidak mendukung efek filter apa pun yang dijelaskan oleh spesifikasi SVG 1.1 SE.
| Browser | Versi | Peron | Hasil |
| Maxthon | 4.4.6.2000 | Android |  |
| Browser CM | 5.1.94 | Android |
Konqueror adalah browser default untuk KDE, salah satu lingkungan desktop Linux paling populer. Kemampuan untuk merender file SVG di Konqueror tergantung pada mesin rendering. Dengan WebKit diaktifkan, pengujian kami SVG diberikan dengan benar. Namun, mesin render default Konqueror, KHTML, tampaknya kurang mendukung beberapa fitur: efek filter tidak diterapkan pada objek yang mendasari dan penanda akhir goresan, dan teks di sepanjang jalur atau objek pola tidak ditampilkan sama sekali.
| Browser | Versi | Peron | Hasil |
| Konqueror KHTML | 15.04.2 | Linux |  |
Kesimpulan
Dalam pengujian kami, kami fokus pada dukungan format SVG di seluruh mesin rendering web modern. Kami menguji 4 mesin render utama dan 15 browser yang berbeda termasuk yang populer seperti Maxthon atau Dolphin. Hampir semua versi browser saat ini melewati pengujian kami dan sulit untuk memilih pemenang yang pasti.
Sepertinya mendukung dan susun yang benar dari filter primitif adalah tantangan terakhir yang tersisa untuk mesin rendering saat ini. Ketika kami membandingkan gambar SVG asli kami dengan semua hasil yang diberikan, kami menominasikan IE 11 (Trident engine) secara subyektif untuk tempat pertama..
Namun, jelas bahwa mesin Blink sedang dalam pengejaran dan karenanya kami merekomendasikan browser berbasis Blink untuk rendering file SVG. Jika Anda ingin melakukan tes cepat pada browser favorit Anda sendiri, silakan gunakan halaman uji renderer SVG kami di sini.
Catatan Editor: Posting ini ditulis untuk Hongkiat.com oleh Michal Rost. Michal bekerja sebagai programmer di perusahaan biomedis tetapi mencurahkan waktu luangnya untuk pengembangan aplikasi sumber terbuka dan portal web nirlaba. Dia adalah pendiri scalablegfx. Anda dapat menemukannya di Twitter.
