SVG-ondersteuning testen in webbrowser-engines [casestudy]
SVG (Scalable Vector Graphics) wordt officieel ondersteund door alle belangrijke webbrowsers, inclusief Internet Explorer. De ondersteuning omvat een breed scala aan beeldbewerkingssoftware, met name Inkscape, dat SVG als het oorspronkelijke formaat gebruikt (als u een opfrissing op SVG wilt, klik dan hier).
Maar wat wordt precies ondersteund door webbrowsers? Geeft alle rendering-engines SVG-bestanden en hun functies op dezelfde manier weer? En hoe zit het met hun geavanceerde functies zoals filters? Nou dat is wat we gaan ontdekken. We hebben een voorbeeld van moderne browsers genomen, waaronder enkele van de minder beruchte browsers getest ze met een SVG-bestand gemaakt voor dit doel.
Het testbeeld
We hebben ons testbeeld voorbereid met de nadruk op elementen die kunstenaars waarschijnlijk zullen gebruiken. Onder de geteste functies zijn: tekstpaden en hun interacties, verlopen, Gaussiaanse vervaging filter en tot slot een geavanceerde composiet filter gestapeld van meer filtertypes.
Webbrowser-engines
Knipper motor
We zijn begonnen met - verreweg de meest voorkomende rendering-engine - Blink. Blink is de native engine voor de Chrome- en Chromium-browsers van Google, Opera en Android WebView. Alle bovengenoemde browsers maken het testen van afbeeldingen op dezelfde manier op de geteste platforms mogelijk.
In vergelijking met het oorspronkelijke beeld geproduceerd door Inkscape, waren er geen problemen, behalve een klein verschil in weergave van gestapelde filtereffecten.
| browser | Versie | Platform | Resultaat |
| chromium | 43.0.2357.125 | Linux |  |
| Opera | 30.0.1835.59 | Linux | |
| Opera | 30.0.1856.93524 | Android | |
| Opera | 30.0.1835.88 | ramen | |
| Chrome | 38.0.2125.114 | Android | |
| Chrome | 43.0.2357.130 | ramen | |
| Toorts | 39.0.0.9626 | ramen |
Webkit-engine
Volgens de recente browsergebruiksstatistieken behoren de top drie posities niet tot webkit-gebaseerde browsers (vanaf mei 2015). Deze engine is echter wijdverspreid onder ontwikkelaars. Verder zijn er verschillende implementaties en vorken van
Alle geteste browsers hebben ons SVG-bestand zonder problemen weergegeven; toch werden verschillen in de weergave van Specular Lighting, een composiet filtercomponent, waargenomen in vergelijking met Inkscape.
| browser | Versie | Platform | Resultaat |
| Safari | 8.0.6 | MacOS |  |
| Otter | 0.9.05 | Linux | |
| QupZilla | 1.8.6 | Linux | |
| QupZilla | 1.8.6 | ramen | |
| Dolfijn | 10.3.1 | Android | |
| Konqueror | 15.04.2 | Linux | |
| UC browser | 10.5.0.575 | Android |
Trident-motor
Trident is een eigen engine die wordt gebruikt door Internet Explorer versie 4.0 - 11.0. IE heeft onze SVG perfect geïnterpreteerd. Bovendien komt het uiterlijk van het composietfilter het beste overeen met het originele beeld. We hebben ook IE 9 getest, het op één na meest gebruikte IE (vanaf mei 2015) en we vonden dat deze versie problemen had met Gaussiaanse vervaging en composiet filter.
Dit is echter geen verrassing, omdat IE 9 oorspronkelijk werd vrijgegeven vóór de definitieve versie van de SVG 1.1 SE-standaard, waarin filtereffecten officieel werden toegevoegd.
| browser | Versie | Platform | Resultaat |
| D.W.Z | 11.0.9600.17843 | ramen |  |
| browser | Versie | Platform | Resultaat |
| D.W.Z | 9.0.8112.16421 | ramen |  |
Gekko motor
Gecko is een engine ontwikkeld door Mozilla Corporation en dus gebruikt in de Firefox-webbrowser of Thunderbird-e-mailclient. Het wordt ook gebruikt door browsers PaleMoon, Waterfox en vele andere vorken van eerdere Firefox-versies. In het geval van Gecko-engine waren de resultaten niet precies hetzelfde op verschillende platforms.
De Windows-versie vertoonde een klein probleempje bij het weergeven van de tekst langs het pad; hetzelfde probleem werd waargenomen in zowel Firefox- als PaleMoon-browsers. Net als Webkit lijkt Gecko moeite te hebben met het correct weergeven van Primular Lighting filter primitief.
| browser | Versie | Platform | Resultaat |
| Firefox | 38.0.5 | Linux |  |
| Firefox | 38.0.5 | Android | |
| Flauwe maan | 25.5 | Android |
| browser | Versie | Platform | Resultaat |
| Firefox | 38.0.5 | ramen |  |
| Flauwe maan | 25.5 | ramen |
Problematische browsers
Zoals hierboven te zien is, hebben alle recente versies van belangrijke rendering engines / browsers zonder veel problemen onze test doorstaan. Laten we kijken naar degenen die het niet zo goed hebben gedaan.
Maxthon is een platformonafhankelijke browser die is ontwikkeld in China. Volgens Fahad Khan's 20 alternatieve webbrowsers voor Windows gebruikt Maxthon zowel Trident- als Webkit-engines. We hebben geen enkel probleem opgemerkt met SVG-weergave op Linux (versie 1.0.5.3) en Windows (versie 4.4.5.3000); Op een Android-apparaat werden echter geen gaussiaanse vervaging of andere filterprimitieven gerenderd.
CM-browser uitgevoerd snel op onze testen Samsung Galaxy S3 apparaat, maar het ondersteunt ook geen van de filtereffecten beschreven door SVG 1.1 SE specificatie.
| browser | Versie | Platform | Resultaat |
| Maxthon | 4.4.6.2000 | Android |  |
| CM-browser | 5.1.94 | Android |
Konqueror is een standaardbrowser voor KDE, een van de meest populaire Linux-desktopomgevingen. De mogelijkheid om SVG-bestanden in Konqueror weer te geven, is afhankelijk van de rendering-engine. Met WebKit ingeschakeld werd onze test SVG correct weergegeven. De standaard rendering-engine van Konqueror, KHTML, lijkt echter geen ondersteuning te bieden voor verschillende functies: filtereffecten worden niet toegepast op onderliggende object- en lijneindmarkeringen en tekst langs pad- of patroonobjecten worden helemaal niet gerenderd.
| browser | Versie | Platform | Resultaat |
| Konqueror KHTML | 15.04.2 | Linux |  |
Conclusie
In onze test hebben we ons gericht op de ondersteuning van het SVG-formaat in moderne webweergave-engines. We hebben 4 hoofdverwerkingsengines en 15 verschillende browsers getest, waaronder populaire browsermodellen zoals Maxthon of Dolphin. Bijna alle huidige versies van browsers hebben onze test doorstaan en het is moeilijk om een definitieve winnaar te selecteren.
Het komt voor dat ondersteuning en correcte stapeling van filterprimitieven is de laatst overgebleven uitdaging voor hedendaagse rendering engines. Wanneer we onze originele SVG-foto vergelijken met alle gerenderde resultaten, nomineren we subjectief de IE 11 (Trident-engine) voor de eerste plaats.
Het is echter duidelijk dat de Blink-engine zich in de achtervolging bevindt en daarom raden we Blink-gebaseerde browsers aan voor het weergeven van SVG-bestanden. Als u een snelle test van uw eigen favoriete browser wilt uitvoeren, kunt u hier onze SVG-renderer-testpagina gebruiken.
Opmerking van de uitgever: Dit bericht is geschreven voor Hongkiat.com door Michal Rost. Michal werkt als programmeur in een biomedisch bedrijf, maar besteedt zijn vrije tijd aan de ontwikkeling van open source-apps en non-profit webportals. Hij is de oprichter van scalablegfx. Je kunt hem vinden op Twitter.
