Тестирование поддержки SVG в разных браузерах [Пример]
SVG (масштабируемая векторная графика) официально поддерживается всеми основными веб-браузерами, включая Internet Explorer. Поддержка распространяется на широкий спектр программ для редактирования изображений, в частности Inkscape, который использует SVG в качестве собственного формата (если вы хотите обновить программу SVG, нажмите здесь).
Но что именно поддерживается веб-браузерами? Все ли механизмы рендеринга отображают файлы SVG и их функции одинаково? А как насчет их расширенных функций, таких как фильтры? Ну, это то, что мы собираемся выяснить. Мы взяли образец современных браузеров, в том числе некоторые из менее известных, и проверил их с помощью файла SVG, созданного для этой цели.
Тестовое изображение
Мы подготовили нашу тестовую картину, ориентируясь на элементы, которые художники чаще всего используют. Среди протестированных функций: пути текста и их взаимодействия, градиенты, фильтр размытия по Гауссу и, наконец, расширенный составной фильтр, сложенный из нескольких типов фильтров..
Движки веб-браузера
Мерцание двигателя
Мы начали с - безусловно, самого распространенного движка рендеринга - 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 | |
| Хром | 38.0.2125.114 | Android | |
| Хром | 43.0.2357.130 | Windows | |
| факел | 39.0.0.9626 | Windows |
Движок Webkit
Согласно недавней статистике использования браузеров, три верхние позиции не относятся к браузерам на основе веб-наборов (по состоянию на май 2015 года). Однако этот движок широко распространен среди разработчиков. Кроме того, есть различные реализации и вилки этого
Все протестированные браузеры отображали наш SVG-файл без проблем; тем не менее, различия в рендеринге Specular Lighting, составного фильтра, наблюдались по сравнению с Inkscape..
| браузер | Версия | Платформа | Результат |
| Сафари | 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 - это собственный движок, используемый в 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 - это движок, разработанный Mozilla Corporation и используемый в веб-браузере Firefox или почтовом клиенте Thunderbird. Он также используется браузерами PaleMoon, Waterfox и многими другими форками более ранних версий Firefox. В случае с движком Gecko результаты не были одинаковыми на разных платформах.
Версия для Windows показала небольшой сбой при рендеринге текста по пути; та же проблема наблюдалась в браузерах Firefox и PaleMoon. Как и в Webkit, Gecko, похоже, испытывает проблемы с корректной визуализацией фильтра Specular Lighting..
| браузер | Версия | Платформа | Результат |
| Fire Fox | 38.0.5 | Linux |  |
| Fire Fox | 38.0.5 | Android | |
| Бледная луна | +25,5 | Android |
| браузер | Версия | Платформа | Результат |
| Fire Fox | 38.0.5 | Windows |  |
| Бледная луна | +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 Михалом Ростом. Михал работает программистом в биомедицинской компании, но посвящает свое свободное время разработке приложений с открытым исходным кодом и некоммерческим веб-порталам. Он является основателем scalablegfx. Вы можете найти его в Твиттере.
