Menguji Sokongan SVG Melalui Mesin Penyemak Laman Web [Kajian Kes]
SVG (Graphics Vector Scalable) disokong secara rasmi oleh semua pelayar web utama, termasuk Internet Explorer. Sokongan ini meliputi pelbagai jenis perisian editor imej, terutamanya Inkscape, yang menggunakan SVG sebagai format aslinya (Jika anda ingin penyegar pada SVG, klik di sini).
Tetapi apa sebenarnya yang disokong oleh penyemak imbas web? Adakah semua enjin rendering memaparkan fail SVG dan ciri mereka dengan cara yang sama? Dan bagaimana dengan ciri lanjutan mereka seperti penapis? Baik itulah yang akan kita ketahui. Kami mengambil sampel pelayar moden, termasuk beberapa yang kurang terkenal, dan diuji mereka dengan fail SVG yang dibuat untuk tujuan ini.
Imej ujian
Kami menyediakan gambar ujian kami yang memberi tumpuan kepada unsur-unsur yang paling mungkin digunakan oleh artis. Antara ciri yang diuji adalah: laluan teks dan interaksi mereka, kecerunan, penapis kabur gaussian dan akhirnya penapis komposit termaju yang disusun daripada lebih banyak jenis penapis.
Enjin penyemak imbas web
Enjin berkedip
Kami bermula dengan - enjin rendering yang paling kerap - Blink. Blink adalah enjin asli untuk pelayar Google Chrome dan Chromium, Opera dan Android WebView. Semua penyemak imbas yang disebutkan di atas memberikan ujian gambar dengan cara yang sama merentasi platform yang diuji.
Apabila dibandingkan dengan imej asal yang dihasilkan oleh Inkscape, tidak ada masalah kecuali sedikit perbezaan dalam menghasilkan kesan penapis yang disusun.
| Pelayar | Versi | Platform | Keputusan |
| 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 |
Enjin Webkit
Mengikut perangkaan penggunaan penyemak imbas terkini tiga kedudukan teratas bukan milik penyemak imbas berasaskan web (pada Mei 2015). Walau bagaimanapun, enjin ini tersebar luas di kalangan pemaju. Lebih-lebih lagi terdapat pelbagai pelaksanaan dan garpu
Semua pelayar yang diuji menjadikan fail SVG kami tanpa masalah; Walau bagaimanapun, perbezaan dalam pencahayaan Lampu Specular, komponen penapis komposit, diperhatikan berbanding dengan Inkscape.
| Pelayar | Versi | Platform | Keputusan |
| Safari | 8.0.6 | MacOS |  |
| Otter | 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 |
Enjin Trident
Trident adalah enjin proprietari yang digunakan oleh versi Internet Explorer 4.0 - 11.0. IE menafsirkan SVG kami dengan sempurna. Selain itu, penampilan penapis komposit sepadan dengan imej asal yang terbaik. Kami juga menguji IE 9, yang kedua paling banyak digunakan IE (sehingga Mei 2015) dan mendapati bahawa versi ini mempunyai masalah dengan blur gaussian dan penapis komposit.
Ini tidak menghairankan, kerana IE 9 pada mulanya dibebaskan sebelum draf terakhir standard SVG 1.1 SE, di mana kesan penapis telah ditambah secara rasmi.
| Pelayar | Versi | Platform | Keputusan |
| IE | 11.0.9600.17843 | Windows |  |
| Pelayar | Versi | Platform | Keputusan |
| IE | 9.0.8112.16421 | Windows |  |
Enjin Gecko
Gecko adalah enjin yang dibangunkan oleh Mozilla Corporation dan dengan itu digunakan dalam pelayar web Firefox atau pelanggan e-mel Thunderbird. Ia juga digunakan oleh pelayar PaleMoon, Waterfox dan banyak garisan lain versi Firefox yang lebih awal. Dalam kes enjin Gecko hasilnya tidak sama persis dengan merentasi platform yang berbeza.
Versi Windows mempamerkan sedikit kesalahan dalam membuat teks sepanjang jalan; masalah yang sama diperhatikan dalam pelayar Firefox dan PaleMoon. Sama seperti Webkit, Gecko nampaknya mempunyai masalah dengan betul membuat penunjuk lampu Specular Lighting primitif.
| Pelayar | Versi | Platform | Keputusan |
| Firefox | 38.0.5 | Linux |  |
| Firefox | 38.0.5 | Android | |
| PaleMoon | 25.5 | Android |
| Pelayar | Versi | Platform | Keputusan |
| Firefox | 38.0.5 | Windows |  |
| PaleMoon | 25.5 | Windows |
Pelayar yang bermasalah
Seperti yang dapat dilihat di atas, semua versi enjin / penyemak imbas utama baru telah lulus ujian kami tanpa sebarang kesulitan yang ketara. Mari kita periksa orang-orang yang tidak melakukannya dengan baik.
Maxthon adalah pelayar lintas platform yang dibangunkan di China. Menurut 20 pelayar web alternatif Fahad Khan untuk Windows Maxthon menggunakan kedua-dua Trident dan mesin Webkit. Kami tidak perasan apa-apa masalah dengan terjemahan SVG di Linux (v. 1.0.5.3) dan Windows (v.4.5.3.3000); Walau bagaimanapun, pada peranti Android, tidak ada blur gauss atau primitip penapis lain yang diberikan.
Pelayar CM dilakukan dengan pantas pada peranti penguji Samsung Galaxy S3 kami, tetapi ia juga tidak menyokong sebarang kesan penapis yang diterangkan oleh spesifikasi SVG 1.1 SE.
| Pelayar | Versi | Platform | Keputusan |
| Maxthon | 4.4.6.2000 | Android |  |
| Pelayar CM | 5.1.94 | Android |
Konqueror adalah penyemak imbas lalai untuk KDE, salah satu persekitaran desktop Linux yang paling popular. Keupayaan untuk membuat fail SVG di Konqueror bergantung kepada enjin rendering. Dengan WebKit membolehkan ujian SVG kami diberikan dengan betul. Walau bagaimanapun, enjin rendering lalai Konqueror, KHTML, kelihatan kurang mendapat sokongan beberapa ciri: kesan penapis tidak digunakan pada objek asas dan penanda akhir stroke, dan teks di sepanjang laluan atau objek corak tidak diberikan sama sekali.
| Pelayar | Versi | Platform | Keputusan |
| Konqueror KHTML | 15.04.2 | Linux |  |
Kesimpulannya
Dalam ujian kami, kami memberi tumpuan kepada sokongan format SVG merentasi enjin rendering web moden. Kami menguji 4 enjin rendering utama dan 15 pelayar yang berbeza termasuk yang popular seperti Maxthon atau Dolphin. Hampir semua pelayar versi semasa melepasi ujian kami dan sukar untuk memilih pemenang yang pasti.
Nampaknya sokongan dan menyusun susun penapis primitif adalah cabaran terakhir untuk enjin rendering masa kini. Apabila kita membandingkan gambar SVG asal kita dengan semua hasil yang diberikan, kita secara subjektif menamakan IE 11 (Trident engine) untuk tempat pertama.
Walau bagaimanapun, adalah jelas bahawa enjin Blink sedang mengejar dan dengan demikian kami mengesyorkan pelayar berasaskan Blink untuk membuat fail SVG. Sekiranya anda ingin melakukan ujian cepat pada penyemak imbas kegemaran anda, sila gunakan laman ujian penghantar SVG kami di sini.
Nota editor: Jawatan ini ditulis untuk Hongkiat.com oleh Michal Rost. Michal bekerja sebagai seorang pengaturcara dalam sebuah syarikat biomedikal tetapi menumpukan masa luangnya untuk pembangunan aplikasi sumber terbuka dan portal web bukan keuntungan. Beliau adalah pengasas scalablegfx. Anda boleh mencari dia di Twitter.
