Тестване на поддръжката на SVG в уеб браузърните машини [казус]
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 | андроид | |
| опера | 30.0.1835.88 | Windows | |
| Chrome | 38.0.2125.114 | андроид | |
| Chrome | 43.0.2357.130 | Windows | |
| факел | 39.0.0.9626 | Windows |
Webkit двигател
Според последните статистически данни за използването на браузъра първите три позиции не принадлежат на уеб базирани браузъри (към май 2015 г.). Този двигател обаче е широко разпространен сред разработчиците. Освен това има различни приложения и вилици от него
Всички тествани браузъри предоставят нашия SVG файл без проблеми; въпреки това, в сравнение с Inkscape са наблюдавани различия в представянето на Specular Lighting, съставна филтърна компонента.
| Браузър | версия | платформа | резултат |
| сафари | 8.0.6 | MacOS |  |
| видра | 0.9.05 | Linux | |
| QupZilla | 1.8.6 | Linux | |
| QupZilla | 1.8.6 | Windows | |
| делфин | 10.3.1 | андроид | |
| Konqueror | 15.04.2 | Linux | |
| UC Browser | 10.5.0.575 | андроид |
Двигател на тризъбеца
Trident е патентован двигател, използван от Internet Explorer версии 4.0 - 11.0. IE интерпретира нашия SVG перфектно. Освен това, външният вид на композитния филтър съответства на оригиналното изображение най-добре. Тествахме и IE 9, второто най-използвано IE (към май 2015) и установихме, че тази версия има проблеми с Gaussian Blur и Composite Filter.
Това обаче не е изненадващо, тъй като IE 9 първоначално беше освободен преди окончателния проект на SVG 1.1 SE стандарт, в който официално бяха добавени ефекти от филтъра..
| Браузър | версия | платформа | резултат |
| IE | 11.0.9600.17843 | Windows |  |
| Браузър | версия | платформа | резултат |
| IE | 9.0.8112.16421 | Windows |  |
Двигател Gecko
Gecko е двигател, разработен от Mozilla Corporation и използван по този начин в браузъра на Firefox или Thunderbird имейл клиента. Използва се и от браузърите PaleMoon, Waterfox и много други вилки от по-ранните версии на Firefox. В случая с двигателя Gecko резултатите не бяха същите в различните платформи.
Версията на Windows показваше малък проблем в представянето на текста по пътя; същият проблем се наблюдава и при браузърите Firefox и PaleMoon. Точно като Webkit, Gecko изглежда има проблеми с правилното представяне на примитивния филтър на Specular Lighting.
| Браузър | версия | платформа | резултат |
| Firefox | 38.0.5 | Linux |  |
| Firefox | 38.0.5 | андроид | |
| PaleMoon | 25.5 | андроид |
| Браузър | версия | платформа | резултат |
| 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 не са били изобразени нито Gaussian Blur, нито други примитивни филтри.
CM Browser изпълнихме бързо на нашето тестване на Samsung галактика S3 устройство, но също така не поддържа нито един от филтърните ефекти, описани от SVG 1.1 SE спецификация.
| Браузър | версия | платформа | резултат |
| Maxthon | 4.4.6.2000 | андроид |  |
| CM Browser | 1.5.94 | андроид |
Konqueror е браузър по подразбиране за KDE, една от най-популярните Linux десктоп среди. Възможността за рендиране на SVG файлове в Konqueror зависи от механизма за визуализация. С активиран WebKit, нашето тестване на SVG беше правилно. По подразбиране механизмът за правене на Konqueror, KHTML, изглежда липсва поддръжка на няколко функции: ефектите на филтъра не се прилагат към подлежащите маркери за край на обект и край, а текст по обекти на пътека или шаблон не се изобразява изобщо.
| Браузър | версия | платформа | резултат |
| Konqueror KHTML | 15.04.2 | Linux |  |
заключение
В нашия тест се фокусирахме върху поддръжката на SVG формат в съвременните двигатели за уеб рендеринг. Тествахме 4 основни рендериращи двигателя и 15 различни браузъри, включително популярни като Maxthon или Dolphin. Почти всички текущи версии на браузъри преминаха през нашия тест и е трудно да се избере окончателен победител.
Изглежда че поддържа и правилно подреждане на примитивите на филтрите е последното оставащо предизвикателство за съвременните двигатели. Когато сравняваме нашата оригинална SVG картина с всички предоставени резултати, субективно номинираме IE 11 (Trident engine) за първо място.
Ясно е обаче, че двигателят на Blink е в преследване и по този начин препоръчваме Blink-базирани браузъри за визуализиране на SVG файлове. Ако искате да извършите бърз тест на вашия любим браузър, можете да използвате нашата тестова страница за SVG визуализатор тук.
Бележка на редактора: Този пост е написан за Hongkiat.com от Michal Rost. Михал работи като програмист в биомедицинска компания, но отделя свободното си време за разработването на приложения с отворен код и уеб портали с нестопанска цел. Той е основател на scalablegfx. Можете да го намерите в Twitter.
