Testa SVG-stöd över webbläsarmotorer [Fallstudie]
SVG (Scalable Vector Graphics) stöds officiellt av alla webbläsare, inklusive Internet Explorer. Stödet sträcker sig in i en mängd olika bildredigeringsprogram, särskilt Inkscape, som använder SVG som sitt ursprungliga format (Om du vill ha en uppdatering på SVG, klicka här).
Men vad exakt stöds av webbläsare? Visa alla återgivningsmotorer SVG-filer och deras funktioner på samma sätt? Och hur är deras avancerade funktioner som filter? Jo det är vad vi ska ta reda på. Vi tog ett urval av moderna webbläsare, inklusive några av de mindre ökända, och testade dem med en SVG-fil gjord för detta ändamål.
Testbilden
Vi förberedde vår testbild med fokus på element som artisterna är mest benägna att använda. Bland de testade funktionerna är: textvägar och deras växelverkan, gradienter, gaussisk suddfilter och slutligen ett avancerat kompositfilter staplat från flera filtertyper.
Webbläsarmotorer
Blinkmotorn
Vi började med - den överlägset vanligaste återgivningsmotorn - Blink. Blink är den inbyggda motorn för Googles Chrome- och Chromium-webbläsare, Opera och Android WebView. Alla ovannämnda webbläsare gör testning av bilder på samma sätt över de testade plattformarna.
Jämfört med den ursprungliga bilden som producerades av Inkscape var det inga problem med undantag för en liten skillnad i rendering av staplade filtereffekter.
| Webbläsare | Version | 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 | |
| Krom | 38.0.2125.114 | Android | |
| Krom | 43.0.2357.130 | Windows | |
| Ficklampa | 39.0.0.9626 | Windows |
Webkit-motor
Enligt den senaste användarstatistiken för webbläsare hör inte de tre bästa positionerna till webkitbaserade webbläsare (från och med maj 2015). Emellertid är denna motor utbredd bland utvecklare. Vidare finns det olika implementeringar och gafflar av det
Alla testade webbläsare gjorde vår SVG-fil utan problem Ändå observerades skillnader i rendering av Specular Lighting, en kompositfilterkomponent i jämförelse med Inkscape.
| Webbläsare | Version | Plattform | Resultat |
| Safari | 8.0.6 | Mac OS |  |
| Utter | 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 är en proprietär motor som används av Internet Explorer versioner 4.0 - 11.0. IE tolkade vår SVG perfekt. Dessutom matchar det sammansatta filtret utseende den bästa bilden. Vi testade också IE 9, den näst mest använda IE-enheten (från och med maj 2015) och fann att den här versionen hade problem med gauss-oskärpa och kompositfilter.
Detta är dock ingen överraskning, eftersom IE 9 ursprungligen släpptes före det slutliga utkastet till SVG 1.1 SE-standard, där filtereffekter officiellt tillsattes.
| Webbläsare | Version | Plattform | Resultat |
| IE | 11.0.9600.17843 | Windows |  |
| Webbläsare | Version | Plattform | Resultat |
| IE | 9.0.8112.16421 | Windows |  |
Gecko-motor
Gecko är en motor som utvecklats av Mozilla Corporation och används sålunda i Firefox webbläsare eller Thunderbird e-postklient. Den används också av webbläsare PaleMoon, Waterfox och många andra gafflar från tidigare Firefox-versioner. För Gecko-motorn var resultaten inte exakt samma över olika plattformar.
Windows-versionen visade en liten glitch i att göra texten längs vägen; Samma problem observerades i både Firefox och PaleMoon webbläsare. Precis som Webkit, verkar Gecko ha problem med korrekt återgivning av primitivt belysningsfilter.
| Webbläsare | Version | Plattform | Resultat |
| Firefox | 38.0.5 | Linux |  |
| Firefox | 38.0.5 | Android | |
| Blek måne | 25,5 | Android |
| Webbläsare | Version | Plattform | Resultat |
| Firefox | 38.0.5 | Windows |  |
| Blek måne | 25,5 | Windows |
Problematiska webbläsare
Som framgår av ovanstående har alla senaste versioner av stora återgivningsmotorer / webbläsare gått igenom vårt test utan betydande svårigheter. Låt oss kolla in de som inte gjorde det så bra.
Maxthon är en plattformsplattform som utvecklats i Kina. Enligt Fahad Khans 20 alternativa webbläsare för Windows använder Maxthon både Trident och Webkit-motorer. Vi har inte märkt något problem med SVG-rendering på Linux (v. 1.0.5.3) och Windows (v. 4.4.5.3000); Men på en Android-enhet gjordes varken gaussisk oskärpa eller andra filterprimitiver.
CM Browser utfördes snabbt på vår Samsung Galaxy S3-enhet, men stöder inte heller någon av de filtereffekter som beskrivs av SVG 1.1 SE-specifikationen.
| Webbläsare | Version | Plattform | Resultat |
| Maxthon | 4.4.6.2000 | Android |  |
| CM Browser | 5.1.94 | Android |
Konqueror är en standardbläddrare för KDE, en av de mest populära Linux-skrivbordsmiljöerna. Möjligheten att göra SVG-filer i Konqueror beror på återgivningsmotorn. Med WebKit aktiverades vår testning SVG korrekt. Konquerors standardgivningsmotor, KHTML, verkar dock sakna stöd för flera funktioner: Filtereffekter tillämpas inte på underliggande objekt och slår slutmarkörer och text längs sökvägar eller mönsterobjekt återges inte alls.
| Webbläsare | Version | Plattform | Resultat |
| Konqueror KHTML | 15.04.2 | Linux |  |
Slutsats
I vårt test fokuserade vi på stöd av SVG-format över moderna webbutvecklingsmotorer. Vi testade 4 huvudmotorer och 15 olika webbläsare, bland annat populära som Maxthon eller Dolphin. Nästan alla nuvarande versioner av webbläsare gick igenom vårt test och det är svårt att välja en slutgiltig vinnare.
Det verkar som att Stöd och korrekt stapling av filter primitiver är den sista kvarvarande utmaningen för dagens återgivningsmotorer. När vi jämför vår ursprungliga SVG-bild med alla de gjorda resultaten nominerar vi subjektivt IE 11 (Trident-motorn) för första platsen.
Det är emellertid klart att Blink-motorn är i nära strävan, och vi rekommenderar därför Blink-baserade webbläsare för att göra SVG-filer. Om du vill utföra ett snabbt test av din egen favoritwebbläsare, använd gärna vår SVG-renderers testsida här.
Redaktörens anteckning: Detta inlägg är skrivet för Hongkiat.com av Michal Rost. Michal arbetar som programmerare i ett biomedicinskt företag men ägnar sin fritid till utvecklingen av open source apps och nonprofit webbportaler. Han är grundaren av scalablegfx. Du hittar honom på Twitter.
