- PVSM.RU - https://www.pvsm.ru -

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

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

Интерлюдия

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

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

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

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

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

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

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

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

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

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

VectorMagick Ручная векторизация Оригинал (сжат с потерями [6])
>1.4mb 75kb 74.1kb

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

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

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

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

Android + PNG (сжат с потерями [6]) PhoneGap + SVG (ручная векторизация)
~24mb ~7mb

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

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

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

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

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

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

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

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

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

Это выглядело примерно так:
Верхний слой в виде 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 [10] удаляет некоторые стили в нижних слоях, я начал искать отсутствующие стили в «проблемных» файлах. Их не было; кроме того, меня смущал файл у которого не отображался ни один из слоёв, но тогда я отнёс это к ошибкам совместимости.

Пришлось попросить иллюстратора сделать набор пробников с разными вариантами настроек экспорта. После десятка другого комбинаций, я попробовал открыть изображения через встроенный браузер, а не 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 стиля) [11].
Она не отобразилась. Наверное, слишком скучная…

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

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

Автор: BIanF

Источник [12]


Сайт-источник PVSM.RU: https://www.pvsm.ru

Путь до страницы источника: https://www.pvsm.ru/javascript/108550

Ссылки в тексте:

[1] Microsoft призвал разработчиков: http://habrahabr.ru/company/microsoft/blog/136158/

[2] чём-то новом: http://habrahabr.ru/post/265163/

[3] стартового тега XML: http://stackoverflow.com/questions/20526492/svgs-not-showing-in-windows-phone-8-phonegap-app

[4] отсутствие нативной поддержки svg: https://blog.pivotal.io/labs/labs/use-svg-windows-development

[5] Vector Magic: http://vectormagic.com/home

[6] сжат с потерями: https://pngquant.org/

[7] что-то такое: http://www.dragoart.com/tuts/23164/1/1/how-to-draw-kylo-ren-easy.htm

[8] ничего не отображалось: https://habrastorage.org/files/932/ed0/3f6/932ed03f67c7412291d0e97695c4a114.jpg

[9] стили: http://graphing.ru/i/svg-syntax/

[10] оптимизатор SVG: https://helpx.adobe.com/illustrator/how-to/export-svg.html

[11] каракулю (2 стиля): https://www.dropbox.com/s/84mlcf8h2tinmdz/1line.svg

[12] Источник: http://habrahabr.ru/post/274797/