SVG toe testimine veebibrauserimootorite abil [Case Study]
SVG-d (skaleeritav vektorgraafika) toetab kõik peamised veebibrauserid, sealhulgas Internet Explorer. Toetus hõlmab mitmesuguseid pildiredaktoritarkvara, eriti Inkscape'i, mis kasutab SVG-d oma emakeelena (kui soovid SVG-l värskendamist, klõpsake siin).
Aga mida veebibrauserid täpselt toetavad? Kas kõik mootorid näitavad SVG-faile ja nende funktsioone samamoodi? Ja kuidas nende täiustatud funktsioonidega nagu filtrid? Noh, see on see, mida me teada saame. Me võtsime valiku kaasaegsetest brauseritest, sealhulgas mõnedest vähem kurikuulsatest, ja testis neid selleks otstarbeks tehtud SVG-failiga.
Testi pilt
Valmistasime oma testimise pildi, keskendudes elementidele, mida kunstnikud kõige tõenäolisemalt kasutavad. Testitud funktsioonide hulgas on: tekstirajad ja nende koostoimed, kalded, gausside hägususe filter ja lõpuks täiustatud komposiitfilter, mis on paigutatud rohkemate filtritüüpide hulka.
Veebibrauseri mootorid
Blink mootor
Me alustasime - kaugelt kõige sagedamini renderdamismootoriga - Blink. Blink on Google'i Chrome'i ja Chromiumi brauserite, Opera ja Android WebView kohalik mootor. Kõik ülalnimetatud brauserid muudavad testitud pilte testitud platvormidel samal viisil.
Võrreldes Inkscape'i originaalpildiga ei olnud probleeme, välja arvatud kerge erinevus virnastatud filtri efektide muutmisel.
| Brauser | Versioon | Platvorm | Tulemus |
| Kroom | 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 | |
| Taskulamp | 39.0.0.9626 | Windows |
Webkiti mootor
Viimaste brauseri kasutusstatistika kohaselt ei kuulu kolm kõige tähtsamat positsiooni veebipõhistele brauseritele (alates 2015. aasta maist). Kuid see mootor on arendajate seas laialt levinud. Veelgi enam, seal on erinevaid rakendusi ja kahvleid
Kõik testitud brauserid muutsid meie SVG-faili probleemideta; sellest hoolimata täheldati komposiitfiltrikomponendi spekulatiivse valguse muutmisel erinevusi Inkscape'iga.
| Brauser | Versioon | Platvorm | Tulemus |
| Safari | 8.0.6 | MacOS |  |
| Otter | 0.9.05 | Linux | |
| QupZilla | 1.8.6 | Linux | |
| QupZilla | 1.8.6 | Windows | |
| delfiin | 10.3.1 | Android | |
| Konqueror | 15.04.2 | Linux | |
| UC-brauser | 10.5.0.575 | Android |
Trident mootor
Trident on varustatud mootor, mida kasutavad Internet Exploreri versioonid 4.0 - 11.0. IE tõlgendas meie SVG-d ideaalselt. Lisaks sobib komposiitfiltrite välimus kõige paremini algse pildiga. Testisime ka IE 9-d, mis on teine enim kasutatud IE (alates 2015. aasta maist) ja leidis, et sellel versioonil on probleeme gausside hägususe ja komposiitfiltriga.
See ei ole siiski üllatav, kuna IE 9 avaldati esialgu enne SVG 1.1 SE standardi lõplikku eelnõu, kus filtri efektid lisati ametlikult.
| Brauser | Versioon | Platvorm | Tulemus |
| IE | 11,0.9600.17843 | Windows |  |
| Brauser | Versioon | Platvorm | Tulemus |
| IE | 9.0.8112.16421 | Windows |  |
Gecko mootor
Gecko on Mozilla Corporationi poolt välja töötatud mootor, mida kasutatakse Firefoxi veebibrauseris või Thunderbirdi e-posti kliendis. Seda kasutavad ka brauserid PaleMoon, Waterfox ja paljud teised varasemad Firefoxi versioonid. Gecko mootori puhul ei olnud tulemused eri platvormidel täpselt samad.
Windowsi versioonil oli tekstil mööda teekonda vähe häireid; sama probleem ilmnes nii Firefoxi kui ka PaleMooni brauserites. Just nagu Webkit, tundub, et Gecko'l on probleeme õigete valgusfiltri primaarsete esitusviisidega.
| Brauser | Versioon | Platvorm | Tulemus |
| Firefox | 38.0.5 | Linux |  |
| Firefox | 38.0.5 | Android | |
| PaleMoon | 25.5 | Android |
| Brauser | Versioon | Platvorm | Tulemus |
| Firefox | 38.0.5 | Windows |  |
| PaleMoon | 25.5 | Windows |
Probleemsed brauserid
Nagu ülalpool näha, on kõik suurte renderimootorite / brauserite viimased versioonid läbinud meie testi ilma oluliste raskusteta. Vaatame neid, kes seda ei teinud.
Maxthon on Hiinas loodud platvormiülene brauser. Fahad Khani 20 alternatiivse veebibrauseri kohaselt kasutab Windows Maxthon nii Tridenti kui ka Webkiti mootoreid. Me ei ole märganud mingeid probleeme SVG renderdamisega Linuxis (v. 1.0.5.3) ja Windowsis (v. 4.4.5.3000); Android-seadmes ei esitatud aga gausside hägusust ega teisi filtri primitiivseid elemente.
CM-brauser testis Samsungi galaxy S3 seadet kiiresti, kuid see ei toeta ka ühtegi SVG 1.1 SE spetsifikatsioonis kirjeldatud filtriefekti.
| Brauser | Versioon | Platvorm | Tulemus |
| Maxthon | 4.4.6.2000 | Android |  |
| CM-brauser | 5.1.94 | Android |
Konqueror on vaikimisi brauser KDE jaoks, mis on üks populaarsemaid Linuxi töölaua keskkondi. Võimalus muuta SVG-failid Konqueroris sõltub renderdamismootorist. WebKitiga võimaldas meie SVG testimine korrektselt. Konquerori vaikimisi renderdamismootor KHTML näib aga olevat puudulik mitmete funktsioonide puhul: filtri efekte ei rakendata aluseks olevate objektide ja löögipunkti markerite suhtes ning teksti mööda teekonda või mustriobjekte ei esitata üldse.
| Brauser | Versioon | Platvorm | Tulemus |
| Konqueror KHTML | 15.04.2 | Linux |  |
Järeldus
Meie testis keskendusime SVG-vormingu toetamisele kaasaegsetes veebi renderimootorites. Testisime 4 peamist renderimootorit ja 15 erinevat brauserit, sealhulgas populaarseid, nagu Maxthon või Dolphin. Peaaegu kõik brauserite praegused versioonid läbisid meie testi ja on raske valida lõplikku võitjat.
Tundub et toetus ja filtri primitiivide õige virnastamine on viimane väljakutse tänapäeva renderimootoritele. Kui võrdleme oma esialgset SVG pilti kõigi esitatud tulemustega, nimetame me esmakordselt IE 11 (Trident mootor) esimese koha.
Siiski on selge, et Blink-mootor on tihedas otsimises ja seega soovitame SVG-failide esitamiseks Blink-põhiseid brausereid. Kui soovite oma lemmikbrauseri kiiret testimist teha, kasutage siin oma SVG-renderite testlehte.
Toimetaja märkus: See postitus on kirjutatud Hongkiat.com-le Michal Rosti poolt. Michal töötab biomeditsiinilise ettevõtte programmeerijana, kuid pühendab oma vaba aega avatud lähtekoodiga rakenduste ja mittetulunduslike veebiportaalide arendamisele. Ta on scalablegfxi asutaja. Leiad ta Twitterist.
