Testování podpory SVG napříč webovými prohlížeči [případová studie]
SVG (Scalable Vector Graphics) je oficiálně podporován všemi hlavními webovými prohlížeči, včetně Internet Exploreru. Podpora zahrnuje širokou škálu softwaru pro editor obrázků, zejména Inkscape, který používá SVG jako svůj nativní formát (Pokud chcete, aby se na SVG obnovoval, klikněte zde).
Co přesně však webové prohlížeče podporují? Zobrazují všechny vykreslovací nástroje soubory SVG a jejich funkce stejným způsobem? A co jejich pokročilé funkce, jako jsou filtry? Tak to zjistíme. Vzali jsme vzorek moderních prohlížečů, včetně těch méně známých, a testovány pomocí SVG souboru vytvořeného pro tento účel.
Testovací obraz
Připravili jsme pro Vás testovací obrázek zaměřený na prvky, které umělci s největší pravděpodobností používají. Mezi testovanými funkcemi jsou: textové cesty a jejich interakce, přechody, gaussovský rozostřovací filtr a nakonec pokročilý kompozitní filtr skládaný z více typů filtrů.
Webové prohlížeče
Blikání motoru
Začali jsme s - zdaleka nejčastějším renderovacím motorem - Blink. Blink je nativní modul pro prohlížeče Google Chrome a Chromium, Opera a WebView v Androidu. Všechny výše uvedené prohlížeče vykreslují testované obrazy stejným způsobem na testovaných platformách.
Ve srovnání s původním obrazem vytvořeným v aplikaci Inkscape nebyly žádné problémy s výjimkou nepatrného rozdílu ve vykreslování efektů skládaných filtrů.
| Prohlížeč | Verze | Plošina | Výsledek |
| Chrom | 43,0,2357,125 | Linux |  |
| Operní | 30,0,1835,59 | Linux | |
| Operní | 30,0,1856,93524 | Android | |
| Operní | 30,0,1835,88 | Okna | |
| Chrome | 38.0.2125.114 | Android | |
| Chrome | 43,0,2357,130 | Okna | |
| Pochodeň | 39,0,0,9626 | Okna |
Stroj Webkit
Podle posledních statistik o používání prohlížeče nepatří mezi první tři pozice do prohlížečů založených na webkitech (od května 2015). Nicméně, tento motor je rozšířený mezi vývojáři. Dále existují různé implementace a vidlice
Všechny testované prohlížeče poskytly náš SVG soubor bez problémů; ve srovnání s Inkscape však byly pozorovány rozdíly ve vykreslování složené filtrační komponenty Specular Lighting.
| Prohlížeč | Verze | Plošina | Výsledek |
| Safari | 8.0.6 | Operační Systém Mac |  |
| Vydra | 0,95 | Linux | |
| QupZilla | 1.8.6 | Linux | |
| QupZilla | 1.8.6 | Okna | |
| Delfín | 10.3.1 | Android | |
| Konqueror | 15.04.2 | Linux | |
| Prohlížeč UC | 10.5.0.575 | Android |
Tridentní motor
Trident je proprietární motor používaný Internet Explorerem verze 4.0 - 11.0. IE interpretoval náš SVG perfektně. Kompozitní vzhled filtru navíc odpovídá nejlepšímu obrazu. Testovali jsme také IE 9, druhou nejpoužívanější IE (od května 2015) a zjistili, že tato verze měla problémy s gaussovským rozostřením a kompozitním filtrem.
To však není překvapení, protože IE 9 bylo původně vydáno před konečným návrhem standardu SVG 1.1 SE, ve kterém byly oficiálně přidány efekty filtru..
| Prohlížeč | Verze | Plošina | Výsledek |
| TJ | 11,0,9600,17843 | Okna |  |
| Prohlížeč | Verze | Plošina | Výsledek |
| TJ | 9,0,8112,1621 | Okna |  |
Gecko motor
Gecko je motor vyvinutý společností Mozilla Corporation a používán ve webovém prohlížeči Firefoxu nebo e-mailovém klientovi Thunderbird. To je také používáno prohlížeči PaleMoon, Waterfox a mnoho dalších vidlic dřívějších verzí Firefoxu. V případě motoru Gecko nebyly výsledky na různých platformách úplně stejné.
Verze systému Windows vykazovala malou chybu při vykreslování textu podél cesty; stejný problém byl pozorován v prohlížečích Firefox a PaleMoon. Stejně jako Webkit se zdá, že Gecko má problémy se správným vykreslením primitivního filtru Specular Lighting.
| Prohlížeč | Verze | Plošina | Výsledek |
| Firefox | 38,0,5 | Linux |  |
| Firefox | 38,0,5 | Android | |
| PaleMoon | 25.5 | Android |
| Prohlížeč | Verze | Plošina | Výsledek |
| Firefox | 38,0,5 | Okna |  |
| PaleMoon | 25.5 | Okna |
Problematické prohlížeče
Jak je vidět výše, všechny nedávné verze hlavních vykreslovačů / prohlížečů prošly testem bez významných potíží. Podívejme se na ty, kteří to neudělali dobře.
Maxthon je multiplatformový prohlížeč vyvinutý v Číně. Podle 20 alternativních webových prohlížečů Fahad Khan pro Windows Maxthon používá motory Trident i Webkit. V Linuxu (v. 1.0.5.3) a Windows (v. 4.4.5.3000) jsme nezaznamenali žádný problém s vykreslováním SVG; na zařízení se systémem Android však nebyly vykresleny ani gaussovské rozostření ani jiné primitivy filtrů.
Prohlížeč CM na našem testovacím přístroji Samsung Galaxy S3, ale také nepodporuje žádný z filtračních efektů popsaných ve specifikaci SVG 1.1 SE.
| Prohlížeč | Verze | Plošina | Výsledek |
| Maxthon | 4.4.6.2000 | Android |  |
| Prohlížeč CM | 5.1.94 | Android |
Konqueror je výchozí prohlížeč pro KDE, jedno z nejpopulárnějších desktopových prostředí Linuxu. Schopnost vykreslovat SVG soubory v Konqueroru závisí na renderovacím enginu. S povoleným WebKitem bylo naše testování SVG vykresleno správně. Výchozí vykreslovací modul Konqueroru, KHTML, však zřejmě postrádá podporu několika funkcí: efekty filtrů se nepoužijí na základní značky objektů a konce konce tahu a text podél objektů cesty nebo objektů se nevykreslí vůbec.
| Prohlížeč | Verze | Plošina | Výsledek |
| Konqueror KHTML | 15.04.2 | Linux |  |
Závěr
V našem testu jsme se zaměřili na podporu SVG formátu v moderních webových renderovacích strojích. Testovali jsme 4 hlavní renderovací stroje a 15 různých prohlížečů včetně populárních jako Maxthon nebo Dolphin. Téměř všechny aktuální verze prohlížečů prošly testem a je těžké vybrat konečného vítěze.
Vypadá to že Podpěra, podpora a správné stohování filtrů je poslední zbývající výzvou pro současné vykreslovací stroje. Když porovnáme náš původní SVG obraz se všemi vykreslenými výsledky, subjektivně nominujeme IE 11 (Trident engine) na první místo.
Je však zřejmé, že Blink engine je v těsné snaze, a proto doporučujeme prohlížeče Blink pro zobrazování SVG souborů. Chcete-li provést rychlý test vlastního oblíbeného prohlížeče, můžete zde použít naši zkušební stránku SVG rendereru.
Poznámka editora: Tento příspěvek je napsán pro Hongkiat.com od Michala Rosta. Michal pracuje jako programátor v biomedicínské společnosti, ale svůj volný čas věnuje vývoji open source aplikací a neziskových webových portálů. Je zakladatelem scalablegfx. Najdete ho na Twitteru.
