Векторизация, небольшой баг и семистильный костыль

Только что я нашёл решение странного бага, который преследовал меня целую неделю. Эта небольшая эпопея произвела на меня такое впечатление, что я решил поделиться ею с сообществом. Ошибка которую я обнаружил, возможно, присутствует лишь в моей прошивке и скорее всего никогда вас не затронет. Разве что вы решите делать Cordova/PhoneGap/HTML5 приложение с векторной графикой для Windows Phone 8.1

Интерлюдия

Почти четыре года назад Microsoft призвал разработчиков делать мобильные приложение под Windows на HTML5 и PhoneGap в частности.
Когда мне понадобилось попробовать себя в чём-то новом мне вспомнился этот призыв…

В новом так в новом решил я и начал переписывать своё старое приложение на JS. Так как Cordova (а значит и PhoneGap) поддерживают iOS и Android, где в последнее время разрешения экранов перешагнули планку в 4K, я решил перевести всю графику из приложения (а это почти весь контент) в вектор. Ведь нужно думать о будущем и после Microsoft Store попытаться вернуться в Google Play.

Интересная заметка

Если иллюстратор, который взялся векторизовать ваш контент в SVG пишет, что может в вектор возможно он использует SAI и вам не подходит.

Нет смысла писать, каково программировать и верстать под IE. Я лишь замечу, что IE в WebView не всегда ведёт себя, как обычный мобильный IE, а тот себя ведёт не всегда, как Stanalone IE 9 на котором рекомендуют тестировать контент. Бывалые разработчики подумают, что я столкнулся с очень интересным поведением браузера из-за стартового тега XML или же хочу пожаловаться на отсутствие нативной поддержки svg в WP, но это не так; можете пока отвести курсоры от кнопки, уменьшающей мою карму.

Интересная заметка

Если иллюстратор, который взялся векторизовать ваш контент после предоплаты опубликовал в ВК своё фото с кальяном, скорее всего контент будет готов не скоро.

Немного о векторизации

До того, как я решил векторизовать контент, мне казалось, что вектор это только для иконок и векторная графика высокого качества где-то в далёком будущем. Оказалось, что есть множество программ для автоматической векторизации. Благодаря алгоритмам Vector Magic может достойно векторизовать даже фото! Это казалось мне магией, но чуть и не подвело. Программно векторизованные картинки весили просто неприлично много и их отображение просто вешало смартфон. Я чуть было не отказался от вектора, но мне хватило ума попробовать использовать графику созданную вручную.

Комментарии излишни.

Интересная заметка

Если иллюстратор, который взялся векторизовать вашу простенькую картинку, присылает вам SVG в несколько мегабайт, вам стоит проверить наличие встроенных в SVG png файлов (тег image) или подозревать его в автоматической векторизации.

К моему сожалению полностью уйти от растровой графики не получилось. Её пришлось использовать для создания эффекта размытия. (svg позволяет интегрировать в себя png) Тем не менее, мне удалось сильно выиграть весе приложения

Это обусловлено большим количеством чёрно-белой графики, состоящей из геометрических фигур. Хотя конечно от некоторых графических эффектов пришлось полностью отказаться из-за трудозатрат на их реализацию в векторе.

Собственно баг

После работы иллюстратора у меня оказалось на руках несколько многослойных AI файлов. Каждый слой представлял собой изменённый предыдущий слой. (что-то такое)
Приложение подразумевает много SVG, где каждый SVG это отдельный слой из AI. У меня получилась интересная ситуация:

• Если я отображал SVG любого верхнего слоя, всё отображалось адекватно.
• Если я отображал SVG другого слоя, в PhoneGap на WP 8.1 стабильно ничего не отображалось. (на самом деле периодически баг проявлялся в Android PhoneGap со старым WebView)

Первым делом, я попробовал сохранить «проблемные» слои в разных конфигурациях. Но это никак не помогало: изображения всё так-же не отображались. Тогда я решил покопаться в текстовом представлении SVG файлов и менять их вручную, пытаясь найти закономерности.

