Векторизация, небольшой баг и семистильный костыль
Только что я нашёл решение странного бага, который преследовал меня целую неделю. Эта небольшая эпопея произвела на меня такое впечатление, что я решил поделиться ею с сообществом. Ошибка которую я обнаружил, возможно, присутствует лишь в моей прошивке и скорее всего никогда вас не затронет. Разве что вы решите делать 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 файла (не отображается)
Не верхний слой в виде SVG файла + 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 стиля).
Она не отобразилась. Наверное, слишком скучная…
Интересная заметка
Если иллюстратор день за днём пересохраняет один и тот же файл, это хороший иллюстратор. Спасибо за понимание, Василиса.
