Az SVG támogatás tesztelése a webböngésző motorjai között [Esettanulmány]
Az SVG-t (Scalable Vector Graphics) az összes fő webböngésző, köztük az Internet Explorer támogatja. A támogatás a képszerkesztő szoftverek széles skálájára terjed ki, különös tekintettel az Inkscape-re, amely az SVG-t natív formátumban használja (ha az SVG-vel kapcsolatos frissítést szeretne, kattintson ide).
De pontosan mit támogat a böngészők? Az összes renderelő motor ugyanolyan módon jeleníti meg az SVG fájlokat és azok jellemzőit? És mi van a fejlett funkciókkal, mint a szűrők? Nos, ezt fogjuk megtudni. Vettünk egy mintát a modern böngészők, köztük néhány kevésbé hírhedt is, és tesztelték őket egy erre a célra készített SVG-fájlban.
A tesztkép
A tesztképünket olyan elemekre összpontosítottuk, amelyekre a művészek leginkább használják. A tesztelt funkciók közé tartoznak a következők: szöveges útvonalak és azok kölcsönhatásai, színátmenetek, Gauss-elmosódás-szűrő és végül egy többszörös szűrőtípusból halmozott haladó összetett szűrő.
Webböngésző motorok
Blink motor
Elkezdtük - messze a leggyakoribb renderelő motor - Blink. A Blink a Google Chrome és Chromium böngészők, az Opera és az Android WebView natív motorja. A fent említett összes böngésző a tesztelt platformokon azonos módon teszteli a képeket.
Az Inkscape által előállított eredeti képhez képest nem volt probléma, kivéve egy kis különbséget a halmozott szűrőhatások megjelenítésében.
| böngésző | Változat | Emelvény | Eredmény |
| Króm | 43.0.2357.125 | Linux |  |
| Opera | 30.0.1835.59 | Linux | |
| Opera | 30.0.1856.93524 | Android | |
| Opera | 30.0.1835.88 | ablakok | |
| Króm | 38.0.2125.114 | Android | |
| Króm | 43.0.2357.130 | ablakok | |
| Fáklya | 39.0.0.9626 | ablakok |
Webkit motor
A legutóbbi böngészőhasználati statisztikák szerint az első három pozíció nem tartozik a webkit alapú böngészőkhöz (2015 májusától). Ez a motor azonban elterjedt a fejlesztők körében. Továbbá különböző megvalósítások és villák vannak
Minden tesztelt böngésző gond nélkül megoldotta SVG-fájlunkat; mindazonáltal az Inkscape-hez viszonyítva a kompozit szűrőkomponensek a Specular Lighting renderelésében mutatkozó különbségeket figyeltek meg.
| böngésző | Változat | Emelvény | Eredmény |
| Szafari | 8.0.6 | Mac operációs rendszer |  |
| Vidra | 0.9.05 | Linux | |
| QupZilla | 1.8.6 | Linux | |
| QupZilla | 1.8.6 | ablakok | |
| Delfin | 10.3.1 | Android | |
| Konqueror | 15.04.2 | Linux | |
| UC böngésző | 10.5.0.575 | Android |
Trident motor
A Trident egy saját motor, amelyet az Internet Explorer 4.0 - 11.0 verziója használ. Az IE tökéletesen értelmezte SVG-jét. Ezenkívül a kompozit szűrő megjelenése megegyezik a legjobb képpel. Azt is teszteltük az IE 9-et, a második leggyakrabban használt IE-t (2015 májusától), és megállapítottuk, hogy ez a verzió problémát okozott a Gauss blur és kompozit szűrővel.
Ez azonban nem meglepő, mivel az IE 9 először megjelent az SVG 1.1 SE szabvány végleges tervezete előtt, amelyben a szűrőhatások hivatalosan hozzáadódtak.
| böngésző | Változat | Emelvény | Eredmény |
| AZAZ | 11.0.9600.17843 | ablakok |  |
| böngésző | Változat | Emelvény | Eredmény |
| AZAZ | 9.0.8112.16421 | ablakok |  |
Gecko motor
A Gecko a Mozilla Corporation által kifejlesztett és a Firefox webböngészőben vagy Thunderbird e-mail kliensben használt motor. A PaleMoon, a Waterfox és a korábbi Firefox verziók számos más villája is használható. A Gecko motor esetében az eredmények nem voltak teljesen azonosak a különböző platformokon.
A Windows verzióban egy kis hiba volt a szöveg útvonala mentén; ugyanazt a problémát figyelték meg mind a Firefox, mind a PaleMoon böngészőkben. Csakúgy, mint a Webkit, Gecko-nak problémája van a Specular Lighting szűrő primitív rendszerezésével.
| böngésző | Változat | Emelvény | Eredmény |
| Firefox | 38.0.5 | Linux |  |
| Firefox | 38.0.5 | Android | |
| Sápadt Hold | 25.5 | Android |
| böngésző | Változat | Emelvény | Eredmény |
| Firefox | 38.0.5 | ablakok |  |
| Sápadt Hold | 25.5 | ablakok |
Problémás böngészők
Amint fentebb látható, a nagyobb renderelő motorok / böngészők legújabb változatai jelentős nehézségek nélkül telt el tesztünkből. Nézzük meg azokat, amelyek nem voltak jól.
Maxthon egy Kínában fejlesztett, platformon keresztüli böngésző. Fahad Khan 20 alternatív webböngészője szerint a Windows Maxthon Trident és Webkit motorokat használ. Nem észleltünk semmilyen problémát az SVG rendereléssel Linuxon (1.0.5.3. V.) És a Windows-on (4.4.5.3000 v.); Android-eszközön azonban sem a Gauss-elmosódás, sem más szűrőprimitívek nem kerültek bemutatásra.
CM böngésző a Samsung Galaxy S3 készülékünk tesztelése gyors, de nem támogatja az SVG 1.1 SE specifikáció által leírt szűrőhatásokat sem..
| böngésző | Változat | Emelvény | Eredmény |
| Maxthon | 4.4.6.2000 | Android |  |
| CM böngésző | 5.1.94 | Android |
Konqueror a KDE alapértelmezett böngészője, az egyik legnépszerűbb Linux asztali környezet. Az SVG fájlok Konquerorban történő megjelenítésének képessége a renderelőmotortól függ. A WebKit használatával az SVG tesztelése helyesen történt. Úgy tűnik azonban, hogy a Konqueror alapértelmezett renderelőmotorja, a KHTML, nem támogatja a több funkciót: a szűrőhatások nem alkalmazandók az alapul szolgáló objektumokra és a stroke végpontjelzőire, és az útvonal vagy mintaobjektumok mentén egyáltalán nem történik szöveg.
| böngésző | Változat | Emelvény | Eredmény |
| Konqueror KHTML | 15.04.2 | Linux |  |
Következtetés
Vizsgálatunkban az SVG formátum támogatására összpontosítottunk a modern webes megjelenítési motorokon. 4 fő renderelőmotort és 15 különböző böngészőt teszteltünk, köztük a legnépszerűbbeket, mint a Maxthon vagy a Dolphin. A böngészők majdnem minden aktuális verziója átment a teszten, és nehéz kiválasztani egy végleges győztest.
Úgy tűnik, hogy támogatás és a szűrő primitívek helyes halmozása a legutóbbi kihívás a mai renderelő motorok számára. Amikor összehasonlítjuk az eredeti SVG-képünket az összes megjelenített eredménnyel, akkor az IE 11-et (Trident-motor) szubjektív módon jelöljük az első helyre.
Nyilvánvaló azonban, hogy a Blink motor szoros törekvésben van, ezért javasoljuk a Blink alapú böngészőket az SVG fájlok készítéséhez. Ha a saját kedvenc böngészőjének gyors tesztelését szeretné elvégezni, használja az SVG megjelenítő tesztoldalát.
A szerkesztő megjegyzése: Ezt a bejegyzést a Hongkiat.com írta Michal Rost. Michal egy biomedicinos cég programozója, de szabad idejét a nyílt forráskódú alkalmazások és nonprofit internetes portálok fejlesztésére fordítja. Ő a scalablegfx alapítója. Megtalálhatja őt a Twitteren.
