Test af SVG-understøttelse på tværs af webbrowsermotorer [Case Study]
SVG (Scalable Vector Graphics) understøttes officielt af alle de vigtigste webbrowsere, herunder Internet Explorer. Støtten spænder ind i en bred vifte af billedredigeringssoftware, især Inkscape, der bruger SVG som sit oprindelige format (Hvis du vil have en genopfriskning på SVG, klik her).
Men hvad understøttes netop af webbrowsere? Vis alle gengivelsesmotorer SVG-filer og deres funktioner på samme måde? Og hvad med deres avancerede funktioner som filtre? Det er det, vi skal finde ud af. Vi tog en prøve af moderne browsere, herunder nogle af de mindre berygtede, og testet dem med en SVG-fil lavet til dette formål.
Testbilledet
Vi forberedte vores testbillede med fokus på elementer, som kunstnere mest sandsynligt vil bruge. Blandt de afprøvede funktioner er: tekststier og deres interaktioner, gradienter, gaussisk sløretfilter og endelig et avanceret kompositfilter stablet fra flere filtertyper.
Webbrowser motorer
Blink motor
Vi startede med - langt den hyppigste renderingsmotor - Blink. Blink er den indfødte motor til Googles Chrome og Chrome browsere, Opera og Android WebView. Alle de ovennævnte browsere gør testning af billeder på samme måde på tværs af de testede platforme.
Sammenlignet med det originale billede produceret af Inkscape var der ingen problemer bortset fra en mindre forskel i gengivelse af stablede filtereffekter.
| Browser | Version | Platform | Resultat |
| Chrom | 43.0.2357.125 | Linux |  |
| Opera | 30.0.1835.59 | Linux | |
| Opera | 30.0.1856.93524 | Android | |
| Opera | 30.0.1835.88 | vinduer | |
| Chrome | 38.0.2125.114 | Android | |
| Chrome | 43.0.2357.130 | vinduer | |
| Fakkel | 39.0.0.9626 | vinduer |
Webkit-motor
Ifølge de seneste brugervilkår for browsere tilhører de tre øverste positioner ikke webkitbaserede browsere (fra maj 2015). Denne motor er imidlertid udbredt blandt udviklere. Derudover er der forskellige implementeringer og gafler af det
Alle testede browsere gjorde vores SVG-fil uden problemer; Ikke desto mindre blev forskelle i rendering af Specular Lighting, en sammensat filterkomponent, observeret i sammenligning med Inkscape.
| Browser | Version | Platform | Resultat |
| Safari | 8.0.6 | MacOS |  |
| Odder | 0.9.05 | Linux | |
| QupZilla | 1.8.6 | Linux | |
| QupZilla | 1.8.6 | vinduer | |
| 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, der bruges af Internet Explorer version 4.0 - 11.0. IE fortolker vores SVG perfekt. Desuden matcher det sammensatte filterudseende det originale billede bedst. Vi testede også IE 9, den næst mest anvendte IE (fra maj 2015) og fandt ud af, at denne version havde problemer med gaussisk uskarphed og kompositfilter.
Dette er dog ikke en overraskelse, da IE 9 oprindelig blev udgivet før det endelige udkast til SVG 1.1 SE standard, hvor filtereffekter blev officielt tilføjet.
| Browser | Version | Platform | Resultat |
| IE | 11.0.9600.17843 | vinduer |  |
| Browser | Version | Platform | Resultat |
| IE | 9.0.8112.16421 | vinduer |  |
Gecko motor
Gecko er en motor udviklet af Mozilla Corporation og bruges således i Firefox-browseren eller Thunderbird-e-mail-klienten. Den bruges også af browsere PaleMoon, Waterfox og mange andre gafler fra tidligere Firefox-versioner. I tilfælde af Gecko-motoren var resultaterne ikke helt ens på tværs af forskellige platforme.
Windows-versionen viste en lille fejl i gengivelsen af teksten langs stien; Det samme problem blev observeret i både browsere i Firefox og PaleMoon. Ligesom Webkit synes Gecko at have problemer med korrekt gengivelse af specular Lighting filter primitive.
| Browser | Version | Platform | Resultat |
| Firefox | 38.0.5 | Linux |  |
| Firefox | 38.0.5 | Android | |
| PaleMoon | 25,5 | Android |
| Browser | Version | Platform | Resultat |
| Firefox | 38.0.5 | vinduer |  |
| PaleMoon | 25,5 | vinduer |
Problematiske browsere
Som det ses ovenfor har alle nyere versioner af større gengivelsesmotorer / browsere bestået vores test uden betydelige vanskeligheder. Lad os tjekke dem, der ikke gjorde det så godt.
Maxthon er en platform-browser udviklet i Kina. Ifølge Fahad Khans 20 alternative web browsere til Windows Maxthon bruger både Trident og Webkit motorer. Vi har ikke bemærket noget problem med SVG-gengivelse på Linux (v. 1.0.5.3) og Windows (v. 4.4.5.3000); Men på en Android-enhed blev hverken Gaussian blur eller andre filter primitiver gjort.
CM Browser udført hurtigt på vores test Samsung Galaxy S3-enhed, men det understøtter heller ikke nogen af de filtereffekter, der er beskrevet af SVG 1.1 SE-specifikationen.
| Browser | Version | Platform | Resultat |
| Maxthon | 4.4.6.2000 | Android |  |
| CM Browser | 5.1.94 | Android |
Konqueror er en standardbrowser til KDE, et af de mest populære Linux-skrivebordsmiljøer. Evnen til at gengive SVG-filer i Konqueror afhænger af gengivelsesmotor. Med WebKit aktiveret blev vores test SVG gjort korrekt. Konquerors standardgengivelsesmotor, KHTML, ser imidlertid ud til at mangle understøttelse af flere funktioner: Filtereffekter anvendes ikke på underliggende objekt og strejke slutmarkører, og tekst langs sti eller mønster objekter overhovedet ikke overhovedet.
| Browser | Version | Platform | Resultat |
| Konqueror KHTML | 15.04.2 | Linux |  |
Konklusion
I vores test fokuserede vi på understøttelsen af SVG-format på tværs af moderne webgengivelsesmotorer. Vi testede 4 hovedgengivelsesmotorer og 15 forskellige browsere, herunder populære som Maxthon eller Dolphin. Næsten alle nuværende versioner af browsere gik gennem vores test, og det er svært at vælge en endelig vinder.
Det ser ud til at support og korrekt stabling af filter primitiver er den sidste tilbagevendende udfordring for nutidige rendering motorer. Når vi sammenligner vores originale SVG billede med alle de gengivne resultater, nominerer vi subjektivt IE 11 (Trident motor) til første sted.
Det er imidlertid klart, at Blink-motoren er i tæt forfølgelse, og derfor anbefaler vi Blink-baserede browsere til gengivelse af SVG-filer. Hvis du vil udføre hurtig test af din egen yndlingsbrowser, er du velkommen til at bruge vores SVG renderer testside her.
Redaktørens note: Dette indlæg er skrevet til Hongkiat.com af Michal Rost. Michal arbejder som programmør i et biomedicinsk selskab, men bruger sin fritid til udviklingen af open source apps og nonprofit webportaler. Han er grundlæggeren af scalablegfx. Du kan finde ham på Twitter.