Очевидная заметка

Редактировать оптимизированные SVG файлы в текстовом виде — плохая идея.

И вот что я обнаружил:

• Если к НЕверхнему слою добавить стили ВЕРХНЕГО слоя, то картинка начнёт отображаться.

Это выглядело примерно так:
Верхний слой в виде SVG файла (отображается)

<svg id="lesson_2_7" data-name="lesson 2 7" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 686 526"><defs><style>.cls-1{fill:#fff;}.cls-2{fill:#a2a2a2;}.cls-3{fill:#6c6c6c;}.cls-4{fill:#a9aeb7;}.cls-5{fill:#6f6f6f;}.cls-6{mask:url(#mask);}.cls-7{fill:#adadad;}.cls-8{mask:url(#mask-2);}.cls-9{fill:#46cc00;}.cls-10{fill:#fff7f7;}.cls-11{filter:url(#luminosity-noclip-2);}.cls-12{filter:url(#luminosity-noclip);}</style> ...

Не верхний слой в виде SVG файла (не отображается)

<svg id="lesson_2_5" data-name="lesson 2 5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 686 526"><defs><style>.cls-1{fill:#fff;}.cls-2{fill:#fff7f7;}</style> ...

Не верхний слой в виде SVG файла + style от верхнего слоя (отображается)

<svg id="lesson_2_5" data-name="lesson 2 5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 686 526"><defs><style>.cls-1{fill:#fff;}.cls-2{fill:#a2a2a2;}.cls-3{fill:#6c6c6c;}.cls-4{fill:#a9aeb7;}.cls-5{fill:#6f6f6f;}.cls-6{mask:url(#mask);}.cls-7{fill:#adadad;}.cls-8{mask:url(#mask-2);}.cls-9{fill:#46cc00;}.cls-10{fill:#fff7f7;}.cls-11{filter:url(#luminosity-noclip-2);}.cls-12{filter:url(#luminosity-noclip);}</style> ...

Посчитав, что оптимизатор SVG удаляет некоторые стили в нижних слоях, я начал искать отсутствующие стили в «проблемных» файлах. Их не было; кроме того, меня смущал файл у которого не отображался ни один из слоёв, но тогда я отнёс это к ошибкам совместимости.

Пришлось попросить иллюстратора сделать набор пробников с разными вариантами настроек экспорта. После десятка другого комбинаций, я попробовал открыть изображения через встроенный браузер, а не PhoneGap приложение: они прекрасно открылись. Тогда я решил расширить тестовою выборку файлов. Это дало мне новую пищу для размышлений:

• Добавился ai файл у которого не отображался ни один из слоёв
• Добавился ai файл у которого слои отображались начиная с 5 (из 7)

Вспомнив все свои знания с пар по Тестированию ПО и игре в Jenga, я начал поштучно удалять стили, пытаясь обнаружить зарытую собаку. После аннигиляции стиля cls-7 картинка переставала отображаться в приложении. Конечно, я вернул cls-7 и удалил cls-6: картинка пропала. Попробовал заменить cls-7 на копию cls-6: картинка отобразилась. Заменил все стили кроме cls-1 и cls-2 на множество пустышек cls-0{fill:#fff;}: картинка отобразилась.

Это заняло у меня неделю. В PhoneGap приложении для Windows Phone 8.10.14234.375 (Lumia 435 DS) не отображаются SVG изображения у которых меньше семи стилей. В итоге, или иллюстратор должен добавлять невидимые разноцветные точки, или я должен написать скрипт, который будет анализировать файл и добавлять в него «пустые» стили при необходимости. Конец.

P.S. Для полной уверенности я попросил иллюстратора нарисовать каракулю (2 стиля).
Она не отобразилась. Наверное, слишком скучная…

Интересная заметка

Если иллюстратор день за днём пересохраняет один и тот же файл, это хороший иллюстратор. Спасибо за понимание, Василиса.

Автор: BIanF

Источник