Testarea suportului SVG în motoarele de navigare web [Studiu de caz]
SVG (Scalable Vector Graphics) este susținut oficial de toate browserele web principale, inclusiv Internet Explorer. Sprijinul se întinde într-o mare varietate de programe de editare a imaginilor, în special Inkscape, care utilizează SVG ca format nativ (Dacă doriți o reînnoire pe SVG, faceți clic aici).
Dar ce anume susțin browserele web? Toate motoarele de redare afișează fișierele SVG și caracteristicile acestora în același mod? Și cum ar fi caracteristicile lor avansate, cum ar fi filtrele? Ei bine, asta vom afla. Am luat un eșantion de browsere moderne, inclusiv unele dintre cele mai puțin cunoscute, și le-a testat cu un fișier SVG realizat în acest scop.
Imaginea de testare
Am pregatit tabloul nostru de testare concentrandu-ne pe elementele pe care artistii sunt cel mai probabil sa le foloseasca. Printre caracteristicile testate se numără: căi de text și interacțiunile acestora, gradienți, filtru gaussian blur și, în final, un filtru avansat compozit, stivuit din mai multe tipuri de filtre.
Motoare de browser web
Blink motor
Am început cu - cel mai frecvent motor de redare cel mai frecvent - Blink. Blink este motorul nativ pentru browserele Google Chrome și Chromium, Opera și Android WebView. Toate browserele menționate mai sus fac ca imaginile să fie testate în același mod pe platformele testate.
În comparație cu imaginea originală produsă de Inkscape, nu au existat probleme, cu excepția unei mici diferențe în redarea efectelor de filtru stivuite.
| Browser | Versiune | Platformă | Rezultat |
| Crom | 43.0.2357.125 | Linux |  |
| Operă | 30.0.1835.59 | Linux | |
| Operă | 30.0.1856.93524 | Android | |
| Operă | 30.0.1835.88 | ferestre | |
| Crom | 38.0.2125.114 | Android | |
| Crom | 43.0.2357.130 | ferestre | |
| lanternă | 39.0.0.9626 | ferestre |
Webkit motor
Potrivit statisticilor recente de utilizare a browserului, primele trei poziții nu aparțin browserelor bazate pe webkit (din mai 2015). Cu toate acestea, acest motor este foarte răspândit printre dezvoltatori. În plus, există diferite implementări și furci
Toate browserele testate ne-au făcut fișierul SVG fără probleme; totuși, în comparație cu Inkscape, s-au observat diferențe în ceea ce privește redarea luminii Spelare, o componentă a filtrului compozit.
| Browser | Versiune | Platformă | Rezultat |
| Safari | 8.0.6 | MacOS |  |
| Vidra | 0.9.05 | Linux | |
| QupZilla | 1.8.6 | Linux | |
| QupZilla | 1.8.6 | ferestre | |
| Delfin | 10.3.1 | Android | |
| Konqueror | 15.04.2 | Linux | |
| UC Browser | 10.5.0.575 | Android |
Motor trident
Trident este un motor proprietar utilizat de Internet Explorer versiunile 4.0 - 11.0. IE ne-a interpretat perfect SVG-ul. În plus, aspectul filtrului compozit se potrivește cel mai bine imaginii originale. De asemenea, am testat IE 9, al doilea cel mai folosit IE (din mai 2015) și am constatat că această versiune a avut probleme cu blurul gaussian și filtrul compozit.
Aceasta nu este însă o surpriză, deoarece IE 9 a fost lansat inițial înainte de proiectul final al standardului SVG 1.1 SE, în care efectele de filtrare au fost adăugate oficial.
| Browser | Versiune | Platformă | Rezultat |
| IE | 11.0.9600.17843 | ferestre |  |
| Browser | Versiune | Platformă | Rezultat |
| IE | 9.0.8112.16421 | ferestre |  |
Motorul Gecko
Gecko este un motor dezvoltat de Mozilla Corporation și astfel utilizat în browserul web Firefox sau în clientul de e-mail Thunderbird. Este de asemenea folosit de browserele PaleMoon, Waterfox și multe alte furci de versiuni anterioare ale Firefox. În cazul motorului Gecko, rezultatele nu au fost exact identice pe diferite platforme.
Versiunea Windows a prezentat o mică problemă în redarea textului de-a lungul căii; aceeași problemă a fost observată în browserele Firefox și PaleMoon. La fel ca și Webkit, Gecko pare să aibă probleme cu redarea corectă a filtrului Specular Lighting primitiv.
| Browser | Versiune | Platformă | Rezultat |
| Firefox | 38.0.5 | Linux |  |
| Firefox | 38.0.5 | Android | |
| Lună palidă | 25.5 | Android |
| Browser | Versiune | Platformă | Rezultat |
| Firefox | 38.0.5 | ferestre |  |
| Lună palidă | 25.5 | ferestre |
Browserele problematice
După cum se poate vedea mai sus, toate versiunile recente ale motoarelor / browserelor importante de redare au trecut testul nostru fără dificultăți semnificative. Să verificăm pe cei care nu au făcut așa bine.
Maxthon este un browser încrucișat dezvoltat în China. Potrivit lui Fahad Khan, 20 de browsere alternative pentru Windows Maxthon folosesc ambele motoare Trident și Webkit. Nu am observat nicio problemă cu redarea SVG pe Linux (versiunea 1.0.5.3) și Windows (versiunea 4.4.5.3000); totuși, pe un dispozitiv Android nu s-au redat nici măcinare gaussiană, nici alte primitive de filtre.
CM Browser a efectuat rapid pe dispozitivul nostru Samsung Galaxy de testare S3, dar, de asemenea, nu suportă niciunul dintre efectele de filtrare descrise de specificațiile SVG 1.1 SE.
| Browser | Versiune | Platformă | Rezultat |
| Maxthon | 4.4.6.2000 | Android |  |
| CM Browser | 5.1.94 | Android |
Konqueror este un browser implicit pentru KDE, unul dintre cele mai populare medii desktop Linux. Capacitatea de a face fișiere SVG în Konqueror depinde de motorul de randare. Cu ajutorul serviciului WebKit, testul nostru SVG a fost redat corect. Cu toate acestea, motorul de randare implicit Konqueror, KHTML, pare să nu beneficieze de suport pentru mai multe caracteristici: efectele de filtrare nu se aplică la marcatorii de capăt ale obiectului și ale cursei, iar textul de-a lungul căii sau a obiectelor de model nu sunt redate deloc.
| Browser | Versiune | Platformă | Rezultat |
| Konqueror KHTML | 15.04.2 | Linux |  |
Concluzie
În testul nostru ne-am concentrat pe suportul formatului SVG în motoarele moderne de redare web. Am testat 4 motoare principale de redare și 15 browsere diferite, inclusiv cele populare precum Maxthon sau Dolphin. Aproape toate versiunile curente ale browserelor au trecut prin testul nostru și este greu să selectăm un câștigător definitiv.
Se pare ca a sustine și corectă stivuire a primitivelor de filtrare este ultima provocare rămasă pentru motoarele de randare actuale. Atunci când comparăm imaginea SVG originală cu toate rezultatele obținute, propunem subiectiv motorul IE 11 (motorul Trident) pentru prima poziție.
Cu toate acestea, este clar că motorul Blink se află în curs de urmărire și, prin urmare, recomandăm browserele Blink pentru redarea fișierelor SVG. Dacă doriți să efectuați testarea rapidă a propriului browser preferat, nu ezitați să utilizați pagina de testare a imaginilor SVG aici.
Nota editorului: Acest post este scris pentru Hongkiat.com de către Michal Rost. Michal lucrează ca programator într-o companie biomedicală, dar își dedică timpul liber dezvoltării aplicațiilor open source și portalurilor web non-profit. El este fondatorul scalablegfx. Îl puteți găsi pe Twitter.
