Preskušanje podpore SVG-jev po vseh spletnih brskalnikih (študija primera)
SVG (Scalable Vector Graphics) je uradno podprt z vsemi glavnimi spletnimi brskalniki, vključno z Internet Explorerjem. Podpora zajema široko paleto programske opreme za urejanje slik, zlasti Inkscape, ki uporablja izvorno obliko SVG (če želite osvežitev na SVG, kliknite tukaj).
Toda kaj točno podpirajo spletni brskalniki? Ali vsi motorji za upodabljanje prikazujejo datoteke SVG in njihove funkcije na enak način? Kaj pa njihove napredne funkcije, kot so filtri? No, to bomo tudi ugotovili. Vzeli smo vzorec sodobnih brskalnikov, vključno z nekaterimi manj zloglasnimi, in jih je testiral z datoteko SVG, izdelano v ta namen.
Preskusna slika
Pripravili smo testno sliko, ki se osredotoča na elemente, ki jih bodo umetniki najverjetneje uporabljali. Med preizkušenimi značilnostmi so: besedilne poti in njihove interakcije, gradienti, filter Gaussian Blur in končno napredni kompozitni filter, ki je zložen iz več vrst filtrov.
Motorji spletnega brskalnika
Blink motor
Začeli smo z - daleč najbolj pogostim motorjem - Blink. Blink je izvorni gonilnik za brskalnike Google Chrome in Chromium, Opera in Android WebView. Vsi zgoraj omenjeni brskalniki testirajo slike na enak način na preizkušenih platformah.
V primerjavi s prvotno sliko, ki jo je ustvaril Inkscape, ni bilo nobenih težav, razen rahle razlike v upodabljanju učinkov filtrov.
Brskalnik | Različica | Platforma | Rezultat |
Krom | 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 | |
Torch | 39.0.0.9626 | Windows |
Webkit motor
Glede na nedavne statistične podatke o uporabi brskalnika prve tri pozicije ne pripadajo spletnim brskalnikom (od maja 2015). Vendar pa je ta motor zelo razširjen med razvijalci. Poleg tega so na voljo različne izvedbe in vilice
Vsi testirani brskalniki so naredili našo datoteko SVG brez težav; Kljub temu so bile v primerjavi z Inkscapeom ugotovljene razlike v izdelavi kompozitne komponente Specular Lighting.
Brskalnik | Različica | Platforma | Rezultat |
Safari | 8.0.6 | MacOS | |
Vidra | 0.9.05 | Linux | |
QupZilla | 1.8.6 | Linux | |
QupZilla | 1.8.6 | Windows | |
Dolphin | 10.3.1 | Android | |
Konqueror | 15.04.2 | Linux | |
UC brskalnik | 10.5.0.575 | Android |
Tridentni motor
Trident je lastniški motor, ki ga uporabljajo različice Internet Explorerja 4.0 - 11.0. IE je naš SVG odlično interpretiral. Poleg tega se videz kompozitnega filtra najbolje ujema z izvirno sliko. Preizkusili smo tudi IE 9, drugo najpogosteje uporabljeno IE (od maja 2015) in ugotovili, da je ta različica imela težave z Gaussovim zamegljevanjem in sestavljenim filtrom.
To pa ni presenetljivo, saj je bil IE 9 prvotno izdan pred končnim osnutkom standarda SVG 1.1 SE, v katerem so bili uradno dodani filtrirni učinki..
Brskalnik | Različica | Platforma | Rezultat |
IE | 11.0.9600.17843 | Windows |
Brskalnik | Različica | Platforma | Rezultat |
IE | 9.0.8112.16421 | Windows |
Gecko motor
Gecko je motor, ki ga je razvila Mozilla Corporation in se tako uporablja v brskalniku Firefox ali odjemalcu e-pošte Thunderbird. Uporabljajo ga tudi brskalniki PaleMoon, Waterfox in številne druge vile prejšnjih različic Firefoxa. V primeru motorja Gecko rezultati niso bili popolnoma enaki na različnih platformah.
Različica Windows je pokazala malo napake pri prikazovanju besedila vzdolž poti; isti problem so opazili v brskalnikih Firefox in PaleMoon. Tako kot Webkit, se zdi, da ima Gecko težave z pravilno predstavitvijo filtra Specular Lighting primitive.
Brskalnik | Različica | Platforma | Rezultat |
Firefox | 38.0.5 | Linux | |
Firefox | 38.0.5 | Android | |
PaleMoon | 25.5 | Android |
Brskalnik | Različica | Platforma | Rezultat |
Firefox | 38.0.5 | Windows | |
PaleMoon | 25.5 | Windows |
Problematični brskalniki
Kot je razvidno zgoraj, so vse novejše različice večjih motorjev / brskalnikov za upodabljanje opravile test brez večjih težav. Oglejmo si tiste, ki tega niso naredili dobro.
Maxthon je večplastni brskalnik, razvit na Kitajskem. Po 20-ih alternativnih spletnih brskalnikih Fahad Khan za Windows Maxthon uporablja motorje Trident in Webkit. V Linuxu (v. 1.0.5.3) in Windows (v. 4.4.5.3000) nismo opazili nobenih težav z upodabljanjem SVG; Vendar pa na napravi Android ni bilo upodobljeno niti Gaussovo zamegljenje niti drugi primitivni filtri.
CM Browser na testni napravi Samsung Galaxy S3 se je hitro izvedel, vendar tudi ne podpira nobenega od filtrov, ki jih opisuje specifikacija SVG 1.1 SE.
Brskalnik | Različica | Platforma | Rezultat |
Maxthon | 4.4.6.2000 | Android | |
CM Browser | 5.1.94 | Android |
Konqueror je privzeti brskalnik za KDE, eno izmed najbolj priljubljenih namiznih okolij Linuxa. Možnost upodabljanja datotek SVG v Konquerorju je odvisna od motorja upodabljanja. Z omogočenim WebKitom smo testiranje SVG opravili pravilno. K Konvertorjevemu privzetemu mehanizmu za upodabljanje, KHTML, pa se zdi, da manjka več funkcij: učinki filtra se ne uporabljajo za osnovne označevalne elemente objekta in konca, besedilo ob objektih poti ali vzorca pa sploh ni upodobljeno..
Brskalnik | Različica | Platforma | Rezultat |
Konqueror KHTML | 15.04.2 | Linux |
Zaključek
V našem testu smo se osredotočili na podporo formata SVG v sodobnih spletnih motorjih za upodabljanje. Preizkusili smo 4 glavne motorje za predvajanje in 15 različnih brskalnikov, vključno s priljubljenimi, kot so Maxthon ali Dolphin. Skoraj vse trenutne različice brskalnikov so šle skozi naš test in težko je izbrati končnega zmagovalca.
Zdi se, da podporo in pravilno zlaganje filtrov je zadnji preostali izziv za današnje upodabljajoče motorje. Ko primerjamo našo izvirno sliko SVG z vsemi prikazanimi rezultati, subjektivno imenujemo IE 11 (Trident motor) za prvo mesto.
Vendar pa je jasno, da je Blink motor v tesnem iskanju in zato priporočamo Blink bazirane brskalnike za upodabljanje datotek SVG. Če želite opraviti hiter preizkus svojega najljubšega brskalnika, ga lahko uporabite tukaj.
Opomba urednika: To delovno mesto je napisal za Hongkiat.com Michal Rost. Michal deluje kot programer v biomedicinskem podjetju, vendar prosti čas posveča razvoju odprtokodnih aplikacij in neprofitnih spletnih portalov. On je ustanovitelj scalablegfx. Najdete ga na Twitterju.