Testing SVG-støtte over nettlesermotorer [Case Study]
SVG (Scalable Vector Graphics) støttes offisielt av alle de viktigste nettleserne, inkludert Internet Explorer. Støtten spenner inn i et bredt utvalg av bilderedigeringsprogramvare, spesielt Inkscape, som bruker SVG som sitt opprinnelige format (Hvis du vil ha en oppdatering på SVG, klikk her).
Men hva støttes nettlesere nettopp? Vis alle gjengivelsesmotorer SVG-filer og deres funksjoner på samme måte? Og hva med deres avanserte funksjoner som filtre? Vel, det er det vi skal finne ut av. Vi tok et utvalg av moderne nettlesere, inkludert noen av de mindre beryktede, og testet dem med en SVG-fil laget for dette formålet.
Testbildet
Vi forberedte vårt testbilde med fokus på elementer som artister mest sannsynlig bruker. Blant de testede funksjonene er: tekstbaner og deres interaksjoner, gradienter, gaussisk sløretfilter og til slutt et avansert komposittfilter stablet fra flere filtertyper.
Nettlesermotorer
Blink motoren
Vi startet med - uten tvil den hyppigste renderingsmotoren - Blink. Blink er den innfødte motoren for Googles Chrome- og Chrome-nettlesere, Opera og Android WebView. Alle de nevnte nettleserne gjør testing av bilder på samme måte på tvers av de testede plattformene.
Sammenlignet med det opprinnelige bildet produsert av Inkscape var det ingen problemer bortsett fra en liten forskjell i gjengivelsen av stablede filtereffekter.
| Nettleser | Versjon | Plattform | Resultat |
| 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 | |
| Lommelykt | 39.0.0.9626 | Windows |
Webkit-motor
I følge de siste nettleserdatastatistikkene tilhører de tre øverste posisjonene ikke webkitbaserte nettlesere (fra mai 2015). Denne motoren er imidlertid utbredt blant utviklere. Futhermore er det ulike implementeringer og gafler av det
Alle testede nettlesere gjengitt vår SVG-fil uten problemer; Likevel ble forskjeller i gjengivelsen av Specular Lighting, en sammensatt filterkomponent, observert i forhold til Inkscape.
| Nettleser | Versjon | Plattform | Resultat |
| Safari | 8.0.6 | Mac os |  |
| Otter | 0.9.05 | Linux | |
| QupZilla | 1.8.6 | Linux | |
| QupZilla | 1.8.6 | Windows | |
| delfin | 10.3.1 | Android | |
| Konqueror | 15.04.2 | Linux | |
| UC Browser | 10.5.0.575 | Android |
Trident motor
Trident er en proprietær motor som brukes av Internet Explorer versjon 4.0 - 11.0. IE tolket vårt SVG perfekt. Dessuten matcher komposittfilterutseendet det opprinnelige bildet best. Vi testet også IE 9, den nest mest brukte IE (fra mai 2015) og fant at denne versjonen hadde problemer med gaussisk uskarphet og komposittfilter.
Dette er ikke en overraskelse, men da IE 9 ble opprinnelig utgitt før det endelige utkastet til SVG 1.1 SE standard, hvor filtereffekter ble offisielt lagt til.
| Nettleser | Versjon | Plattform | Resultat |
| DVS | 11.0.9600.17843 | Windows |  |
| Nettleser | Versjon | Plattform | Resultat |
| DVS | 9.0.8112.16421 | Windows |  |
Gecko-motor
Gecko er en motor utviklet av Mozilla Corporation og brukes dermed i Firefox nettleseren eller Thunderbird e-postklienten. Den brukes også av nettlesere PaleMoon, Waterfox og mange andre gafler fra tidligere Firefox-versjoner. I tilfelle av Gecko-motoren var resultatene ikke akkurat de samme på forskjellige plattformer.
Windows-versjonen viste en liten glitch ved å gjengi teksten langs banen; Det samme problemet ble observert i både Firefox og PaleMoon nettlesere. På samme måte som Webkit, synes Gecko å ha problemer med korrekt gjengivelse av Specular Lighting filter primitive.
| Nettleser | Versjon | Plattform | Resultat |
| Firefox | 38.0.5 | Linux |  |
| Firefox | 38.0.5 | Android | |
| PaleMoon | 25.5 | Android |
| Nettleser | Versjon | Plattform | Resultat |
| Firefox | 38.0.5 | Windows |  |
| PaleMoon | 25.5 | Windows |
Problematiske nettlesere
Som det fremgår av ovenfor, har alle nyere versjoner av store gjengivelsesmotorer / nettlesere bestått vår test uten betydelige vanskeligheter. La oss sjekke ut de som ikke gjorde det så bra.
Maxthon er en nettbasert nettleser utviklet i Kina. Ifølge Fahad Khans 20 alternative nettlesere for Windows bruker Maxthon både Trident og Webkit-motorer. Vi har ikke lagt merke til noe problem med SVG-rendering på Linux (v. 1.0.5.3) og Windows (v. 4.4.5.3000); Men på en Android-enhet ble det ikke gitt gaussisk uskarphet eller andre filterprimitiver.
CM Nettleser utført raskt på vår Samsung Galaxy S3-test, men støtter heller ikke noen av filtereffektene som er beskrevet av SVG 1.1 SE-spesifikasjonen.
| Nettleser | Versjon | Plattform | Resultat |
| Maxthon | 4.4.6.2000 | Android |  |
| CM Nettleser | 5.1.94 | Android |
Konqueror er en standard nettleser for KDE, en av de mest populære Linux-skrivebordsmiljøene. Evnen til å gjengi SVG-filer i Konqueror avhenger av gjengivelsesmotor. Med WebKit aktivert ble testen SVG gjengitt riktig. Konquerors standardgengivelsesmotor, KHTML, ser imidlertid ut til å mangle støtte fra flere funksjoner: Filtereffekter blir ikke brukt på underliggende objekt og strekk slutmarkører, og tekst langs sti eller mønsterobjekter blir ikke gjengitt i det hele tatt.
| Nettleser | Versjon | Plattform | Resultat |
| Konqueror KHTML | 15.04.2 | Linux |  |
Konklusjon
I vår test fokuserte vi på støtte av SVG-format på tvers av moderne webgjenvinningsmotorer. Vi testet 4 hovedgengivelsesmotorer og 15 forskjellige nettlesere, inkludert populære som Maxthon eller Dolphin. Nesten alle nåværende versjoner av nettlesere har gått gjennom vår test, og det er vanskelig å velge en endelig vinner.
Det ser ut som at Brukerstøtte og korrekt stabling av filter primitiver er den siste gjenværende utfordringen for dagens rendering motorer. Når vi sammenligner vårt opprinnelige SVG-bilde med alle de gjengitte resultatene, nominerer vi subjektivt IE 11 (Trident-motoren) til første plass.
Det er imidlertid klart at Blink-motoren er i umiddelbar nærhet, og derfor anbefaler vi Blink-baserte nettlesere for å gjengi SVG-filer. Hvis du vil utføre rask test av din egen favorittleser, kan du gjerne bruke vår SVG renderer testside her.
Redaktørens notat: Dette innlegget er skrevet for Hongkiat.com av Michal Rost. Michal jobber som programmør i et biomedisinsk selskap, men bruker sin fritid til utvikling av åpen kildekode-applikasjoner og non-profit webportaler. Han er grunnleggeren av scalablegfx. Du kan finne ham på Twitter.
