Testowanie obsługi SVG w silnikach przeglądarek internetowych [Studium przypadku]
SVG (Scalable Vector Graphics) jest oficjalnie obsługiwany przez wszystkie główne przeglądarki internetowe, w tym Internet Explorer. Wsparcie obejmuje szeroki zakres programów do edycji obrazów, w szczególności Inkscape, który używa SVG jako natywnego formatu (jeśli chcesz odświeżać SVG, kliknij tutaj).
Ale co dokładnie obsługuje przeglądarka internetowa? Czy wszystkie silniki renderujące wyświetlają pliki SVG i ich funkcje w ten sam sposób? A co z ich zaawansowanymi funkcjami, takimi jak filtry? To właśnie się dowiemy. Zrobiliśmy próbkę nowoczesnych przeglądarek, w tym niektórych mniej znanych, i przetestowałem je za pomocą pliku SVG stworzonego w tym celu.
Obraz testowy
Przygotowaliśmy nasze zdjęcie testowe skupiające się na elementach, z których artyści najczęściej korzystają. Wśród testowanych funkcji są: ścieżki tekstowe i ich interakcje, gradienty, filtr rozmycia gaussowskiego i wreszcie zaawansowany filtr kompozytowy ułożony z większej liczby typów filtrów.
Silniki przeglądarki internetowej
Miga silnik
Zaczęliśmy od - zdecydowanie najczęstszego silnika renderującego - Blink. Blink to rodzimy silnik dla przeglądarek Google Chrome i Chromium, Opery i Android WebView. Wszystkie wyżej wymienione przeglądarki testują obrazy w taki sam sposób na testowanych platformach.
W porównaniu z oryginalnym obrazem produkowanym przez Inkscape, nie było żadnych problemów z wyjątkiem niewielkiej różnicy w renderowaniu efektów filtrów skumulowanych.
| Przeglądarka | Wersja | Platforma | Wynik |
| Chrom | 43.0.2357.125 | Linux |  |
| Opera | 30.0.1835.59 | Linux | |
| Opera | 30.0.1856.93524 | Android | |
| Opera | 30.0.1835.88 | Windows | |
| Chrom | 38.0.2125.114 | Android | |
| Chrom | 43.0.2357.130 | Windows | |
| Pochodnia | 39.0.0.9626 | Windows |
Silnik Webkit
Zgodnie z ostatnimi statystykami użycia przeglądarki trzy pierwsze pozycje nie należą do przeglądarek opartych na webkitach (stan na maj 2015 r.). Jednak ten silnik jest rozpowszechniony wśród programistów. Ponadto istnieją różne implementacje i widelce
Wszystkie przetestowane przeglądarki wyświetlały nasz plik SVG bez problemów; niemniej jednak zaobserwowano różnice w renderowaniu Specular Lighting, złożonego komponentu filtrującego w porównaniu z Inkscape.
| Przeglądarka | Wersja | Platforma | Wynik |
| Safari | 8.0.6 | System operacyjny Mac |  |
| Wydra | 0,9.05 | Linux | |
| QupZilla | 1.8.6 | Linux | |
| QupZilla | 1.8.6 | Windows | |
| Delfin | 10.3.1 | Android | |
| Konqueror | 15.04.2 | Linux | |
| przeglądarka UC | 10.5.0.575 | Android |
Silnik trójząb
Trident to zastrzeżony silnik używany przez Internet Explorer w wersji 4.0 - 11.0. IE doskonale zinterpretował nasz SVG. Co więcej, wygląd filtra kompozytowego pasuje do oryginalnego obrazu. Przetestowaliśmy także IE 9, drugi najczęściej używany IE (stan na maj 2015 r.) I stwierdziliśmy, że ta wersja ma problemy z rozmyciem gaussowskim i filtrem kompozytowym.
Nie jest to jednak niespodzianką, ponieważ IE 9 został pierwotnie wydany przed ostatecznym projektem standardu SVG 1.1 SE, w którym oficjalnie dodano efekty filtrów.
| Przeglądarka | Wersja | Platforma | Wynik |
| TO ZNACZY | 11.0.9600.17843 | Windows |  |
| Przeglądarka | Wersja | Platforma | Wynik |
| TO ZNACZY | 9.0.8112.16421 | Windows |  |
Silnik Gecko
Gecko to silnik opracowany przez Mozilla Corporation, a więc używany w przeglądarce internetowej Firefox lub kliencie poczty e-mail Thunderbird. Jest również używany przez przeglądarki PaleMoon, Waterfox i wiele innych widelców wcześniejszych wersji Firefoksa. W przypadku silnika Gecko wyniki nie były dokładnie takie same na różnych platformach.
Wersja Windows pokazała niewielki błąd w renderowaniu tekstu wzdłuż ścieżki; ten sam problem zaobserwowano zarówno w przeglądarkach Firefox, jak i PaleMoon. Podobnie jak Webkit, Gecko wydaje się mieć problemy z poprawnym wyświetlaniem prymitywnego filtru Specular Lighting.
| Przeglądarka | Wersja | Platforma | Wynik |
| Firefox | 38.0.5 | Linux |  |
| Firefox | 38.0.5 | Android | |
| Blady księżyc | 25,5 | Android |
| Przeglądarka | Wersja | Platforma | Wynik |
| Firefox | 38.0.5 | Windows |  |
| Blady księżyc | 25,5 | Windows |
Problematyczne przeglądarki
Jak widać powyżej, wszystkie najnowsze wersje głównych silników renderujących / przeglądarek przeszły nasz test bez większych trudności. Sprawdźmy te, które nie radziły sobie dobrze.
Maxthon to przeglądarka wieloplatformowa opracowana w Chinach. Według 20 alternatywnych przeglądarek internetowych Fahad Khan dla Windows Maxthon używa zarówno silników Trident, jak i Webkit. Nie zauważyliśmy żadnego problemu z renderowaniem SVG na Linuksie (v. 1.0.5.3) i Windows (v. 4.4.5.3000); jednak na urządzeniu z Androidem nie były wyświetlane rozmycia gaussowskie ani inne prymitywy filtrów.
Przeglądarka CM wykonywany szybko na naszym testowym urządzeniu Samsung Galaxy S3, ale nie obsługuje również żadnego z efektów filtrów opisanych w specyfikacji SVG 1.1 SE.
| Przeglądarka | Wersja | Platforma | Wynik |
| Maxthon | 4.4.6.2000 | Android |  |
| Przeglądarka CM | 5.1.94 | Android |
Konqueror jest domyślną przeglądarką dla KDE, jednego z najpopularniejszych środowisk desktopowych Linux. Możliwość renderowania plików SVG w Konquerorze zależy od silnika renderującego. Po włączeniu WebKit nasze testy SVG zostały poprawnie wykonane. Jednak domyślny silnik renderujący Konquerora, KHTML, wydaje się być pozbawiony obsługi kilku funkcji: efekty filtrów nie są stosowane do leżących poniżej obiektów i znaczników końca obrysu, a tekst wzdłuż obiektów ścieżki lub wzorca nie jest w ogóle renderowany.
| Przeglądarka | Wersja | Platforma | Wynik |
| Konqueror KHTML | 15.04.2 | Linux |  |
Wniosek
W naszym teście skupiliśmy się na wsparciu formatu SVG w nowoczesnych silnikach renderujących. Przetestowaliśmy 4 główne silniki renderujące i 15 różnych przeglądarek, w tym popularne, takie jak Maxthon lub Dolphin. Prawie wszystkie aktualne wersje przeglądarek przeszły nasz test i trudno jest wybrać ostatecznego zwycięzcę.
Wygląda na to, że wsparcie i poprawne układanie prymitywów filtrów to ostatnie wyzwanie dla współczesnych silników renderujących. Kiedy porównamy nasz oryginalny obraz SVG ze wszystkimi renderowanymi wynikami, subiektywnie wyznaczamy IE 11 (silnik Trident) na pierwsze miejsce.
Jednak jasne jest, że silnik Blink jest w pogoni za tym i dlatego zalecamy przeglądarkę opartą na Blink do renderowania plików SVG. Jeśli chcesz wykonać szybki test swojej ulubionej przeglądarki, skorzystaj z naszej strony testowej renderer SVG tutaj.
Nota redaktora: Ten wpis jest napisany dla Hongkiat.com przez Michala Rosta. Michał pracuje jako programista w firmie biomedycznej, ale poświęca swój wolny czas na rozwijanie aplikacji open source i portali internetowych non-profit. Jest założycielem skalablegfx. Możesz go znaleźć na Twitterze.
