Тестування підтримки SVG через веб-браузерні двигуни [Case Study]
SVG (Scalable Vector Graphics) офіційно підтримується всіма основними веб-браузерами, включаючи Internet Explorer. Підтримка охоплює широкий спектр програмного забезпечення для редагування зображень, зокрема Inkscape, який використовує SVG як рідний формат (якщо ви бажаєте оновити SVG, натисніть тут).
Але що саме підтримує веб-браузер? Чи показують всі двигуни рендеринга файли SVG та їх функції так само? А як щодо їхніх додаткових функцій, таких як фільтри? Добре це що ми збираємось знайти. Ми взяли зразок сучасних браузерів, включаючи деякі з менш відомих, і тестували їх за допомогою файлу SVG, створеного для цієї мети.
Тестування зображення
Ми підготували наше тестування, орієнтуючись на елементи, якими найчастіше користуються художники. Серед тестованих функцій: текстові шляхи та їх взаємодія, градієнти, фільтр Gaussian Blur і, нарешті, просунутий складений фільтр, укладений з більшої кількості типів фільтрів.
Інструменти веб-браузера
Двигун блимання
Ми почали з - найчастіше найпоширенішим двигуном - Blink. Blink є рідним двигуном для браузерів Google Chrome і Chromium, Opera та Android WebView. Всі перераховані вище браузери роблять тестування зображень однаково через тестовані платформи.
У порівнянні з оригінальним зображенням, створеним Inkscape, не було ніяких проблем, крім невеликої різниці у візуалізації ефектів фільтрації.
| Браузер | Версія | Платформа | Результат |
| Хром | 43.0.2357.125 | Linux |  |
| Опера | 30.0.1835.59 | Linux | |
| Опера | 30.0.1856.93524 | Android | |
| Опера | 30.0.1835.88 | Windows | |
| Chrome | 38.0.2125.114 | Android | |
| Chrome | 43.0.2357.130 | Windows | |
| Факел | 39.0.0.9626 | Windows |
Двигун Webkit
Згідно з останніми статистичними даними про використання браузера, перші три позиції не належать веб-переглядачам на основі webkit (станом на травень 2015 року). Однак цей двигун поширений серед розробників. Більше того, існують різні реалізації і розгалуження
Всі перевірені браузери надавали наш файл SVG без проблем; проте, у порівнянні з Inkscape, спостерігалися відмінності в отриманні композитного компонента фільтра Specular Lighting.
| Браузер | Версія | Платформа | Результат |
| Safari | 8.0.6 | MacOS |  |
| Видра | 0.9.05 | Linux | |
| QupZilla | 1.8.6 | Linux | |
| QupZilla | 1.8.6 | Windows | |
| Дельфін | 10.3.1 | Android | |
| Konqueror | 15.04.2 | Linux | |
| UC Browser | 10.5.0.575 | Android |
Двигун Trident
Trident - власний двигун, який використовується версіями Internet Explorer 4.0 - 11.0. IE чудово інтерпретував наш SVG. Більш того, зовнішній вигляд композитного фільтра найкраще відповідає вихідному зображенню. Ми також протестували IE 9, другий найбільш використовуваний IE (станом на травень 2015 року) і виявили, що у цій версії проблеми з гаусським розмиттям і композитним фільтром..
Це не дивно, тому що IE 9 спочатку було випущено до остаточного розробки стандарту SVG 1.1 SE, в якому офіційно додавалися ефекти фільтрів..
| Браузер | Версія | Платформа | Результат |
| IE | 11.0.9600.17843 | Windows |  |
| Браузер | Версія | Платформа | Результат |
| IE | 9.0.8112.16421 | Windows |  |
Двигун Gecko
Gecko - це движок, розроблений корпорацією Mozilla і використовуваний таким чином у веб-браузері Firefox або клієнті електронної пошти Thunderbird. Він також використовується браузерами PaleMoon, Waterfox і багатьма іншими вилками більш ранніх версій Firefox. У випадку з двигуном Gecko результати не були точно однаковими на різних платформах.
Версія Windows показала невеликий збій у візуалізації тексту вздовж контуру; така ж проблема спостерігалася і в браузерах Firefox і PaleMoon. Так само, як Webkit, Gecko, здається, має проблеми з правильним рендерингами фільтра Specular Lighting.
| Браузер | Версія | Платформа | Результат |
| Firefox | 38.0.5 | Linux |  |
| Firefox | 38.0.5 | Android | |
| PaleMoon | 25.5 | Android |
| Браузер | Версія | Платформа | Результат |
| Firefox | 38.0.5 | Windows |  |
| PaleMoon | 25.5 | Windows |
Проблемні браузери
Як можна бачити вище, всі останні версії основних двигунів / браузерів рендерингу пройшли наш тест без значних труднощів. Давайте перевіримо ті, які не зробили так добре.
Maxthon є крос-платформенний браузер, розроблений у Китаї. Згідно з 20 альтернативними веб-браузерами Фахада Хана для Windows, Maxthon використовує як двигуни Trident, так і Webkit. Ми не помітили жодної проблеми з візуалізацією SVG на Linux (v. 1.0.5.3) і Windows (v. 4.4.5.3000); однак, на пристрої Android ні відстеження гаусових, ні інших примітивів фільтрів не виводилися.
CM Browser швидко виконали тестування на нашому тестовому пристрої Samsung galaxy S3, але він також не підтримує жодного з ефектів фільтрів, описаних у специфікації SVG 1.1 SE.
| Браузер | Версія | Платформа | Результат |
| Maxthon | 4.4.6.2000 | Android |  |
| CM Browser | 5.1.94 | Android |
Konqueror є браузером за умовчанням для KDE, одним з найпопулярніших середовищ для робочого столу Linux. Можливість відтворення SVG-файлів у Konqueror залежить від механізму рендеринга. З включеним WebKit наше тестування SVG візуалізувалося правильно. Тим не менш, за замовчуванням механізм візуалізації Konqueror, KHTML, не підтримує декілька функцій: ефекти фільтрів не застосовуються до основних маркерів об'єкта і кінця, а текст уздовж об'єктів шляху або шаблону взагалі не відображається.
| Браузер | Версія | Платформа | Результат |
| Konqueror KHTML | 15.04.2 | Linux |  |
Висновок
У нашому тесті ми зосередилися на підтримці формату SVG у сучасних веб-рендерингах. Ми перевірили 4 основні двигуни рендеринга і 15 різних браузерів, включаючи популярні, такі як Maxthon або Dolphin. Майже всі поточні версії браузерів пройшли через наш тест, і важко вибрати остаточного переможця.
Виявляється, що підтримка і правильне укладання примітивів фільтрів є останньою проблемою для сучасних двигунів рендеринга. Коли ми порівнюємо оригінальне SVG-зображення з усіма отриманими результатами, ми суб'єктивно призначаємо IE 11 (двигун Trident) для першого місця.
Однак, зрозуміло, що двигун Blink близький, і тому ми рекомендуємо Blink-браузери для рендеринга SVG-файлів. Якщо ви хочете виконати швидкий тест власного улюбленого браузера, спробуйте скористатися нашою тестовою сторінкою SVG.
Примітка редактора: Ця посада написана для Hongkiat.com від Michal Rost. Міхал працює програмістом у біомедичній компанії, але присвячує свій вільний час розробці додатків з відкритим вихідним кодом та неприбуткових веб-порталів. Він є засновником scalablegfx. Ви можете знайти його на Twitter.
