Testiranje podrške za SVG preko web-pretraživača [studija slučaja]
SVG (Scalable Vector Graphics) službeno podržava sve glavne web-preglednike, uključujući Internet Explorer. Podrška obuhvaća širok raspon softvera za uređivanje slika, posebice Inkscape, koji koristi SVG kao izvorni format (ako želite osvježiti SVG, kliknite ovdje).
Ali što točno podržavaju web-preglednici? Da li svi motori za prikazivanje prikazuju SVG datoteke i njihove značajke na isti način? A što je s njihovim naprednim značajkama kao što su filtri? To je ono što ćemo otkriti. Uzeli smo uzorak modernih preglednika, uključujući neke od manje zloglasnih, i testirali su ih SVG datotekom napravljenom u tu svrhu.
Slika testiranja
Pripremili smo našu sliku testiranja s naglaskom na elemente koje će umjetnici najvjerojatnije koristiti. Među testiranim značajkama su: tekstualne staze i njihove interakcije, gradijenti, filter Gaussian Blur i konačno napredni složeni filtar složen iz više vrsta filtara.
Motori web-preglednika
Treperi motor
Počeli smo s - daleko najčešćim mehanizmom za prikazivanje - Blink. Blink je izvorni motor za Googleove preglednike Chrome i Chromium, Opera i Android WebView. Svi gore navedeni preglednici ispituju slike na isti način na testiranim platformama.
U usporedbi s originalnom slikom koju je proizvela tvrtka Inkscape, nije bilo problema osim male razlike u prikazivanju učinaka slaganja filtara.
| preglednik | Verzija | Platforma | Proizlaziti |
| Krom | 43.0.2357.125 | Linux |  |
| Opera | 30.0.1835.59 | Linux | |
| Opera | 30.0.1856.93524 | Android | |
| Opera | 30.0.1835.88 | Windows | |
| Krom | 38.0.2125.114 | Android | |
| Krom | 43.0.2357.130 | Windows | |
| Baklja | 39.0.0.9626 | Windows |
Webkit motor
Prema nedavnoj statistici korištenja preglednika, prva tri mjesta ne pripadaju webkit baziranim preglednicima (od svibnja 2015.). Međutim, ovaj je motor široko rasprostranjen među programerima. Nadalje, tu su različite implementacije i vilice
Svi testirani preglednici su donijeli našu SVG datoteku bez problema; ipak, uočene su razlike u prikazu Specular Lighting, kompozitne filtarske komponente, u usporedbi s Inkscapeom.
| preglednik | Verzija | Platforma | Proizlaziti |
| Safari | 8.0.6 | MacOS |  |
| Vidra | 0.9.05 | Linux | |
| QupZilla | 1.8.6 | Linux | |
| QupZilla | 1.8.6 | Windows | |
| Dupin | 10.3.1 | Android | |
| Konqueror | 15.04.2 | Linux | |
| UC preglednik | 10.5.0.575 | Android |
Trident motor
Trident je vlasnički motor koji koristi Internet Explorer verzije 4.0 - 11.0. IE je naš SVG savršeno interpretirao. Osim toga, izgled kompozitnog filtra najbolje odgovara izvornoj slici. Također smo testirali IE 9, drugi najčešće korišteni IE (od svibnja 2015.) i utvrdili da ova verzija ima problema s Gaussovim zamagljenjem i kompozitnim filtrom.
Međutim, to nije iznenađenje jer je IE 9 prvobitno objavljen prije konačnog nacrta SVG 1.1 SE standarda, u kojem su službeno dodani efekti filtra..
| preglednik | Verzija | Platforma | Proizlaziti |
| IE | 11.0.9600.17843 | Windows |  |
| preglednik | Verzija | Platforma | Proizlaziti |
| IE | 9.0.8112.16421 | Windows |  |
Gecko motor
Gecko je motor koji je razvila Mozilla Corporation i na taj način se koristi u pregledniku Firefox ili Thunderbird e-mail klijentu. Također se koristi u preglednicima PaleMoon, Waterfox i mnogim drugim vilicama ranijih verzija Firefoxa. U slučaju Gecko motora rezultati nisu bili potpuno isti na različitim platformama.
Verzija sustava Windows pokazivala je mali problem u prikazivanju teksta uz put; isti problem uočen je iu preglednicima Firefox i PaleMoon. Baš kao Webkit, čini se da Gecko ima problema s ispravnim prikazivanjem primitive filtra Specular Lighting.
| preglednik | Verzija | Platforma | Proizlaziti |
| Firefox | 38.0.5 | Linux |  |
| Firefox | 38.0.5 | Android | |
| PaleMoon | 25,5 | Android |
| preglednik | Verzija | Platforma | Proizlaziti |
| Firefox | 38.0.5 | Windows |  |
| PaleMoon | 25,5 | Windows |
Problematični preglednici
Kao što se može vidjeti gore, sve najnovije verzije glavnih mehanizama za vizualizaciju / preglednika prošle su naš test bez značajnih poteškoća. Provjerimo one koji to nisu učinili dobro.
Maxthon je preglednik s više platformi razvijen u Kini. Prema Fahad Khanovim 20 alternativnim web preglednicima za Windows, Maxthon koristi i Trident i Webkit motore. Nismo primijetili nikakav problem sa SVG renderiranjem na Linuxu (v. 1.0.5.3) i Windowsu (v. 4.4.5.3000); međutim, na Android uređaju nisu prikazane ni Gaussova zamagljenja niti druge primitivne filtre.
CM Browser brzo smo se testirali na našem testnom uređaju Samsung Galaxy S3, ali također ne podržava niti jedan od učinaka filtriranja opisanih u SVG 1.1 SE specifikaciji.
| preglednik | Verzija | Platforma | Proizlaziti |
| Maxthon | 4.4.6.2000 | Android |  |
| CM Browser | 5.1.94 | Android |
Konqueror je zadani preglednik za KDE, jedno od najpopularnijih Linux desktop okruženja. Mogućnost prikazivanja SVG datoteka u Konqueror-u ovisi o mehanizmu za prikazivanje. Uz omogućen WebKit, testiranje SVG-a ispravno je prikazano. Međutim, čini se da Konqueror-ov zadani mehanizam za renderiranje, KHTML, ne podržava nekoliko značajki: učinci filtra ne primjenjuju se na temeljne oznake objekta i završne crte, a tekst uz objekte putanje ili uzorak uopće nije prikazan.
| preglednik | Verzija | Platforma | Proizlaziti |
| Konqueror KHTML | 15.04.2 | Linux |  |
Zaključak
U našem testu usredotočili smo se na podršku SVG formata na suvremenim motorima za izradu web stranica. Testirali smo 4 glavna motora za prikazivanje i 15 različitih preglednika, uključujući popularne, kao što su Maxthon ili Dolphin. Gotovo sve trenutne verzije preglednika prošle su kroz naš test i teško je odabrati konačnog pobjednika.
Čini se da podrška i ispravno slaganje primitivnih filtara je posljednji izazov za današnje motore za prikazivanje. Kada usporedimo našu originalnu SVG sliku sa svim izvedenim rezultatima, subjektivno imenujemo IE 11 (Trident engine) za prvo mjesto.
Međutim, jasno je da je Blink motor u bliskoj potrazi i stoga preporučujemo preglednike temeljene na treptaju za prikaz SVG datoteka. Ako želite izvesti brzi test vlastitog omiljenog preglednika, slobodno upotrijebite našu testnu stranicu SVG prikazivača ovdje.
Napomena urednika: Ovaj post je za Hongkiat.com napisao Michal Rost. Michal radi kao programer u biomedicinskoj tvrtki, ali svoje slobodno vrijeme posvećuje razvoju open source aplikacija i neprofitnih web portala. Osnivač je skalabilnog gfxa. Možete ga pronaći na Twitteru.
