Web Tarayıcı Motorlarında SVG Desteğini Test Etme [Örnek Olay]
SVG (Ölçeklenebilir Vektör Grafikleri), Internet Explorer dahil olmak üzere tüm ana web tarayıcıları tarafından resmi olarak desteklenmektedir. Destek, çok çeşitli görüntü düzenleme yazılımlarına, özellikle de SVG'yi kendi yerel formatı olarak kullanan Inkscape'e yayıyor (SVG'yi tazelemek istiyorsanız burayı tıklayın)..
Peki web tarayıcıları tam olarak ne destekliyor? Tüm işleme motorları SVG dosyalarını ve özelliklerini aynı şekilde mi gösteriyor? Peki ya filtreler gibi gelişmiş özellikleri? İşte bunu öğreneceğiz. En az saygın olanları da içeren modern tarayıcılardan bir örnek aldık ve onları bu amaç için yapılmış bir SVG dosyasıyla test etti..
Test görüntüsü
Test resmimizi, sanatçıların kullanması en muhtemel unsurlara odaklanarak hazırladık. Test edilen özellikler arasında: metin yolları ve etkileşimleri, gradyanlar, gauss bulanıklaştırma filtresi ve son olarak daha fazla filtre türünden istiflenmiş gelişmiş bir bileşik filtre.
Web tarayıcı motorları
Yanıp sönen motor
Blink ile en sık kullanılan işleme motoru olan Blink ile başladık. Blink, Google’ın Chrome ve Chromium tarayıcıları, Opera ve Android WebView için yerel motordur. Yukarıda belirtilen tarayıcıların tümü test edilmiş platformlarda aynı şekilde test görüntüleri sağlar.
Inkscape tarafından üretilen orijinal görüntü ile karşılaştırıldığında, yığılmış filtre efektlerinin oluşturulmasındaki küçük bir fark dışında hiçbir sorun yoktu..
| Tarayıcı | versiyon | platform | Sonuç |
| 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 | |
| meşale | 39.0.0.9626 | , Windows |
Webkit motoru
Son tarayıcı kullanım istatistiklerine göre ilk üç sıra webkit tabanlı tarayıcılara ait değildir (Mayıs 2015 itibariyle). Ancak, bu motor geliştiriciler arasında yaygındır. Dahası, çeşitli uygulamaları ve çatalları vardır.
Test edilen tüm tarayıcılar SVG dosyamızı sorunsuz hale getirdi; Bununla birlikte, kompozit bir filtre bileşeni olan Specular Lighting'in renderlenmesinde Inkscape ile karşılaştırıldığında farklılıklar gözlendi..
| Tarayıcı | versiyon | platform | Sonuç |
| Safari | 8.0.6 | Mac os işletim sistemi |  |
| Su samuru | 0.9.05 | Linux | |
| QupZilla | 1.8.6 | Linux | |
| QupZilla | 1.8.6 | , Windows | |
| Yunus | 10.3.1 | Android | |
| Konqueror | 15.04.2 | Linux | |
| UC Tarayıcı | 10.5.0.575 | Android |
Trident motoru
Trident, Internet Explorer 4.0 - 11.0 sürümleri tarafından kullanılan tescilli bir motordur. IE, SVG'yi mükemmel bir şekilde yorumladı. Ayrıca, bileşik filtre görünümü orijinal görüntüye en iyi şekilde uyar. Ayrıca ikinci en çok kullanılan IE’yi (Mayıs 2015’ten itibaren) IE 9’u test ettik ve bu sürümün Gauss bulanıklığı ve kompozit filtreyle ilgili sorunları olduğunu gördük..
Bu, IE 9'un başlangıçta, SVG 1.1 SE standardının nihai taslağından önce yayımlandığı ve bunun da filtre efektlerinin resmi olarak eklendiği bir sürpriz değil..
| Tarayıcı | versiyon | platform | Sonuç |
| IE | 11.0.9600.17843 | , Windows |  |
| Tarayıcı | versiyon | platform | Sonuç |
| IE | 9.0.8112.16421 | , Windows |  |
Gecko motoru
Gecko, Mozilla Corporation tarafından geliştirilen ve bu nedenle Firefox web tarayıcısında veya Thunderbird e-posta istemcisinde kullanılan bir motordur. Ayrıca tarayıcılar PaleMoon, Waterfox ve önceki Firefox sürümlerinin birçok çatalları tarafından da kullanılır. Gecko motor için sonuçlar farklı platformlarda tam olarak aynı değildi.
Windows sürümü, metni yol boyunca görüntülerken küçük bir aksaklık sergiledi; Aynı sorun hem Firefox hem de PaleMoon tarayıcılarında da gözlendi. Tıpkı Webkit gibi, Gecko da Specular Lighting filter'i ilkel olarak doğru şekilde göstermekte zorlanıyor gibi görünüyor.
| Tarayıcı | versiyon | platform | Sonuç |
| Firefox | 38.0.5 | Linux |  |
| Firefox | 38.0.5 | Android | |
| Soluk ay | 25,5 | Android |
| Tarayıcı | versiyon | platform | Sonuç |
| Firefox | 38.0.5 | , Windows |  |
| Soluk ay | 25,5 | , Windows |
Sorunlu tarayıcılar
Yukarıda da görüleceği gibi, büyük renderleme motorlarının / tarayıcıların yakın zamandaki tüm sürümleri testlerimizi önemli zorluklar yaşamadan geçmiştir. Bu kadar iyi olmayanları kontrol edelim.
Maxthon Çin'de geliştirilen bir çapraz platform tarayıcısıdır. Fahad Khan'ın Windows'a yönelik 20 alternatif web tarayıcısına göre Maxthon, hem Trident hem de Webkit motorlarını kullanıyor. Linux (v. 1.0.5.3) ve Windows'ta (v. 4.4.5.3000) SVG oluşturma ile ilgili herhangi bir sorun fark etmedik; ancak, bir Android cihazda ne gauss bulanıklığı ne de diğer filtre ilkelleri oluşturulmuştur.
CM Tarayıcı testimiz Samsung galaxy S3 cihazında hızlı bir şekilde gerçekleştirildi, ancak SVG 1.1 SE şartnamesi tarafından açıklanan filtre efektlerinin hiçbirini de desteklememektedir..
| Tarayıcı | versiyon | platform | Sonuç |
| Maxthon | 4.4.6.2000 | Android |  |
| CM Tarayıcı | 5.1.94 | Android |
Konqueror en popüler Linux masaüstü ortamlarından biri olan KDE için varsayılan bir tarayıcıdır. Konqueror'da SVG dosyalarını işleme yeteneği render motoruna bağlıdır. WebKit etkinken, SVG testimiz doğru bir şekilde oluşturulmuştur. Bununla birlikte, Konqueror'un varsayılan işleme motoru KHTML, birçok özelliğin desteğinden yoksun görünüyor: filtre efektleri, temeldeki nesne ve kontur sonu işaretleyicilerine uygulanmaz ve yol ya da desen nesneleri boyunca metin hiç oluşturulmaz.
| Tarayıcı | versiyon | platform | Sonuç |
| Konqueror KHTML | 15.04.2 | Linux |  |
Sonuç
Testimizde modern web oluşturma motorlarında SVG formatının desteğine odaklandık. Maxthon veya Dolphin gibi popüler tarayıcılar da dahil olmak üzere 4 ana işleme motorunu ve 15 farklı tarayıcıyı test ettik. Tarayıcıların neredeyse tüm sürümleri testlerimizden geçti ve kesin bir kazanan seçmek zor.
Bu gösteriyor ki destek ve filtre ilkellerinin doğru istiflenmesi günümüzün render motorları için kalan son zorluktur. Orijinal SVG resmimizi işlenen sonuçlarla karşılaştırdığımızda, ilk etapta IE 11 (Trident motoru) olarak aday gösteriyoruz.
Bununla birlikte, Blink motorunun yakından takip ettiği açıktır ve bu nedenle, SVG dosyalarını oluşturmak için Blink tabanlı tarayıcıları öneriyoruz. Kendi favori tarayıcınızı hızlıca test etmek istiyorsanız, SVG oluşturucu test sayfamızı burada kullanabilirsiniz..
Editörün Notu: Bu yazı Hongkiat.com için Michal Rost tarafından yazılmıştır. Michal biyomedikal bir şirkette programcı olarak çalışmakta ancak boş zamanlarını açık kaynaklı uygulamalar ve kar amacı gütmeyen web portallarının geliştirilmesine ayırmaktadır. O, scalablegfx'in kurucusudur. Onu Twitter'da bulabilirsiniz..
