Domača » Kodiranje » Preskušanje podpore SVG-jev po vseh spletnih brskalnikih (študija primera)

    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.