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 spekter 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.

Blink motoren

Vi startet med - uten tvil den vanligste gjengivelsen - Blink. Blink er den innfødte motoren for Googles Chrome- og Chrome-nettlesere, Opera og Android WebView. Alle de ovennevnte 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 imidlertid ikke en overraskelse, da IE 9 først ble utgitt før det endelige utkastet til SVG 1.1 SE standard, der 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 nettleser eller Thunderbird e-postklient. 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 i å 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 større 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 (vers. 4.4.5.3000); Men på en Android-enhet ble det ikke gitt gaussisk uskarphet eller andre filter-primitiver.

CM Browser utført raskt på vår testing Samsung Galaxy S3-enhet, men det støtter heller ikke noen av filtereffektene beskrevet i 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 slår 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 støtte og korrekt stabling av filterprimitiver 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 favoritt nettleser, 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 open source apps og non-profit webportaler. Han er grunnleggeren av scalablegfx. Du kan finne ham på Twitter.

Beste alternativer til Windows 10 innebygde verktøy

Visste du at det er mye kraftigere tredjepartsalternativer for mange av de innebygde verktøyene i Windows? Windows-søk, startmeny, notisblokk, medieverktøy, avinstalleringsprogram og mange andre innebygde verktøy har alternativer som tilbyr flere tilpasningsalternativer, flere funksjoner og generelt mer kraft som du sikkert vil.Her

(Tekniske og design tips)

Slik integrerer du jQuery Mobile i Phonegap / Cordova

jQuery Mobile er en av de beste rammer for å bygge en mobil vennlig nettside og mobil applikasjon. jQuery leveres med en rekke brukergrensesnitt som er kompatible med moderne plattformer som iOS og Android, tidligst på plattformer som Opera Mini og Nokia Symbian.I dette innlegget vil vi utvide fra vår tidligere diskusjon om Phonegap / Cordova. V

(Tekniske og design tips)