Testovanie podpory SVG vo webových prehliadačoch [Case Study]
SVG (Scalable Vector Graphics) je oficiálne podporovaný všetkými hlavnými webovými prehliadačmi vrátane aplikácie Internet Explorer. Podpora zahŕňa širokú škálu softvéru na úpravu obrázkov, najmä Inkscape, ktorý používa SVG ako svoj pôvodný formát (Ak chcete obnoviť SVG, kliknite sem).
Ale čo presne podporujú webové prehliadače? Majú všetky renderovacie motory zobrazovať súbory SVG a ich funkcie rovnakým spôsobom? A čo ich pokročilé funkcie ako filtre? To je to, čo zistíme. Vzali sme vzorku moderných prehliadačov vrátane niektorých menej známych a testovali ich pomocou súboru SVG vytvoreného na tento účel.
Testovací obrázok
Pripravili sme náš testovací obrázok so zameraním na prvky, ktoré umelci s najväčšou pravdepodobnosťou používajú. Medzi testované funkcie patria: textové cesty a ich interakcie, gradienty, gaussian blur filter a nakoniec pokročilý kompozitný filter naskladaný z viacerých typov filtrov.
Motory webového prehliadača
Blokovací motor
Začali sme s - zďaleka najčastejším vykresľovacím motorom - Blink. Blink je natívny motor pre prehliadače Google Chrome a Chromium, Opera a Android WebView. Všetky vyššie uvedené prehliadače robia testovanie obrázkov rovnakým spôsobom na testovaných platformách.
V porovnaní s pôvodným obrázkom, ktorý vytvoril Inkscape, nedošlo k žiadnym problémom s výnimkou nepatrného rozdielu vo vykresľovaní efektov filtrov.
| browser | verzia | Plošina | výsledok |
| chróm | 43.0.2357.125 | linux |  |
| operný | 30.0.1835.59 | linux | |
| operný | 30.0.1856.93524 | Android | |
| operný | 30.0.1835.88 | windows | |
| chróm | 38.0.2125.114 | Android | |
| chróm | 43.0.2357.130 | windows | |
| Fakľa | 39.0.0.9626 | windows |
Webkit engine
Podľa posledných štatistických údajov o používaní prehliadača tri najvyššie pozície nepatria do prehliadačov založených na webkitoch (k máju 2015). Tento motor je však rozšírený medzi vývojármi. Okrem toho existujú rôzne implementácie a vidlice z toho
Všetky testované prehliadače nám poskytli náš súbor SVG bez problémov; napriek tomu sa v porovnaní s Inkscapeom pozorovali rozdiely vo vyhotovení zrkadlového osvetlenia zloženého filtračného komponentu.
| browser | verzia | Plošina | výsledok |
| safari | 8.0.6 | MacOS |  |
| vydra | 0.9.05 | linux | |
| QupZilla | 1.8.6 | linux | |
| QupZilla | 1.8.6 | windows | |
| delfín | 10.3.1 | Android | |
| Konqueror | 15.04.2 | linux | |
| UC prehliadač | 10.5.0.575 | Android |
Tridentový motor
Trident je proprietárny motor používaný programom Internet Explorer verzie 4.0 - 11.0. IE interpretovala naše SVG perfektne. Navyše kompozitný vzhľad filmu zodpovedá pôvodnému obrazu najlepšiemu. Taktiež sme testovali IE 9, druhú najpoužívanejšiu IE (k máju 2015) a zistili sme, že táto verzia mala problémy s gaussovským rozostrením a kompozitným filtrom.
To však nie je prekvapením, pretože IE 9 bol pôvodne prepustený pred konečným návrhom normy SVG 1.1 SE, v ktorej boli oficiálne pridané filtrované efekty.
| browser | verzia | Plošina | výsledok |
| IE | 11.0.9600.17843 | windows |  |
| browser | verzia | Plošina | výsledok |
| IE | 9.0.8112.16421 | windows |  |
Gecko motor
Gecko je motor vyvinutý spoločnosťou Mozilla Corporation a používa sa tak vo webovom prehliadači Firefoxu alebo poštovom klientovi Thunderbirdu. Používajú sa aj prehliadače PaleMoon, Waterfox a mnoho ďalších vidličiek predchádzajúcich verzií Firefoxu. V prípade motora Gecko neboli výsledky na rôznych platformách presne rovnaké.
Verzia systému Windows mala malú chybu pri vykresľovaní textu pozdĺž cesty; rovnaký problém bol zaznamenaný v prehliadačoch Firefox aj PaleMoon. Rovnako ako Webkit, zdá sa, že Gecko má problémy s správnym vykreslením filtrovaného filtrovania Specular Lighting.
| browser | verzia | Plošina | výsledok |
| Firefox | 38.0.5 | linux |  |
| Firefox | 38.0.5 | Android | |
| PaleMoon | 25.5 | Android |
| browser | verzia | Plošina | výsledok |
| Firefox | 38.0.5 | windows |  |
| PaleMoon | 25.5 | windows |
Problémové prehliadače
Ako je možné vidieť vyššie, všetky najnovšie verzie hlavných renderovacích motorov / prehliadačov prešli našimi testami bez výrazných ťažkostí. Poďme sa pozrieť na tie, ktoré tak neurobili.
Maxthon je multiplatformový prehliadač vyvinutý v Číne. Podľa Fahad Khanových 20 alternatívnych webových prehliadačov pre systém Windows Maxthon používa motory Trident aj Webkit. Nevšimli sme si žiadneho problému s vykresľovaním SVG v systéme Linux (v. 1.0.5.3) a Windows (v. 4.4.5.3000); na zariadení so systémom Android však neboli vykreslené gaussovské rozmazanie ani iné primárne filtre.
CM prehliadač sme vykonali rýchle testovanie na našom testovacom zariadení Samsung galaxie S3, ale nepodporuje ani niektorý z filtrových efektov opísaných špecifikáciou SVG 1.1 SE.
| browser | verzia | Plošina | výsledok |
| Maxthon | 4.4.6.2000 | Android |  |
| CM prehliadač | 05.1.94 | Android |
Konqueror je predvolený prehliadač pre KDE, jedno z najpopulárnejších desktopových prostredí Linuxu. Schopnosť vykresľovať súbory SVG v Konqueror závisí od vykresľovacieho motora. So zapnutým funkciou WebKit sme testovali SVG správne. Konštantný vykresľovací mechanizmus Konqueror, KHTML, sa však javí ako bez podpory niekoľkých funkcií: efekty filtrovania sa neuplatňujú na základný objekt a koncové značky zdvihu a text po objektoch cesty alebo vzorky sa vôbec nevytvára.
| browser | verzia | Plošina | výsledok |
| Konqueror KHTML | 15.04.2 | linux |  |
záver
V našom teste sme sa zamerali na podporu formátu SVG v moderných webových renderovacích motoroch. Testovali sme 4 hlavné vykresľovacie motory a 15 rôznych prehliadačov vrátane populárnych ako Maxthon alebo Dolphin. Takmer všetky aktuálne verzie prehliadačov prešli testom a je ťažké vybrať konečného víťaza.
Zdá sa že podpora a správne uloženie filtračných prvkov je poslednou zostávajúcou výzvou pre súčasné vykurovacie motory. Keď porovnáme náš pôvodný obrázok SVG so všetkými vydanými výsledkami, subjektívne navrhujeme IE 11 (motor Trident) na prvom mieste.
Je však jasné, že motor Blink je v tesnej blízkosti a preto odporúčame prehliadanie na blizke pre vykresľovanie súborov SVG. Ak chcete vykonať rýchly test vášho obľúbeného prehliadača, použite našu testovaciu stránku SVG tu.
Poznámka redaktora: Tento príspevok je pre spoločnosť Hongkiat.com napísaný Michalom Rostom. Michal pracuje ako programátor v biomedicínskej spoločnosti, ale venuje svoj voľný čas vývoju aplikácií s otvoreným zdrojovým kódom a neziskových webových portálov. Je zakladateľom scalablegfx. Nájdete ho na Twitteri.
