Скетч-дизайнер

Скетч + SVG для Андроида: ну его нафиг

Я задумал рассказать о том, как готовить SVG-графику для Андроида, но настройка автоматизации через сборщик пакетов оказалась неадекватно сложной и капризной, поэтому на данный момент я выгружаю иконки в PNG.

Оптимизировать дизайн-процесс нужно до того момента, пока на оптимизированное решение не тратится больше времени, чем на старое. Например, вместо кучи растровых картинок в PNG хочется отдавать разработчикам один вектор в SVG, чтобы он на всех устройствах смотрелся чётко и вкусно. Но если его дольше и сложнее делать, эта оптимизация только вредит.

Если ты делаешь сайт, почти любой SVG из Скетча ведёт себя адекватно. Но когда дело доходит до экспорта SVG из Скетча в Андроид-приложение, открываются врата в ад, потому что на старых версиях (Android 5, api v.22) иконка может потерять форму на непредсказуемую. Похоже, будто иконку разрывает. Это происходит из-за того, что в ней используются обводки, незамкнутые шейпы и маски. Иконка может терять цвет, заданный через маску или наоборот выглядеть как сплошной залитый цветом квадрат.

Стандарт SVG для Андроида не предполагает, что в файле могут использоваться маски и обводки (borders) и показывает правильно только Filled Shapes. Как назло, дизайнеры любят менять цвета иконок через маски, либо контролировать толщину линий через обводки. Готовить контуры иконок для того, чтобы их можно было испольовать с масками — отдельная боль, в этом Иллюстратор далеко впереди. Но держать иконки в дизайн-системе гораздо удобнее в Скетче. Перетаскивать иконки из Иллюстратора в Скетч очень неэффективно. Поэтому, мы материмся, но рисуем иконки в Скетче.

Есть гики, которые экспортируют SVG из Скетча и через сборщик пакетов Gulp и специальный самописный скрипт модифицируют SVG так, чтобы его хавал Андроид. Это используют в Акронисе, но, к сожалению, пока договориться о публикации скрипта не удаётся из-за NDA. Спасибо @sergey_nikishkin за советы. Другой аналогичный скрипт подогнал Денис @d_egaluev . Я попробовал его настроить, но при всём большом желании, это пока оказалось мне не по силам.

Поэтому, я вернулся к старой и проверенной схеме: для нативной разработки андроид-разработчики получают PNG во всех желаемых размерах в Зеплине. Не гламурно, зато не надо париться по поводу несоответствия того, что видишь в Скетче и в боевом приложении. Иконки выгружаю отдельным экраном, так всем удобнее их искать.

Напишу, если появятся более удобные способы. Кстати, даже PNG желательно дополнительно ужимать через сервис Tiny PNG. Ну а для веба и вебвью-решений SVG вполне надёжен.

—

#SVG #автоматизация

#для_профи — рубрика для тех, кто хочет automate and chill