SVG-tuen testaaminen Web-selaimen moottoreiden avulla [Case Study]
SVG: tä (skaalautuva vektorigrafiikka) tukevat virallisesti kaikki tärkeimmät web-selaimet, kuten Internet Explorer. Tuki kattaa monenlaisia kuvankäsittelyohjelmia, erityisesti Inkscape, joka käyttää SVG: tä alkuperäisenä muotonaan (jos haluat päivittää SVG: n, napsauta tästä).
Mutta mitä selaimet tukevat? Näyttävätkö kaikki moottorit näyttävät SVG-tiedostoja ja niiden ominaisuuksia samalla tavalla? Entä heidän lisäominaisuudet, kuten suodattimet? No, mitä me aiomme selvittää. Otimme otoksen moderneista selaimista, mukaan lukien muutamat vähemmän pahamaineiset, ja testattu niitä varten tähän tarkoitukseen tehty SVG-tiedosto.
Testauskuva
Valmistimme testauskuvamme keskittyen elementteihin, joita taiteilijat todennäköisesti käyttävät. Testattujen ominaisuuksien joukossa ovat: tekstireitit ja niiden vuorovaikutukset, kaltevuudet, Gaussin hämärtysuodatin ja lopulta edistyksellinen komposiittisuodatin, joka on pinottu useammista suodatintyypeistä.
Web-selaimen moottorit
Blink-moottori
Aloitimme - ylivoimaisesti yleisimmällä renderointimoottorilla - Blink. Blink on Googlen Chrome- ja Chromium-selaimien, Opera- ja Android WebView -laitteiden kotimainen moottori. Kaikki edellä mainitut selaimet antavat testata kuvia samalla tavalla testatuilla alustoilla.
Verrattuna Inkscapen tuottamaan alkuperäiseen kuvaan ei ollut mitään ongelmia, paitsi jossakin määrin eroa pinottujen suodatustehosteiden esittämisessä.
| selain | Versio | foorumi | Tulos |
| Kromi | 43.0.2357.125 | Linux |  |
| Ooppera | 30.0.1835.59 | Linux | |
| Ooppera | 30.0.1856.93524 | Android | |
| Ooppera | 30.0.1835.88 | Windows | |
| Kromi | 38.0.2125.114 | Android | |
| Kromi | 43.0.2357.130 | Windows | |
| soihtu | 39.0.0.9626 | Windows |
Webkit-moottori
Viimeisimpien selaimen käyttötilastojen mukaan kolme parasta paikkaa eivät kuulu webkit-pohjaisiin selaimiin (toukokuusta 2015 alkaen). Tämä moottori on kuitenkin laajalti kehittäjien keskuudessa. Lisäksi on olemassa erilaisia toteutuksia ja haarukoita
Kaikki testatut selaimet antoivat SVG-tiedostomme ilman ongelmia; kuitenkin, komposiittisuodattimen komponentin Spekular Lighting -muodostuksessa havaittiin eroja verrattuna Inkscapeen.
| selain | Versio | foorumi | Tulos |
| Safari | 8.0.6 | Mac käyttöjärjestelmä |  |
| Saukko | 0.9.05 | Linux | |
| QupZilla | 1.8.6 | Linux | |
| QupZilla | 1.8.6 | Windows | |
| Delfiini | 10.3.1 | Android | |
| konqueror | 15.04.2 | Linux | |
| UC-selain | 10.5.0.575 | Android |
Trident-moottori
Trident on Internet Explorerin versioiden 4.0 - 11.0 käyttämä oma moottori. IE tulkitsi SVG: tä täydellisesti. Lisäksi komposiittisuodattimen ulkonäkö vastaa parasta alkuperäistä kuvaa. Testasimme myös IE 9: tä, toiseksi eniten käytettyä IE: tä (toukokuusta 2015), ja totesimme, että tällä versiolla oli ongelmia Gaussin hämärtymisen ja komposiittisuodattimen kanssa.
Tämä ei kuitenkaan ole yllätys, koska IE 9 julkaistiin alun perin ennen SVG 1.1 SE -standardin lopullista luonnosta, jossa suodatinvaikutukset lisättiin virallisesti.
| selain | Versio | foorumi | Tulos |
| IE | 11.0.9600.17843 | Windows |  |
| selain | Versio | foorumi | Tulos |
| IE | 9.0.8112.16421 | Windows |  |
Gecko-moottori
Gecko on Mozilla Corporationin kehittämä moottori, jota käytetään Firefoxin selaimessa tai Thunderbird-sähköpostiohjelmassa. Sitä käyttävät myös selaimet PaleMoon, Waterfox ja monet muut aikaisempien Firefox-versioiden haarukat. Gecko-moottorin tapauksessa tulokset eivät olleet aivan samanlaisia eri alustoilla.
Windows-versio näytti hieman häiriötä tekstin tekemisessä polun varrella; sama ongelma havaittiin sekä Firefox- että PaleMoon-selaimissa. Aivan kuten Webkit, Geckolla näyttää olevan ongelmia oikean valaistuksen suodattimen primitiivisen esittämisen kanssa.
| selain | Versio | foorumi | Tulos |
| Firefox | 38.0.5 | Linux |  |
| Firefox | 38.0.5 | Android | |
| PaleMoon | 25.5 | Android |
| selain | Versio | foorumi | Tulos |
| Firefox | 38.0.5 | Windows |  |
| PaleMoon | 25.5 | Windows |
Ongelmalliset selaimet
Kuten edellä on nähtävissä, kaikki suurimpien renderimoottoreiden / selaimien viimeisimmät versiot ovat läpäisseet testimme ilman merkittäviä vaikeuksia. Katsotaanpa ne, jotka eivät tehneet niin hyvin.
Maxthon on Kiinassa kehitetty monitasoinen selain. Fahad Khanin 20 vaihtoehtoisen selaimen mukaan Windows Maxthon käyttää sekä Trident- että Webkit-moottoreita. Emme ole havainneet mitään ongelmia SVG: n renderöinnissä Linuxissa (v. 1.0.5.3) ja Windowsissa (v. 4.4.5.3000); Android-laitteessa ei kuitenkaan tuotettu Gaussin epäselvyyttä eikä muita suodattimien primitiivejä.
CM-selain testasi Samsung galaxy S3 -laitteessamme nopeasti, mutta se ei myöskään tue mitään SVG 1.1 SE: n kuvauksessa kuvattuja suodatinvaikutuksia.
| selain | Versio | foorumi | Tulos |
| Maxthon | 4.4.6.2000 | Android |  |
| CM-selain | 01.5.94 | Android |
konqueror on oletusselain KDE: lle, joka on yksi suosituimmista Linux-työpöytäympäristöistä. Kyky tehdä SVG-tiedostoja Konquerorissa riippuu renderointimoottorista. WebKit-toiminnon avulla SVG-testaus tehtiin oikein. Konquerorin oletusmuodostusmoottori KHTML näyttää kuitenkin puuttuvan useista ominaisuuksista: suodattimen vaikutuksia ei sovelleta taustalla oleviin kohteisiin ja lyöntipäätemerkkeihin, eikä reittiä tai kuvio-objekteja sisältävää tekstiä anneta lainkaan.
| selain | Versio | foorumi | Tulos |
| Konqueror KHTML | 15.04.2 | Linux |  |
johtopäätös
Testissä keskityimme SVG-formaatin tukemiseen nykyaikaisissa web-mallinnusmoottoreissa. Testasimme 4 tärkeintä renderimoottoria ja 15 eri selainta, mukaan lukien suosittuja, kuten Maxthon tai Dolphin. Lähes kaikki nykyiset selainten versiot läpäisivät testimme, ja lopullista voittajaa on vaikea valita.
Vaikuttaa siltä että tuki ja suodattimen primitiivien oikea pinoaminen on viimeinen haaste nykypäivän renderimoottoreille. Kun vertaamme alkuperäistä SVG-kuvaa ja kaikkia renderoituja tuloksia, nimitämme subjektiivisesti IE 11 (Trident -moottori) ensimmäiselle sijalle.
On kuitenkin selvää, että Blink-moottori on lähellä ja suosittelemme Blink-pohjaisia selaimia SVG-tiedostojen esittämiseen. Jos haluat suorittaa nopean testin omasta suosikkiselaimestasi, voit käyttää SVG-renderöintitestiä täällä.
Toimittajan huomautus: Tämä viesti on kirjoitettu Michk Rostille Hongkiat.comille. Michal työskentelee ohjelmoijana biolääketieteellisessä yrityksessä, mutta omistaa vapaa-aikansa avoimen lähdekoodin sovellusten ja voittoa tavoittelemattomien verkkoportaalien kehittämiseen. Hän on scalablegfxin perustaja. Löydät hänet Twitterissä.
